上一篇
浏览器加载js时为何报错？js加载顺序对性能的影响
在 Web 开发中，JavaScript 的加载时机与执行顺序直接决定了页面的性能表现以及脚本能否正确访问 DOM 元素，理解浏览器如何解析 HTML 并加载 JS，是优化前端性能的关键。
默认行为：同步加载与阻塞渲染
当 HTML 解析器遇到 <script> 标签且没有 async 或 defer 属性时，浏览器会立即暂停 HTML 解析，转而下载并执行该脚本，这种行为被称为“阻塞式加载”。
| 特性 | 描述 |
|---|---|
| 执行时机 | 脚本下载完成后立即执行，HTML 解析暂时停止。 |
| DOM 可用性 | 脚本执行时，DOM 尚未完全构建，直接操作后续 DOM 元素会导致错误。 |
| 渲染影响 | 阻塞页面渲染，用户可能看到空白页或加载中的状态，直到脚本执行完毕。 |
| 适用场景 | 需要严格依赖特定 DOM 结构或后续脚本依赖当前脚本结果的场景（较少见）。 |
这种传统方式虽然简单,但在现代 Web 应用中往往成为性能瓶颈，尤其是当脚本体积较大或位于 <head> 中时。
异步加载：async 属性
async 属性允许脚本在后台下载，而不阻塞 HTML 解析，一旦脚本下载完成，浏览器会暂停解析并立即执行脚本。
- 非阻塞解析：HTML 解析器继续工作，构建 DOM 树。
- 执行顺序不确定：多个带有 async 的脚本按照下载完成的顺序执行，而非它们在 HTML 中出现的顺序。
- DOM 可用性：脚本执行时，DOM 可能尚未完全构建，因此不建议在 async 脚本中直接操作 DOM。
- 适用场景：独立的第三方脚本，如分析工具（Google Analytics）、广告脚本等，这些脚本不依赖其他脚本，也不被其他脚本依赖。
延迟加载：defer 属性
defer 属性同样允许脚本在后台下载而不阻塞 HTML 解析，但与 async 不同，它保证脚本按照它们在 HTML 中出现的顺序执行，并且只在 HTML 解析完全结束后、DOMContentLoaded 事件触发前执行。
- 非阻塞解析：HTML 解析器继续工作。
- 执行顺序确定：脚本严格按照 HTML 中的顺序执行。
- DOM 可用性：脚本执行时，DOM 已经完全构建，可以安全地操作任何 DOM 元素。
- 适用场景：应用的核心 JavaScript 文件，特别是那些需要操作 DOM 或依赖其他脚本执行结果的代码。
动态加载：JavaScript 创建 Script 元素
除了静态标签,开发者可以通过 JavaScript 动态创建 <script> 标签并将其插入 DOM，从而实现更灵活的加载控制。
const script = document.createElement('script'); script.src = 'example.js'; document.head.appendChild(script);
- 默认行为：动态创建的脚本默认是异步执行的（类似 async），但行为在不同浏览器中可能略有差异。
- 控制加载时机：可以通过监听 onload 或 onerror 事件来确保脚本加载成功后再执行后续逻辑。
- 适用场景：按需加载（Lazy Loading），例如在用户滚动到特定区域时才加载相关脚本，或根据用户交互动态加载功能模块。
现代最佳实践归纳
在现代前端开发中,推荐以下策略以优化加载性能：
- 核心脚本使用 defer：将主要的业务逻辑脚本放在 <head> 或 <body> 末尾，并添加 defer 属性，确保 DOM 就绪且执行顺序可控。
- 第三方脚本使用 async：对于不依赖 DOM 且无依赖关系的第三方库，使用 async 以减少对主线程的阻塞。
- 避免同步脚本：尽量避免在 <head> 中使用无属性的 <script> 标签，除非有极特殊的必要性。
- 按需加载：对于非关键功能，使用动态加载或代码分割（Code Splitting）技术，仅在需要时加载相应脚本。
相关问题与解答
问题 1：async 和 defer 的主要区别是什么？在什么情况下应该选择其中一个？
解答：
async 和 defer 都允许脚本在后台下载而不阻塞 HTML 解析，但它们在执行时机和顺序上有显著差异。async 脚本在下载完成后立即执行，执行顺序不确定，且可能在 DOM 完全构建前执行，因此不适合操作 DOM。defer 脚本则等到 HTML 解析完成后、DOMContentLoaded 事件触发前按顺序执行，DOM 已完全可用，如果脚本是独立的、不依赖 DOM 且无依赖关系（如分析脚本），应选择 async；如果脚本需要操作 DOM 或依赖其他脚本的执行结果，应选择 defer。
问题 2：为什么在现代 Web 开发中，推荐将 <script> 标签放在 <head> 中并使用 defer 属性，而不是放在 <body> 末尾？
解答：
将 <script> 放在 <body> 末尾是传统的做法，目的是确保 DOM 在脚本执行前已构建，这种做法会导致浏览器在解析到 <script> 标签前必须下载并解析完整个 HTML 文档，增加了首屏渲染时间，使用 defer 属性并将脚本放在 <head> 中，浏览器可以尽早发现脚本并开始下载，而不会阻塞 HTML 解析，这样，脚本的下载可以与 HTML 解析并行进行，从而减少整体加载时间，提升用户体验。defer 保证了脚本在 DOM 就绪后按顺序执行，既解决了性能问题，又避免了 DOM 未就绪的错误。
