脚本延迟属性 - JavaScript

在 JavaScript 中，我们可以使用脚本延迟属性来控制脚本的加载时机，以优化页面性能。

脚本延迟属性可以让浏览器在解析 HTML 文档时不阻塞 JavaScript 文件的加载，直到文档解析完毕再执行。

使用方法

使用脚本延迟属性非常简单，只需在 script 标签中加上 defer 属性即可。如下所示：

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

在加上 defer 属性后，浏览器会先下载 JavaScript 文件，但不会立即执行。直到文档解析完毕后才会按顺序执行延迟脚本。

需要注意的是，defer 属性只对外部脚本有效，也就是说，只对通过 src 属性加载的脚本有效。内联脚本（即在 script 标签内直接编写的脚本）不受 defer 属性影响。

与 async 属性的区别

除了 defer 属性外，还有一个类似的 async 属性。它与 defer 的区别在于，async 属性加载完毕后会立即执行，而不是等待文档解析完毕后再执行。

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

因此，相对于 defer，async 属性的优先级更高，适用于那些对加载时间敏感的脚本。

结论

脚本延迟属性（defer）是优化页面性能的一个简单而有效的方法。通过延迟脚本的加载和执行，可以让页面更快地呈现，提升用户体验。但需要注意的是，defer 属性只对外部脚本有效，内联脚本不受影响。同时，要根据实际需求选择合适的属性（defer 或 async）来使用。