异步加载JS—defer和async

时间 2020-06-29

原文原文链接

为何要异步加载JShtml

　　同步加载JS：将<script>脚本放在<head>标签内，不使用defer和async。这时浏览器碰到<script>标签会当即加载并执行指定的脚本，“当即”指的是在渲染 <script> 标签之下的文档元素以前，也就是说再也不渲染后续的文档元素，直到<script>以内的元素加载并执行完毕。这样会形成 “空白页” 出现，给用户带来很不友好的体验，因此就出现了异步加载JS的办法；浏览器

　　异步加载JS：异步是相对于HTML解析来讲的。即在加载<script>脚本的同时继续加载并渲染后续的HTML元素，即并行进行，该过程为异步加载JS；异步

异步加载JS有哪些方法async

一、将<script>脚本放在</body>标签以前优化

　　注意，这并非真正意义上的异步加载JS，而是利用HTML从上到下执行代码的特性，最后执行<script>脚本spa

　　可是，这是最佳实践。由于对于旧浏览器来讲这是惟一的优化选择，此法可保证非脚本的其它一切元素可以以最快的速度加载并解析。code

二、使用deferhtm

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

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

　　demo1.js 和 demo2.js 将和后续文档元素的加载同时进行（加载并不等于执行）；blog

　　demo1.js 和 demo2.js 的执行是在全部元素渲染完成以后，DOMContentLoaded事件触发以前完成；事件

　　demo1.js 和 demo2.js 会按照顺序执行，即先执行 demo1.js，再执行 demo2.js（由于demo1.js 在 demo2.js 以前）；

　　注意：当脚本都加载完成后才会按照顺序执行

　　适用：当脚本之间有相互依赖时很是合适

三、使用async

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

　　demo3.js 和 demo4.js 将和后续文档元素的加载同时进行（加载并不等于执行）；

　　demo3.js 和 demo4.js 并不保证执行顺序，谁先加载完成谁先执行。即同一个js文件的执行紧挨着加载的，加载完毕就执行

　　demo3.js 和 demo4.js 可能在DOMContentLoaded事件以前执行，好比当HTML元素特别多时

　　也可能在DOMContentLoaded事件以后执行，好比当HTML元素特别少时

　　适用：对于那些能够不依赖任何脚本或不被任何脚本依赖的脚原本说倒是很是合适的

写的比较偏理论，想看实践的，推荐一篇文章 http://www.javashuo.com/article/p-aexzjbby-bn.html。