在前端开发中，我们常常需要引入一些 JavaScript 文件来实现页面的功能。但是当浏览器解析 HTML 文件时，如果遇到了 script 标签，它会立即下载并执行这个脚本，这就可能导致页面加载变慢。为了优化页面的性能，我们可以使用 defer 属性。
什么是 Defer 属性？
defer 是一个布尔属性，用于指示浏览器推迟脚本的执行，直到文档解析完成。这意味着，当浏览器遇到带有 defer 属性的 script 标签时，它会将该脚本放在 HTML 文档的最后面，等待文档解析完成后再执行。这样可以避免因脚本的执行而阻塞页面的渲染和交互。
使用 Defer 属性的注意事项
- Defer 属性只对外部脚本文件有效，内联脚本无效。
- Defer 属性不保证脚本的执行顺序，所以我们应该将独立的脚本文件分别加上 defer 属性，以确保它们可以按照正确的顺序执行。
- 如果一个页面上有多个带有 defer 属性的脚本文件，那么它们的下载和执行是异步的，也就是说，它们不会阻塞页面的渲染和交互，但它们之间的执行顺序是不确定的。
Defer 属性的实例
假设我们有一个 index.html 文件和两个 JavaScript 文件：one.js 和 two.js。其中 one.js 包含了一个名为 add 的函数，two.js 调用了这个函数。
不使用 Defer 属性
-- -------------------- ---- -------
--------- -----
------
------
-------------- ----- -----------------
------- ----------------------
------- ----------------------
-------
------
--------- -----------
-------
-------// one.js
function add(a, b) {
return a + b;
}
// two.js
const result = add(1, 2);
console.log(result); // 输出 3在这种情况下，当浏览器解析 HTML 文件时，它会下载并执行 one.js，然后再下载并执行 two.js。由于 two.js 中调用了 one.js 中定义的函数，所以如果 one.js 还没有被执行，那么就会导致报错。
使用 Defer 属性
-- -------------------- ---- -------
--------- -----
------
------
----------- ----- -----------------
------- ----- ----------------------
------- ----- ----------------------
-------
------
--------- -----------
-------
-------// one.js
function add(a, b) {
return a + b;
}
// two.js
const result = add(1, 2);
console.log(result); // 输出 3在这种情况下，当浏览器解析 HTML 文件时，它会将带有 defer 属性的 script 标签放在文档的最后面，并且不会阻塞页面的渲染和交互。等到文档解析完成后，它会按照正确的顺序执行这两个脚本文件，因此不会导致报错。
总结
Defer 属性是一种优化前端性能的方法，它可以推迟脚本的执行，从而避免阻塞页面的渲染和交互。但需要注意，Defer 属性只对外部脚本文件有效，不保证脚本的执行顺序，如果需要确保脚本的执行顺序，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29800