浏览器对js文件的操作主要有两部分：下载和执行；

js文件下载在有些浏览器中是并行的，在有些浏览器中是串行的，如：IE8、firefox3、chrome2都是串行下载的；

执行在所有浏览器中默认是阻塞的，当js在执行时不会进行html解析和其他操作，所以，页面顶部的js不宜过大，过大会导致页面长时间处于空白状态，对于外链的js文件，async和defer属性可以减少对页面加载的影响

async表示js是否异步执行，当有这个属性时则不阻塞当前页面的加载，并在js下载完后立刻执行，但是不能保证多个script标签的执行顺序

defer表示js是否延迟执行，当有这个属性时js的执行会推迟到页面解析完成之后，可以保证多个script标签的执行顺序，需要注意的是这两个属性目前对于内嵌的js是无效的而对于dom中创建的script标签在浏览器中则是异步的

如果async为true，那么脚本在下载完成后异步执行

如果async为false，defer为true，那么脚本会在页面解析完毕之后执行

如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行

注：本文来自摘抄

script async 和script defer的区别的更多相关文章

  1. JS—ajax及async和defer的区别

    ###1.ajax  “Asynchronous Javascript And XML”(异步 JavaScript 和 XML) 使用: 如不考虑旧版本浏览器兼容性, // 第一步创建xhr对象 v ...

  2. 异步加载script,提高前端性能(defer和async属性的区别)

    一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...

  3. <script>, <script async>, <script defer> 三种标签的区别

    <script>, <script async>, <script defer> 三种标签的区别 <script>标签 阻塞html parsing 脚 ...

  4. script标签async和defer的区别及作用

    作用: 1.没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行. 2.async 属性表示异步执行引入的 JavaScript,与 ...

  5. script标签不带属性与带async、defer的区别

    <script> 当页面解析到script标签时,会停止解析并下载对应的脚本,并马上执行,执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不 ...

  6. <script>属性async和defer的区别

    async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本.只对外部脚本文件有效. defer:可选.表示脚本可以延迟到文档完全被解析和显示之后再执行.只 ...

  7. script async / defer

    script async / defer preload / prefetch https://abc.xgqfrms.xyz/ https://javascript.info/script-asyn ...

  8. script标签里的defer属性

    入职新公司,看代码的时候注意到有的script标签中有一个defer属性,查了一下.在这里分享出来. 需要注意的有三点,其中前两点是在错误中分辨出来的: 错误来源:http://www.w3schoo ...

  9. <script runat=server>、<%%>和<%#%>的区别

    ①<script runat="server">代码段与<%%>内联代码段的区别 在asp.net页面的aspx文件中允许使用<script runa ...

随机推荐

  1. 在Web Api中集成protobuf

    安装WebApiContrib.Formatting.ProtoBuf Install-Package WebApiContrib.Formatting.ProtoBuf 注册ProtoBufForm ...

  2. caffe_实战之两个简单的例子（物体分类和人脸检测）

    一.物体分类: 这里使用的是caffe官网中自带的例子,我这里主要是对代码的解释~ 首先导入一些必要的库: import caffe import numpy as np import matplot ...

  3. ssl访问的原理

    本文无图文对照解释,但力求通俗易懂.请读者边读边手绘各个流程,一便于理解.      总体交互流程如下      1. 客户端发起HTTPS请求 这个没什么好说的,就是用户在浏览器里输入一个https ...

  4. Windows 网络编程

    网络编程 API ,失败返回 -,错误代码 WSASYSNOTREADY 表示基础网络子系统没有准备好网络通行,WSAVERNOTSUPPORTED 表示 Socket 版本不支持,WSAEINPRO ...

  5. [Sass]嵌套

    [Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿 ...

  6. swift错误 Expressions are not allowed at the top level

    ``` ... earlier we said top-level code isn't allowed in most of your app's source files. The excepti ...

  7. iOS开发UI篇—CAlayer（自定义layer）

    iOS开发UI篇—CAlayer(自定义layer) 一.第一种方式 1.简单说明 以前想要在view中画东西,需要自定义view,创建一个类与之关联,让这个类继承自UIView,然后重写它的Draw ...

  8. libc++abi.dylib`__cxa_throw: 视频播放时异常

    这两天研究视频播放,集成RTMP视频出现的异常,刚好看到一篇博客,楼主使用［AVAudioPlayer Play］时出现了异常...记录下来: 由于xcode中设置了当所有异常出现时的断点,,解决办法 ...

  9. Jsonp调用网易云音乐API搜索播放歌曲

    效果如下图: 基本就是正常的文件播放,暂停,停止,设置循环,随机播放,加速,减速,上一曲,下一曲,再多个选择本地文件加入到播放列表的功能.然后想着给加个能搜索网络歌曲并且播放的功能,今天研究了一下,成 ...

  10. mysql主从

    1       系统规划 1.1     mysql版本 Mysql版本 mysql-5.5.51 1.2     服务器地址 服务器地址 10.180.2.167 1.3     mysql目录 主 ...