defer和async的区别
2016-03-14 23:22
274 查看
先来试个一句话解释仨,当浏览器碰到
没有
有
有
然后从实用角度来说呢,首先把所有脚本都丢到
接着,我们来看一张图咯:
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。
此图告诉我们以下几个要点:
defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics
script脚本的时候:
<script src="script.js"></script>
没有
defer或
async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该
script标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
<script async src="script.js"></script>
有
async,加载和渲染后续文档元素的过程将和
script.js的加载与执行并行进行(异步)。
<script defer src="myscript.js"></script>
有
defer,加载后续文档元素的过程将和
script.js的加载并行进行(异步),但是
script.js的执行要在所有元素解析完成之后,
DOMContentLoaded事件触发之前完成。
然后从实用角度来说呢,首先把所有脚本都丢到
</body>之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
接着,我们来看一张图咯:
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。
此图告诉我们以下几个要点:
defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics
相关文章推荐
- HTML DOM display 属性
- html5 Web storage
- 模拟Jquery选择器
- node.js编写服务器
- JS新API标准 地理定位(navigator.geolocation)
- HTML5学习笔记(总结提炼版)——002 CSS
- [读书笔记]Effective Java 第一章
- Jquery的样式切换
- 01.阅读JQUERY源码——定义函数
- jQuery 关于 end() 方法的详细解释
- 00.阅读JQUERY源码——简目录
- html5 (个人笔记)
- 【GDOI 2016模拟3.14】garrafeira
- JS中的window.location.href解释
- 主流浏览器css兼容问题的总结
- Jquery页面滚动
- Armchart Js版属性学习与总结
- HTML+CSS实战(一)——导航条菜单的制作
- AngularJS in Action读书笔记4(实战篇)——创建Statistic模块
- Bootstrap 辅助样式