掌握脚本标签：使用 Async 和 Defer 进行精确的脚本控制-js教程-PHP中文网

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

碧海醫心

发布： 2024-09-30 14:42:02

转载

1215人浏览过

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

在 web 开发领域，优化页面加载时间至关重要。 <script> 标签的两个强大属性 - async 和 defer - 可以显着影响网站的性能。在没有彻底理解这些属性的情况下使用它们可能会影响性能并导致错误。让我们从基础开始，了解这些属性的作用以及何时使用它们。

基础知识：脚本如何加载

默认情况下，当浏览器遇到 <script> 标签时，它：

暂停 html 解析
下载脚本
执行脚本
恢复 html 解析

此过程会减慢页面渲染速度，尤其是对于大型脚本或缓慢的连接。此外，如果脚本在某些 html 元素完全加载之前运行，则可能会导致错误，如果脚本未正确放置在文档中，这种情况通常会发生。

异步和延迟：一把双刃剑

异步

<script async src="script.js"></script>

登录后复制

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

推迟

<script defer src="script.js"></script>

登录后复制

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

比较行为

attribute	download	execution	html parsing	main risk
none	blocks	immediate	paused	slow initial render
async	parallel	asap	paused when downloaded	race conditions
defer	parallel	after html	continues	delayed functionality

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

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

常规脚本（无异步或延迟）：
- 按照它们在文档中出现的顺序执行。
- 阻止 html 解析，直到下载并执行它们。
异步脚本：

Robovision AI
一个强大的视觉AI管理平台

65

查看详情
- 并行下载并在可用时立即执行。
- 不保证执行顺序；它们一下载就运行。
- 可能在 dom 完全加载之前执行。
推迟脚本：
- 并行下载，但仅在 html 解析完成后执行。
- 按照它们在文档中出现的顺序执行。
- 在 domcontentloaded 事件之前运行。
同时具有异步和延迟的脚本：
- async 属性在现代浏览器中优先。
- 在不支持异步的旧版浏览器中，它们会回退到延迟行为。

执行顺序示例：

<script src="1.js"></script>
<script async src="2.js"></script>
<script async src="3.js"></script>
<script defer src="4.js"></script>
<script defer src="5.js"></script>

登录后复制

可能的执行顺序：