0%

defer和async的区别

script标签,属性defer和async的区别。

表格比较

deferasync仅在使用外部脚本时有效

属性作用
无属性我们正常使用不添加任何属性时,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
defer使用defer时,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成(并不是加载完成就立即执行)。
async使用async时,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。即在不影响后续文档元素渲染的情况下,加载js,加载完成后立即执行。
defer&async同时使用deferasync时,如果浏览器支持async则按async解析;如果不支持,则按defer解析。

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

图片示意

归纳总结

  • 二者都是异步去加载外部JS文件
  • async是在外部JS加载完成后,浏览器空闲时,Load事件触发前执行。而defer是在JS加载完成后,整个文档解析完成后执行。
  • defer更像是将<script>标签放在</body>之后的效果,但是它由于是异步加载JS文件,所以可以节省时间。
bulb