原生JS中defer与async属性的执行机制对比

延迟脚本 defer 的执行机制

一、延迟脚本 defer

HTML4.0规范为<script>标签引入了defer属性。该属性的主要作用是表明脚本在执行时不会影响页面的构建过程。

带有defer属性的脚本会被延迟到页面完全加载完毕后执行，即浏览器解析到</html>标签后才会运行代码。在HTML5规范中，defer属性仅适用于外部脚本文件。

设置了defer属性的脚本文件，其执行时机在DOMContentLoaded事件触发之前。

异步脚本 async 的执行机制

二、异步脚本 async

HTML5为<script>标签添加了async属性。该属性与defer类似，同样仅对外部脚本有效，并指示浏览器立即下载文件。但与defer不同，async不保证脚本按照指定的先后顺序执行，因此需确保各脚本之间互不依赖。

指定async属性的目的是避免页面等待两个脚本下载和执行。异步脚本一定会在页面的load事件之前执行。

以上关于原生JS中延迟脚本和异步脚本的介绍到此结束，希望能为读者提供参考，并欢迎大家支持本站。