script标签defer和async属性的区别
发布时间:2025-05-23 15:52:50 发布人:远客网络
一、script标签defer和async属性的区别
1、为了提高页面加载性能，在页面引入外部js的时候，可以使用script标签的 defer和 async属性来使得外部js异步加载
2、 script标签的使用分为三种情况：
3、没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；
4、有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；
5、有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。
6、下图可以直观的看出三者之间的区别:
7、其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
8、 defer和 async的共同点是都是可以并行加载JS文件，不会阻塞页面的加载，不同点是 defer的加载完成之后，JS会等待整个页面全部加载完成了再执行，而async是加载完成之后，会马上执行JS，所以假如对JS的执行有严格顺序的话，那么建议用 defer加载。
9、 In general, you should always use async or defer for third party scripts(unless the script does something necessary for the critical rendering path):
10、 Should you ever load third-party scripts without async or defer? You could make a case for this if the script is a crucial part of your site functionality. For example, if you're loading your main UI library or framework from a CDN, it will be badged as"third-party script" in DevTools, but should be treated as an essential part of your site, not an add-on.
11、 Note that not all scripts work if loaded asynchronously. Check the docs for any third-party scripts you're using. If you're using a script that can't be loaded asynchronously, you might want to consider an alternative, or eliminating the script if possible. Some third parties may highly recommend to load their scripts sync(to get ahead of other scripts), even if they would work fine async so do due diligence when evaluating strategies for loading third-party scripts.
二、script标签中defer和async属性的区别
script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：
1.<script src="example.js"></script>
没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；
2.<script async src="example.js"></script>
有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；
3.<script defer src="example.js"></script>
有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。
三、【前端】defer 和 async
1、在讨论前端技术时，"defer"和"async"是两个经常被提及的属性，它们分别与外部脚本的加载和执行方式有关。然而，初学者往往对它们的概念和作用感到困惑，特别是当它们影响到 DOM操作时。
2、曾经，一个疑惑的前端开发者在编写 HTML页面时尝试使用"defer"属性，将其放在中，期望在页面加载时立即执行脚本，却意外地发现 DOM操作部分无法正常工作。这个问题揭示了"defer"和"async"的第一点特性：它们仅对外部链接的脚本有效，对于内联脚本（即没有 src属性的 script标签）无效。
3、随着对 Node.js的深入学习，该开发者得以验证这两者在实际应用中的区别，并通过创建了一个简单的项目目录结构来演示。在 script-async-defer.html文件的部分，添加了三个分别标注为同步、async和 defer的外部脚本链接。随后，开发了一个名为 server.js的文件，用于控制路由和加载外部脚本。
4、通过运行项目，开发者观察到了脚本执行的顺序和产生的日志信息，进而得出了异步和延迟加载的不同特性。在没有内联脚本的情况下，页面仍可能出现类似问题。通过分析页面加载顺序，可以得出尽管在异步加载的脚本可能在延迟加载的脚本之前执行，但这并不意味着它们的执行顺序在实际加载过程中优先于延迟加载的脚本。异步脚本的执行通常在 DOMContentLoaded事件之后，但始终在页面加载完成（load事件）之前。
5、延迟加载的脚本则确保在 DOMContentLoaded事件之前完成执行，这等同于将脚本放置在 HTML文件的<body>结尾。因此，延迟加载适合处理与 DOM相关的脚本，而异步加载则适用于那些与特定 DOM元素无关的脚本，比如广告加载。
6、在开发过程中，了解并正确应用"defer"和"async"的差异能显著提升页面性能和用户体验。它们不仅帮助优化资源加载顺序，还能确保关键 UI元素尽早呈现给用户，避免页面因等待脚本加载而出现延迟加载体验。同时，它们对于广告或其他非关键脚本的快速加载尤其重要，从而确保用户的浏览体验流畅无阻。
