掌握脚本标签：使用 Async 和 Defer 进行精确的脚本控制

有志者，事竟成！如果你在学习文章，那么本文《掌握脚本标签：使用 Async 和 Defer 进行精确的脚本控制》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

在 web 开发领域，优化页面加载时间至关重要。

• 它的作用： 在 html 解析继续的同时异步下载脚本。
• 执行时：下载完成后，暂停 html 解析。
• 使用时：不依赖于其他脚本或dom内容的独立脚本。
• 警告： 可能会乱序执行，可能会破坏依赖关系。

推迟

• 它的作用： 在 html 解析继续的同时下载脚本。
• 执行时： html 解析完成后，domcontentloaded 事件之前。
• 使用时：依赖 dom 内容或需要按特定顺序执行的脚本。
• 警告：可能会延迟关键功能的执行。

比较行为

执行顺序：异步、延迟和两者

了解具有不同属性的脚本的执行顺序对于管理依赖关系和确保正确的功能至关重要。其工作原理如下：

1. 常规脚本（无异步或延迟）：

   • 按照它们在文档中出现的顺序执行。
   • 阻止 html 解析，直到下载并执行它们。

2. 异步脚本：

   • 并行下载并在可用时立即执行。
   • 不保证执行顺序；它们一下载就运行。
   • 可能在 dom 完全加载之前执行。

3. 推迟脚本：

   • 并行下载，但仅在 html 解析完成后执行。
   • 按照它们在文档中出现的顺序执行。
   • 在 domcontentloaded 事件之前运行。

4. 同时具有异步和延迟的脚本：

   • async 属性在现代浏览器中优先。
   • 在不支持异步的旧版浏览器中，它们会回退到延迟行为。

执行顺序示例：

可能的执行顺序：

1. 1.js（块解析）
2. 3.js 或 2.js（以先下载者为准）
3. 2.js 或 3.js（以第二个下载者为准）
4. 4.js
5. 5.js

请注意，如果 1.js 下载时间较长，2 和 3 可以按任何顺序执行，甚至可以在 1 之前执行。

最佳实践

1. 将异步用于分析等独立脚本。
2. 对依赖 dom 或其他脚本的脚本使用 defer。
3. 将脚本放置在 中，并使用异步方式或推迟提前开始下载。
4. 对于关键脚本，请考虑在 中使用内联脚本。

浏览器支持

现代浏览器广泛支持异步和延迟。对于较旧的浏览器，请考虑使用脚本加载器或将脚本放置在 的末尾。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《掌握脚本标签：使用 Async 和 Defer 进行精确的脚本控制》文章吧，也可关注golang学习网公众号了解相关技术文章。