转:script中的async和defer

最新推荐文章于 2024-08-07 14:50:46 发布

dayanwu2842

最新推荐文章于 2024-08-07 14:50:46 发布

阅读量62

点赞数

原文链接：http://www.cnblogs.com/stephenykk/p/5991628.html

版权

script中的async和defer

defer: This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

sync: Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously.

defer

对于defer，我们可以先思考一个情况。一个页面如果有N个外链的脚本，放在head中，那么，当加载脚本时会阻塞页面的渲染，也就是常说的空白。

如果在 <head> 中, 通过 <script>标签引用js文件，那么在这些js加载并执行完之前，浏览器不会继续往下解析html，用户就会看到所谓的白屏； <script defer src="my.js">..</script>，带 defer属性的 script ，即使放在 head 里面, 它也会等到html解析完成(DOMDocumentLoaded)之后再执行，类似把 script 放在了页面底部。

async

<script async src="my.js"></script>, async属性类似defer，也会让脚本异步加载，不会阻塞html的往下解析；但是async加载的js，会在加载完时立即执行，所以脚本之间的执行顺序无法保证, 适用于无依赖（不依赖也不被依赖)的脚本。

//没有 defer 或 async，
//浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，要先完成JS的加载并执行。
<script src="script.js"></script>

//有 async，加载和渲染后续文档元素和 script.js 的加载与执行并行（异步）。
//同时script.js会在加载完后，立即执行
<script async src="script.js"></script>

//有 defer，加载后续文档元素将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
<script defer src="myscript.js"></script>

从实用角度来说呢，把所有脚本都丢到

转载于:https://www.cnblogs.com/stephenykk/p/5991628.html