本文解析HTML5中script标签的defer和async属性。defer延迟脚本至页面解析完成后执行,保证顺序且早于DOMContentLoaded;async异步下载并在load前执行,不保证顺序。两者均适用于外部脚本,旨在优化页面加载性能。
延迟脚本 defer 的执行机制
一、延迟脚本 defer
HTML4.0规范为<script>标签引入了defer属性。该属性的主要作用是表明脚本在执行时不会影响页面的构建过程。
带有defer属性的脚本会被延迟到页面完全加载完毕后执行,即浏览器解析到</html>标签后才会运行代码。在HTML5规范中,defer属性仅适用于外部脚本文件。
设置了defer属性的脚本文件,其执行时机在DOMContentLoaded事件触发之前。
异步脚本 async 的执行机制
二、异步脚本 async
HTML5为<script>标签添加了async属性。该属性与defer类似,同样仅对外部脚本有效,并指示浏览器立即下载文件。但与defer不同,async不保证脚本按照指定的先后顺序执行,因此需确保各脚本之间互不依赖。
指定async属性的目的是避免页面等待两个脚本下载和执行。异步脚本一定会在页面的load事件之前执行。
以上关于原生JS中延迟脚本和异步脚本的介绍到此结束,希望能为读者提供参考,并欢迎大家支持本站。