怎么优化网页中JavaScript的加载速度

优化网页中 JavaScript 的加载速度，本质上是解决两件事：减少浏览器必须下载的数据量，以及避免脚本执行阻塞主线程对页面内容的渲染。要实现这一目标，核心路径包含四步：使用 defer 与 async 控制脚本执行时机、通过代码分割仅载入首屏必需逻辑、借助打包压缩减少线上体积，以及配置长期缓存与 CDN 加快网络响应。本文将按实际落地顺序，逐项拆解这些具体做法与配置规则。

一、为什么 JavaScript 会拖慢页面加载

在默认情况下，浏览器从上到下解析 HTML 文档。一旦在 HTML 中遇到普通的 <script src="..."> 标签，渲染引擎必须立即停下 HTML 解析工作，发起网络请求下载该脚本，并在下载完成后立即交由 JavaScript 引擎编译执行。在脚本执行完成之前，后续的 DOM 树构建与样式绘制完全处于停滞状态。

当页面头部引入了体积较大或响应较慢的第三方脚本时，用户会长时间面对空白页面或无法点击的界面。这就是典型的“渲染阻塞（Parser Blocking）”。因此，优化 JavaScript 加载速度的第一原则，就是解除普通脚本对主线程解析的强耦合阻塞。

二、调整加载时序：合理选择 defer、async 与 Module

为了防止脚本阻塞 HTML 解析，现代浏览器提供了标准属性来控制脚本的加载与执行节奏。理解两者的边界是首要操作：

1. 使用 defer 属性（首屏核心脚本首选）

在 <script> 标签中增加 defer 属性后，浏览器会在后台启动单独的下载线程获取文件，主线程继续顺畅解析 HTML。所有带有 defer 的脚本会在 HTML 解析完毕、但在 DOMContentLoaded 事件触发前执行。更关键的是，多个带有 defer 的脚本会严格按照其在 HTML 中出现的顺序执行。

<!-- 推荐：首屏核心依赖使用 defer，保持执行顺序且不阻塞页面渲染 -->
<script defer src="/assets/js/vendor.js"></script>
<script defer src="/assets/js/app.js"></script>

2. 使用 async 属性（独立第三方脚本首选）

async 同样会后台并行下载脚本，但它的执行策略是“下载完毕即刻插队执行”。这意味着它不会等待 HTML 解析，也不会顾及各个脚本之间的先后顺序。只要网络响应完成，主线程就会被抢占去执行该代码。

因此，async 仅适用于彼此完全独立、不依赖 DOM 结构、也不被其他业务脚本依赖的代码，例如页面访问统计、广告监控或埋点上报：

<!-- 统计代码与首屏 DOM 无依赖，适合使用 async -->
<script async src="https://analytics.example.com/tracker.js"></script>

3. 原生 ES 模块（type="module"）

在现代前端工程中，<script type="module"> 默认具有类似 defer 的加载行为。它会自动异步下载并在文档解析完毕后执行。如果需要立即执行，也可以显式搭配 async 属性。

三、构建与网络优化流水线：减少物理传输开销

除了控制什么时候加载，另一个决定速度的关键因素是实际从网络下载的数据包大小。即使使用了异步加载，如果一个 JavaScript 文件高达数兆字节，移动端弱网环境下的下载耗时仍会严重拖垮页面的可交互时间（TTI）。

在实际项目上线前，建议遵循标准的代码精简与网络交付四步流水线：

1. 剔除无效代码（Tree-Shaking）

Tree-Shaking 依赖 ES6 静态模块语法（import / export）。在构建打包过程中，工具会静态分析模块引用关系，将没有被任何地方实际调用的函数和类直接从打包结果中移除。

2. 路由级代码分割（Code Splitting）

很多单页应用（SPA）习惯将全站逻辑打包进一个 bundle.js 中。这意味着用户访问首页时，不得不下载个人中心、后台设置、数据报表等所有未访问页面的脚本。

借助动态 import() 语法，现代打包工具（如 Vite、Webpack、Rollup）会自动将对应的模块拆分成独立的 Chunk 文件，仅在用户点击对应导航或进入对应路由时才动态向服务器请求：

// 路由懒加载示例：只有当用户进入 /dashboard 时才拉取仪表盘相关 JS
const Dashboard = () => import('./views/Dashboard.vue');
const UserProfile = () => import('./views/UserProfile.vue');

