JavaScript 脚本加载优化

JavaScript 是一个单线程语言，渲染引擎和 JavaScript 引擎并非同时工作。因此，当页面加载时，大量的 JS 代码如果被提前加载可能会导致页面刷新时出现短暂的闪屏现象。为了解决这一问题，开发者通过在 DOM 结构中添加 JavaScript 文件，利用 script 标签的 defer 和 async 特性进行优化。

defer 与 async 的区别

• defer： 当 script 标签带有 defer 属性时，浏览器会立即下载对应的 JS 文件，但等待当前页面的 DOM 渲染完毕之后再执行。这样可以确保页面内容的完整显示不会因为脚本加载而受到阻塞。多个带有 defer 的脚本会按照页面中出现的顺序依次执行其代码。
• async： 带有 async 属性的 script 标签与 defer 不同，会在页面开始渲染时立即下载 JS 文件。下载完成后，脚本会立即执行，可能会影响页面的初始渲染。因此，建议在使用 async 时避免在脚本中操作 DOM，否则可能导致页面视觉上的干扰或模糊。