HTML脚本加载怎么优化？加速渲染的几种script策略
在前端性能优化中，HTML脚本的加载与执行策略是至关重要的一环。浏览器在解析HTML文档时，如果遇到普通的script标签，会暂停DOM的构建，转而下载并执行脚本，这就是所谓的“阻塞渲染”。如果脚本体积较大或网络较慢，会导致页面长时间白屏，严重影响用户体验。
为了加速页面渲染，我们需要采用不同的script加载策略。本文将详细介绍几种常见的优化方案及其适用场景。
一、 默认加载方式：阻塞渲染
默认情况下，浏览器遇到script标签时会立即下载并执行脚本，在此期间完全阻塞DOM的解析。
<script src="app.js"></script>
影响：导致DOM构建暂停，页面渲染延迟。这种方式只适用于那些必须立即执行且体积很小的核心脚本。
二、 defer 属性：延迟执行
为script标签添加defer属性后，浏览器会并行下载该脚本，而不会阻塞DOM的解析。脚本会在HTML文档完全解析完毕后、触发DOMContentLoaded事件之前按照它们在页面中出现的顺序依次执行。
<script defer src="app.js"></script>
特点：
不阻塞DOM解析。
并行下载。
按文档顺序执行。
在
DOMContentLoaded前执行。
适用场景：适用于需要操作DOM的脚本，或者多个脚本之间存在依赖关系的情况。这是目前最推荐的脚本放置方式之一。
三、 async 属性：异步执行
添加async属性的脚本同样会在后台并行下载，不阻塞DOM解析。但与defer不同的是，一旦脚本下载完成，浏览器就会暂停DOM解析并立即执行该脚本。因此，带有async的脚本执行顺序是不确定的，谁先下载完谁先执行。
<script async src="www.ipipp.com/analytics.js"></script>
特点：
不阻塞DOM解析。
并行下载。
下载完立即执行（此时会阻塞DOM解析）。
执行顺序不可控。
适用场景：适用于独立性强、不依赖其他脚本且不操作DOM的脚本，例如第三方统计代码、广告脚本等。
四、 动态创建 script 标签
通过JavaScript动态创建script元素并插入到DOM中，默认情况下这种方式相当于添加了async属性。如果需要保证执行顺序，可以显式设置async = false。
var script = document.createElement('script');
script.src = 'app.js';
// script.async = false; // 如果需要按顺序执行，取消注释
document.head.appendChild(script);适用场景：适用于按需加载模块，或者在非HTML文件（如纯JS文件）中实现异步加载脚本。
五、 脚本置于底部
在HTML4时代，defer和async还未普及，最经典的优化手段是将script标签放在body元素的底部。这样浏览器会先解析并渲染完整的DOM结构，然后再下载和执行脚本。
<body> <!-- 页面核心DOM内容 --> <script src="app.js"></script> </body>
适用场景：作为兼容老旧浏览器的兜底方案，现代开发中更推荐直接使用defer。
六、 ES6 Module（type="module"）
现代浏览器原生支持ES6模块。带有type="module"的脚本默认具有defer的行为：异步下载，在DOM解析后执行，且严格按依赖顺序执行。如果加上async属性，则会在下载完后立即执行。
<script type="module" src="app.mjs"></script> <script type="module" async src="analytics.mjs"></script>
适用场景：现代Web应用开发，利用模块化打包工具（如Vite、Webpack）输出的现代代码包。
总结与策略选择
针对不同的脚本功能，我们应当采取不同的加载策略，以达到最佳的渲染性能：
| 策略/属性 | 是否阻塞DOM解析 | 执行时机 | 执行顺序 | 推荐使用场景 |
|---|---|---|---|---|
| 默认(无属性) | 是（严重阻塞） | 下载后立即执行 | 按文档顺序 | 极小且必须立即执行的核心脚本 |
| defer | 否 | DOM解析后，DOMContentLoaded前 | 按文档顺序 | 操作DOM的脚本、有依赖关系的脚本 |
| async | 否（下载时），是（执行时） | 下载完成后立即执行 | 不可控（谁先下完谁先执行） | 独立第三方脚本（统计、广告） |
| type="module" | 否 | 同defer | 按依赖顺序 | 现代模块化Web应用 |
在实际项目中，最黄金的法则是：将核心CSS放在头部阻塞渲染，将大部分JS脚本加上defer放在head中，这样既能让浏览器尽早发现资源并并行下载，又不会阻塞页面的首屏渲染，从而最大化地提升页面加载速度。