script 标签之 defer 属性，延迟脚本的加载执行

muf无知

• 含义：defer表明脚本将在页面解析完成后，DOMContentLoaded事件触发之前执行。也就是说，当浏览器遇到带有defer属性的<script>标签时，它会开始下载脚本文件，但不会立即执行，而是继续解析 HTML 文档。muf无知

• 作用muf无知

• 提高页面加载性能：如果没有defer属性，浏览器遇到<script>标签时会立即停止解析 HTML，转而下载并执行脚本。若脚本文件较大或执行时间较长，会阻塞页面的渲染，导致用户等待时间变长。而defer属性允许浏览器在后台下载脚本的同时继续解析 HTML，等 HTML 解析完成后再执行脚本，从而加快页面的首次渲染速度，提升用户体验。在网页包含多个脚本时，多个带有defer属性的脚本会按照它们在 HTML 文档中出现的顺序依次执行，确保脚本执行顺序的可预测性。例如，一个页面有多个脚本分别负责不同功能模块的初始化，使用defer可以保证这些初始化操作按正确顺序进行，避免因顺序错乱导致的功能异常。muf无知

• 确保 DOM 可用：由于defer脚本在 DOM 解析完成后执行，这意味着脚本执行时可以安全地访问和操作 DOM 元素。如果在 DOM 还未完全解析时执行脚本，可能会出现脚本试图访问不存在的 DOM 元素的情况，导致错误。对于需要操作页面元素的脚本，使用defer属性可以避免这类问题，提高代码的稳定性和可靠性。muf无知

muf无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2025-02-15/2027.html

很赞哦！ (20) 赏 有话说 (0)