JavaScript 延迟执行：Defer 与 Async 属性解析

JavaScript 延迟执行问题分析

观察以下代码示例：

<body>
  <script src="deffer.js"></script>
  content
 </body>

deffer.js文件的具体内容如下：

alert(1)

在alert弹窗未关闭前，页面将保持空白状态。这是因为alert弹窗会阻止页面的后续渲染过程。

Defer 与 Async 属性的作用

为解决此类问题，HTML规范引入了defer和async属性。尽管具体定义不在此处展开，但核心目的是告知浏览器必须在页面渲染完成后才执行脚本，确保脚本执行时页面已渲染完毕。

<body>
  <script deffer async src="deffer.js"></script>
  content
 </body>

多个延迟脚本的执行顺序问题

需注意，对于多个添加了defer或async属性的脚本，其执行顺序与它们在页面中出现的顺序无关。尽管HTML规范规定defer脚本应按顺序执行，但浏览器实际上并未完全遵循这一约定。