【前端】defer 和 async
最新回答
我的眼泪因为你悲伤。
2021-05-26 06:50:41
曾经，一个疑惑的前端开发者在编写 HTML 页面时尝试使用 "defer" 属性，将其放在中，期望在页面加载时立即执行脚本，却意外地发现 DOM 操作部分无法正常工作。这个问题揭示了 "defer" 和 "async" 的第一点特性：它们仅对外部链接的脚本有效，对于内联脚本（即没有 src 属性的 script 标签）无效。
随着对 Node.js 的深入学习，该开发者得以验证这两者在实际应用中的区别，并通过创建了一个简单的项目目录结构来演示。在 script-async-defer.html 文件的部分，添加了三个分别标注为同步、async 和 defer 的外部脚本链接。随后，开发了一个名为 server.js 的文件，用于控制路由和加载外部脚本。
通过运行项目，开发者观察到了脚本执行的顺序和产生的日志信息，进而得出了异步和延迟加载的不同特性。在没有内联脚本的情况下，页面仍可能出现类似问题。通过分析页面加载顺序，可以得出尽管在异步加载的脚本可能在延迟加载的脚本之前执行，但这并不意味着它们的执行顺序在实际加载过程中优先于延迟加载的脚本。异步脚本的执行通常在 DOMContentLoaded 事件之后，但始终在页面加载完成（load 事件）之前。
延迟加载的脚本则确保在 DOMContentLoaded 事件之前完成执行，这等同于将脚本放置在 HTML 文件的 <body> 结尾。因此，延迟加载适合处理与 DOM 相关的脚本，而异步加载则适用于那些与特定 DOM 元素无关的脚本，比如广告加载。
在开发过程中，了解并正确应用 "defer" 和 "async" 的差异能显著提升页面性能和用户体验。它们不仅帮助优化资源加载顺序，还能确保关键 UI 元素尽早呈现给用户，避免页面因等待脚本加载而出现延迟加载体验。同时，它们对于广告或其他非关键脚本的快速加载尤其重要，从而确保用户的浏览体验流畅无阻。
热门标签