3. 服务端开启高效压缩（Brotli / Gzip）

JavaScript 属于高重复率的文本内容。在 Nginx 或 CDN 节点上开启压缩算法，通常可以将传输体积压缩到原文件的 25%~35%。相比老牌的 Gzip，现代的 Brotli（br） 算法对于文本文件的压缩比更高，平均能再缩小 15%~20% 的体积。

# Nginx 中开启 Brotli 与 Gzip 压缩示例
brotli on;
brotli_types application/javascript text/javascript;

gzip on;
gzip_types application/javascript text/javascript;
gzip_min_length 1024;

4. 静态资源长效缓存与 Hash 命名

最快的网络请求就是不发请求。在构建打包时，为每个编译出来的 JS 文件名注入基于文件内容的哈希值（如 app.8f3b91c2.js）。随后在 Web 服务器或 CDN 上对 .js 资源设置一年的强缓存响应头：

# 静态资源强缓存配置
location ~* \.(js|css)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

只要代码内容没有修改，用户第二次访问时就会直接从浏览器本地缓存读取，网络延迟直接降为 0；当代码更新后，哈希文件名变更，HTML 会立即引用新文件，完全不存在旧缓存覆盖不了的问题。

四、利用 Preload 与 Prefetch 精细调度资源优先级

浏览器内部存在一套精密的网络资源优先级调度系统。对于关键的 JavaScript 脚本，我们可以通过 <link> 标签主动指引浏览器的加载调度，使关键资源插队提前，次要资源靠后等待。

1. Preload：提前唤起关键资源

有些关键脚本是在外部 CSS 文件中被间接引用的，或者是由内联脚本动态挂载的。浏览器必须先解析完外层文件才能发现它的存在，从而错失了早期网络下载窗口。

在 HTML 的 <head> 区域声明 preload，可以强制浏览器以“高优先级”在渲染早期立即发起网络连接：

<!-- 强制优先下载当前页面必需的核心运行时脚本 -->
<link rel="preload" href="/assets/js/runtime.js" as="script">

必须注意：声明了 preload 的资源必须在几秒内被当前页面实际执行，否则控制台会抛出警告。切勿对整个工程的所有脚本都加上 preload，这会导致带宽发生严重踩踏。

2. Prefetch：利用空闲预备后续动作

prefetch 的优先级处于底层。浏览器会在当前页面完全渲染、网络带宽彻底空闲下来之后，悄悄把指定的脚本下载到浏览器的 HTTP 缓存中。当用户随后点击链接跳转到详情页或下一个业务步骤时，该页面所需的脚本早已在本地就绪，从而达到“瞬间渲染”的效果。

<!-- 预测用户极大概率会进入个人设置页，空闲时提前下载 -->
<link rel="prefetch" href="/assets/js/settings.chunk.js">

五、管控第三方脚本与主线程占用

在许多成熟业务中，拖慢页面加载的往往不是业务团队自己编写的代码，而是客服聊天插件、社交分享组件、广告 SDK 以及多个厂商的数据统计脚本。针对这类脚本，应当建立严格的接入与治理规范：

• 推迟到用户交互后加载：例如在线客服悬浮窗，首屏加载时仅显示一个静态的 CSS/SVG 按钮，只有当用户鼠标移入或点击图标时，再动态创建 <script> 载入真实的 SDK。
• 利用 Web Worker 将埋点移出主线程：借助开源方案（如 Partytown）或自定义 Worker，将第三方分析与计算任务放入后台线程运行，彻底释放主线程对用户输入的响应能力。
• 避免长任务（Long Tasks）：即使脚本已经下载完毕，如果单次执行耗时超过 50ms，主线程就会丢帧卡顿。可以使用 requestIdleCallback() 或 setTimeout() 将耗时密集的初始化任务拆分为微小切片。

六、优化成效与落地核查清单

对 JavaScript 加载速度的优化不是零散的修补，而是一个兼顾体积、时序、网络和执行的全链路工程。下表总结了各维度的优化策略、直接监控指标与推荐落地基准：

在日常开发与发布流程中，可以通过 Chrome DevTools 的 Performance 与 Coverage（代码覆盖率） 面板定期复查：如果发现首屏未使用的 JavaScript 代码占比超过 40%，或者存在标红的长任务（Long Task），即可按照上述四个步骤针对性优化，从而使网页始终保持稳定流畅的加载与交互体验。