JS中script标签defer和async属性的区别

向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式，第一种直接在script标签之间插入js代码，第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染，对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟。

script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：
1.

<script src="example.js"></script>

没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说如果script在html渲染标签的文档之前，会不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的渲染加载，也就是浏览器会出现空白。如果script在html渲染标签的文档之后，会导致延迟；

2.(async 属性是HTML5中新增的)

<script async src="example.js"></script>

有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

3.(HTML4中就有了defer属性)

<script defer src="example.js"></script>

有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析后渲染前。

总结：
1.defer 和 async 的共同点是都是可以异步并行加载，不会阻塞页面的加载，不同点是 defer的加载完成之后，JS会等待整个页面全部加载完成了再执行，而async是加载完成之后，会马上执行JS，所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。

2.defer和async在网络加载过程是一致的，都是异步执行的；

3.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求

4.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。

5.defer与async，前者要等到文档解析渲染完毕后，DOM事件调用前执行，才会执行；后者一旦加载完，就会执行这个脚本。

6.defer和async的作用基本相似，被定义的脚本将延迟到浏览器遇到html标签后再执行（所以我们平时在head里提前引入的外部库，没增加defer和async属性时，才可以提前加载）

推荐的应用场景
defer
如果你的脚本代码依赖于页面中的DOM元素，或者被其他脚本文件依赖。
例如：评论框

async
如果你的脚本并不关心页面中的DOM元素，并且也不会产生其他脚本需要的数据。
例如：百度统计

如果不太能确定的话，用defer总是会比async稳定

JS中script标签defer和async属性的区别相关推荐

script标签中的defer和async属性
默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本 ...
script的defer和async
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
HTML中script标签
一.script标签中的属性 async:在script标签中添加此属性,浏览器会开启异步下载脚本(执行到当前标签后立即下载),当下载完成后立即执行,但并不会按着script在页面中的顺序来执行,而是 ...
script标签中写html,html中script标签的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中script标签的详细用法,有兴趣的朋友可以了解一下! 一.前言在html中,为了实现动态交互效果,我们经常会嵌入其它脚本语言(如:JavaScrip ...
Js中的数据属性和访问器属性
Js中的数据属性和访问器属性在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
js中如果无法获取某个html属性，例如自定义了一个dir属性，但获取总是为空，尝试换个词，因为可能什么关键词冲突了。...
js中如果无法获取某个html属性,例如自定义了一个dir属性,但获取总是为空,尝试换个词,因为可能什么关键词冲突了. 转载于:https://www.cnblogs.com/kenkofox/arc ...
input标签disabled和readonly属性的区别
input标签disabled和readonly属性的区别 readonly和disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容. disabled: 对于所有的表单 ...
script 标签中的defer 和 async 属性
浏览器在解析 HTML 的时候,如果遇到一个没有任何属性的 <script> 标签 ,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完毕 ...
script 标签上的 defer 和 async 属性是什么？
我们经常使用 script 标签向页面插入一个常规的 JavaScript 文件: <script src="/path/to/script.js"></scri ...

JS中script标签defer和async属性的区别

JS中script标签defer和async属性的区别相关推荐

最新文章

热门文章