script标签的defer和async属性

278 阅读1分钟

defer属性

如果script标签中有defer属性,只有当浏览器遇到</html>标签后,才开始执行。相当于页面解析完成后在执行脚本延迟加载。

HTML5规定,defer属性只适用于外部脚本,IE4、Firfox3.5、Chrome、Safari5都支持,opera不支持, 另外IE还支持嵌入脚本中的defer属性。

async属性

同样适用于外部脚本文件,读取之后,和文档流异步加载,但不能保证含有async属性的script标签的加载顺序,所以不能有依赖关系以及不能修改DOM,Firfox3.6、Safari5、Chrome支持

两者的不同

defer和async的不同
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

这个人写的不错 segmentfault.com/q/101000000…