js异步加载

Posted 孙倩倩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js异步加载相关的知识,希望对你有一定的参考价值。

<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异步加载的主要内容,如果未能解决你的问题,请参考以下文章

异步加载JS

js判断异步引入的js文件是否加载完毕

Vue中router路由异步加载组件-优化性能

Js文件异步加载

Js文件异步加载

异步加载JS