码迷,mamicode.com
首页 > Web开发 > 详细

js异步加载

时间:2018-01-08 14:50:18      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:最佳实践   顺序   属性   加载顺序   下载   html5   body   文档   执行   

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

当浏览器碰到script脚本时,会立即加载并执行指定的脚本(不等后续载入的文档元素)。

 

解决方案:

1)defer ,只支持IE

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

加载后续文档元素的过程将和script.js的加载并行进行(异步),但是script.js的执行要在所有元素解析完成之后,DOMContentLoaded事件触发之前完成。

如果你的脚本不会改变文档的内容,可以使用defer属性。

2)async(HTML5的属性)

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

加载和渲染后续文档元素得过程将和script.js的加载与执行并行

 

从实用角度上讲,首先把所有的脚本都丢到</body>之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得以加载和解析。

总结:

1)defer 和 async 在网络读取(下载)这块都是一样的,都是异步的(相较于HTML解析)

2)它俩的差别在于脚本下载完之后何时执行,显然defer是最接近我们对于应用脚本加载和执行的要求的。

3)关于defer,此图未尽之处在于它是按照加载顺序执行脚本的。

4)async 则是一个乱序执行的主,反正对它来说脚本的加载和执行时紧紧挨着的,所以不管你声明的顺序如何,只要它加载了就会立刻执行。

 

js异步加载

标签:最佳实践   顺序   属性   加载顺序   下载   html5   body   文档   执行   

原文地址:https://www.cnblogs.com/sunqq/p/8242215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!