itfan123详解JavaScript 中defer和async异步加载的区别
原创内部和外部脚本
向HTML页面插入JavaScript主要的方法是使用 script 元素，则有两种方法
-
内联脚本 ：直接嵌入到页面中JavaScript代码
-
外联脚本 ：参照外部JavaScript文件
在浏览器中加载HTML过程中，HTML 解析器在主线程中运行，并且遇到。 </script> 在标签被阻止之后，直到从网络获取并执行脚本。也就是说 <script> 标记中的脚本会阻止浏览器呈现，也称为“呈现阻止”。
阻塞的解决方案
script 标签提供两个属性： defer 和 async ，作为异步加载的解决方案。
async
Boolean属性指示浏览器是否在允许的情况下异步执行脚本。此属性对内联脚本没有影响。 (即没有src属性的脚本)。那是,async该属性告诉浏览器首先下载文件，并在时间成熟时执行。异步脚本肯定会出现在页面上load在事件之前执行，但可能是DOMContentLoaded在触发事件之前或之后执行。更重要的是要注意到这个标记。async该脚本不保证按指定的顺序执行。因此，确保每个异步脚本不相互依赖是非常重要的。
defer
此布尔属性设置为通知浏览器在分析文档后将触发脚本。 DOMContentLoaded 事前执行。如果丢失 src 属性(即内联脚本)，不应该使用它，因为它在这种情况下不起作用。用于动态嵌入的脚本 async=false 以达到类似的效果。
区别
从上图可以看出，defer和async可以达到异步加载的目的，他们都告诉浏览器应该立即下载，但下载后 执行时间不同 。
- async下载完成后，将执行浏览器空间，但仍可能导致渲染阻塞。
- 而defer会在HTML在所有资源解析完成之前，它不会执行。
总结
- defer和async都是 异步 加载 外部 JS文件
- defer和async显然，不同之处在于下载完成后执行脚本的时间。defer更接近需求
- async不能保证脚本执行的顺序。
- async在外部JS加载后，当浏览器空闲时触发执行。
- defer是在外部JS加载后，在解析完整个文档后触发执行。
- defer更像是将
<script>标签放在<body>但它是异步加载的，节省了时间。
版权声明
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
相关文章
