JavaScript 性能优化：17 个必备技巧
JavaScript 已成为现代 Web 开发的核心技术，它让网站变得交互性强、动态十足、引人入胜。然而，未经优化的 JavaScript 会严重影响页面加载速度，这也是为什么 JavaScript 性能优化如此关键。 本文将阐述 JavaScript 对网站性能的重要性、手动优化 JavaScript 速度的技巧，以及如何使用 WordPress 插件优化 JavaScript 处理。文章最后还附有一个案例研究，展示改善 JavaScript 性能对网站速度评分的直接影响。
为什么 JavaScript 性能至关重要
JavaScript 在网站加载流程和用户体验的每个阶段都发挥着作用。它主要在以下两个环节影响网站性能：
- 阻塞页面渲染：JavaScript 默认会阻塞渲染。未优化的文件会导致浏览器无法下载或处理其他更重要的资源，整体加载速度变慢。
- 影响网站响应性：沉重的脚本和长时间运行的任务会导致网站无法及时响应用户操作，造成卡顿的用户体验。
因此，JavaScript 性能优化与否直接影响重要的性能指标，包括 Core Web Vitals 如首次内容绘制（FCP）、总阻塞时间（TBT）、最大内容绘制（LCP）以及交互到下一绘制时间（INP）。由于这些指标都是排名因素，JavaScript 性能也直接影响网站的 SEO 表现。
浏览器如何处理 JavaScript
了解 JavaScript 的加载流程，有助于更好地理解性能优化工作。整个过程分为三个阶段：
- 下载：浏览器首先需要下载包含 JavaScript 的文件，耗时取决于文件大小。
- 解析：下载完成后，浏览器会遍历代码、检查语法错误，为后续阶段做准备。
- 执行：最后，JavaScript 在浏览器主线程中执行，与页面 DOM 交互或处理用户事件。
下文将按顺序介绍针对每个阶段的优化技术。
如何测量 JavaScript 性能
提升 JavaScript 性能的第一步是了解现状。除了前面提到的 TBT、INP 和 FCP，还需要关注以下指标：
- 长任务（浏览器任务耗时超过 50 毫秒）
- 主线程脚本执行时间
- JavaScript 执行时间
- 内存使用情况
最佳测量工具是浏览器开发者工具。在 Chrome 中，性能标签页可以记录和分析运行时性能、主线程活动、长任务（带红色三角标记）、脚本时间、渲染等信息。 你也可以查看 Core Web Vitals 和其他性能洞察，类似于 PageSpeed Insights。内存面板有助于识别内存泄漏和过度内存占用。 此外，JavaScript 内置了 Performance API，提供 performance.now()、console.time() 和 console.timeEnd() 等函数，可用于测量性能。
优化 JavaScript 下载
找到问题所在后，接下来从下载阶段开始采取措施优化。
1. 减少页面上的 JavaScript
最快、最不阻塞的 JavaScript 就是不用它。代码越少，浏览器需要下载、解析和执行的内容就越少。 实现这一目标的几点建议：
- 不要盲目使用框架：React、Vue、Angular 等 JavaScript 框架体积庞大。如果网站只需少量 JavaScript，完全可以用原生 JavaScript 几行代码实现，不必加载整个框架库。
- 移除未使用的代码：开发阶段创建的代码并非所有都适用于生产环境。花时间找出并删除网站上未使用的 JavaScript 代码（称为“树摇优化”）。Webpack 或 Rollup 等打包工具可以自动完成这项工作。
- 利用浏览器内置功能：现代浏览器可以通过原生功能和 CSS 实现许多过去需要 JavaScript 才能做到的效果，例如平滑滚动、动画和表单验证。
- 简化代码：思考你正在考虑的实现是必要的还是只是锦上添花？如果是后者，考虑用更简单、代码量更少的方案来替代。
2. 精简和压缩文件
精简（Minification）会移除那些让文件更易读但对执行不必要的字符，比如缩进、注释和换行。 删除这些内容可以缩小 JavaScript 文件体积，加快下载速度。Google Closure 和 JSMin 等工具可用于文件精简。 压缩是另一种减小文件体积的方法，类似于 ZIP 文件的工作原理。在服务器上启用文本压缩是提升性能的有效手段。如果有条件，优先使用 Brotli 而非 Gzip。
3. 使用 CDN 加载 JavaScript
内容分发网络（CDN）通过在全球各地放置网站文件的副本，让访问者能够更快地获取资源。 这减少了因距离造成的下载延迟。许多 CDN 默认会自动精简和压缩文件。
4. 启用缓存
缓存将重要或频繁请求的数据存储在可快速访问的位置。有多种缓存类型与 JavaScript 性能优化相关。 首先是浏览器缓存。它将 JavaScript 等重要资源存储在访问者的本地硬盘上，这样浏览器在重复访问时可以更快地获取，而无需再次从服务器下载。需要在网站上设置缓存头（如 Cache-Control 和 ETag 头）来启用浏览器缓存。
加速 JavaScript 解析
JavaScript 下载完成后，以下方法可以帮助浏览器更快地解析和执行代码。
5. 提供现代 JavaScript 代码
很多网站会同时提供传统浏览器兼容的备用代码，这不仅增加了代码量，还增加了转译工作。建议只提供现代 JavaScript（可能需要重构旧代码来实现）。 如果仍需支持老旧浏览器，可以为不同浏览器提供不同文件，称为“差异化服务”，通过 module/nomodule 模式实现：
<script type="module" src=".../js/main.js"></script>
<script nomodule src=".../js/main-legacy.js"></script>现代浏览器只会加载带 "module" 标签的脚本，老旧浏览器则会忽略它，转而加载 "nomodule" 版本。
6. 采用代码分割
代码分割指将 JavaScript 拆分为多个小块，按需加载，而非一次性加载整个庞大的代码包。这样浏览器只需处理当前页面实际需要的代码。 实现方式有两种：文件级别的分割（将代码拆分为更小的文件，仅在需要的页面加载），或使用动态导入（创建 JavaScript 模块并通过 import() 动态加载）。 Webpack、Rollup、React、Vue、Angular 等工具和框架都原生支持代码分割。
7. 延迟非关键代码
将次要 JavaScript 延迟加载，可以让浏览器优先处理更重要的文件。可以通过在 script 标签添加 async 和 defer 属性来实现：
<script async src="analytics.js"></script>
<script defer src="analytics.js"></script>两者都能防止 JavaScript 文件阻塞渲染，区别在于执行时机：
- async：脚本下载完成后立即执行，期间会暂停其他浏览器工作，且忽略页面中脚本的顺序，适合需要尽快加载的资源
- defer：则在 HTML 解析完成后才执行，且按页面顺序依次执行，适合非关键资源
也可以直接将 JavaScript 文件放在 HTML 文档底部加载。WordPress 的 wpenqueuescript() 函数提供了参数，可以自动将脚本移动到页脚。
加快 JavaScript 执行
最后一个阶段是加速 JavaScript 的最终加载。
8. 减少 DOM 操作
访问和更新 DOM 代价高昂，可能导致页面响应变慢、CPU 占用升高。除了尽量减少 DOM 修改次数，还可以通过批量操作来提升性能。例如需要向页面添加大段 HTML 时，先通过 DocumentFragment 构建完整片段，再一次性添加到 DOM 中。 这样做还能避免“布局抖动”——即 JavaScript 在读取布局属性和写入 DOM 更新之间反复切换，迫使浏览器反复重新计算样式和布局。
9. 简化 HTML 结构
DOM 树越简单、越小，JavaScript 访问和操作它的速度就越快。与前面的建议一致，保留必要内容，删除无用内容。更小的 DOM 也能全面提升页面性能。 其他优化 DOM 性能的方法包括：使用简单的 CSS 选择器（浏览器解析更快），以及需要多次更新样式时优先使用 class 而非行内样式。
10. 使用 classList 操作类名
优先使用 classList API 添加或移除 CSS 类，避免直接修改 className 字符串。这样代码更简洁，也更容易维护。 如果需要多次访问同一个 DOM 元素，建议将其缓存到变量中，避免重复查询。
（接前文：JavaScript 动画优化建议见下文）
11. 拆分长任务
如前所述，长任务会阻塞浏览器主线程超过 50 毫秒，导致页面加载过程中的所有其他工作暂停，包括响应用户交互。 为避免这一问题，可使用 setTimeout() 和 Scheduler.yield() 将长任务拆分为多个小块。这些方法会让出主线程执行权，让浏览器有机会及时响应页面交互。 此外，requestIdleCallback 可用于将低优先级任务安排在浏览器空闲时段执行。
12. 将计算移出主线程
提升 JavaScript 性能的另一个思路是将代码放到主线程之外运行，主要有三种方式：
异步 JavaScript
异步 JavaScript 可以在后台运行，同时让浏览器处理更重要的代码。一旦结果就绪，仍会在主线程上执行，所以这种方式主要帮助避免等待外部操作时的阻塞。现代 JavaScript 使用 Promise 和 async/await 语法实现异步操作。
Web Workers
Web Workers 允许在完全独立的后台线程中运行 JavaScript，并将结果发送回主线程。Workers 有一些限制，最主要的是无法访问 DOM，但它们非常适合 CPU 密集型任务，例如：
- 数据处理
- 大规模计算
- 解析大型数据集
WebGPU
WebGPU 是浏览器提供的新 API，允许 Web 应用利用系统 GPU（图形处理单元）进行高性能图形渲染和并行计算。它主要面向高级图形渲染场景，比 Web Workers 实现更复杂。
13. 减少循环中的计算量
循环可能带来较高的计算开销，尤其是执行复杂计算或 DOM 操作时。因此应当尽量减少循环次数，或降低每次迭代的工作量。 如果循环无法避免，可以从以下角度优化：
- 使用
break或continue语句避免完整循环或在循环内部重复计算 - 缓存重复使用的值，而不是每次迭代都重新计算
- 将不变的计算移到循环外部，节省执行时间
- 使用查找对象（Lookup Object）或
Map替代在数组中反复搜索 - 选择合适的数据结构：
Set适合存储唯一值，Map适合按键快速查找
14. 优化 JavaScript 动画
动画可以在页面加载时模拟进度，提升感知性能。但同时也会消耗计算资源，可能反而降低实际速度。 优化 JavaScript 动画性能的要点：
- 减少动画数量：动画越少，浏览器工作量越小
- 优先使用 CSS 动画：CSS 动画比通过 JavaScript 操作内联样式更高效
- 采用现代 JavaScript 技术：保留在页面上的 JavaScript 动画应使用 requestAnimationFrame()，而非
setTimeout()或setInterval()
15. 优化事件性能
事件处理可能带来性能开销，尤其是频繁触发的事件。要保持网站快速响应：
- 利用事件委托：将单个事件监听器绑定到父元素，而非为每个子元素单独绑定。由于事件会冒泡，一个监听器可以管理多个元素的事件，减少开销
- 移除不必要的监听器：不再使用的监听器应及时使用 removeEventListener() 移除，避免内存泄漏和不必要的函数调用
- 对高频事件进行节流和防抖：节流限制函数在指定时间间隔内的执行次数，防抖则延迟执行直到事件停止触发。对 scroll、resize、input 等高频事件尤为适用
- 保持事件处理函数轻量：像
mousemove、scroll、resize这类事件每秒可能触发数百次，要确保处理函数快速执行
16. 正确管理内存
内存泄漏发生在 JavaScript 持有不再需要的数据时，会导致性能随时间逐渐下降。预防内存泄漏的方法：
- 避免不必要的引用：被引用的对象无法被浏览器垃圾回收器清除，要确保变量、缓存和全局对象的引用在不需要时及时释放
- 移除未使用的事件监听器：绑定到 DOM 元素上的事件监听器可能阻止这些元素被垃圾回收
- 注意闭包：闭包可能意外保留对变量或大型对象的引用，导致它们在内存中停留时间超出预期
- 适当使用 WeakMap 和 WeakSet：这些数据结构持有对象的弱引用，当对象没有其他引用时仍可被垃圾回收，有助于降低内存泄漏风险
总之，避免长期持有引用，在资源不再需要时及时清理，让垃圾回收器正常工作。
17. 使用 WordPress 插件优化 JavaScript 性能
除了手动优化，还可以使用性能插件（如 WP Rocket）来简化 JavaScript 性能优化工作。这类插件可以一键实现上述多项改进，进一步提升网站速度。 激活插件后，它会自动配置多项优化设置，另有一些功能可手动开启。
轻松优化 JavaScript 性能
WP Rocket 提供了简洁易用的操作界面，只需勾选几个选项即可完成配置，即使是新手也能快速上手。
核心优化功能
除了基础缓存功能外，WP Rocket 还提供多项页面资源精简功能：
- 移除未使用的 CSS：自动清理样式表中冗余代码
- 延迟 JavaScript 执行：让非关键脚本延后加载
- 图片和 iframe 懒加载：按需加载媒体资源
- 字体预加载：确保字体文件优先加载
Rocket Insights 是 WP Rocket 的内置性能监控工具，集成 GTmetrix 技术，可直接在 WordPress 后台查看详细性能数据，快速发现并解决速度问题。
实战案例：三分钟优化演示
我们搭建了一个测试站点，使用默认主题、常见插件和模拟内容，并在首页添加了图片轮播和嵌入的 YouTube 视频等 JavaScript 密集型功能。 初始 PageSpeed Insights 评分并不理想。安装 WP Rocket 并启用上述功能后，性能测试结果显著提升。整个配置过程仅用时三分钟。
常见问题
什么是 JavaScript 性能优化？ 指提升 JavaScript 代码运行效率的过程，包括压缩文件体积、最小化阻塞任务、确保脚本快速执行，最终目标是提升用户体验，让网站更快、响应更灵敏、资源消耗更低。 JavaScript 为何会拖慢网站？ JavaScript 会阻塞浏览器主线程，导致页面渲染和用户交互延迟。 如何衡量 JavaScript 性能？ 推荐使用 Chrome DevTools、Lighthouse（内置于 DevTools 或 PageSpeed Insights），以及 performance.now() 或 console.time() 等性能测量函数。 有哪些推荐的性能基准指标？
- 总阻塞时间（TBT）低于 200ms
- 交互到下一帧绘制（INP）低于 200ms
- 首次内容绘制（FCP）低于 1.8 秒
- 关键函数执行时间控制在 50ms 以内
这些指标对应 Google 的 Core Web Vitals 标准。 优化 JavaScript 有哪些常用工具？
- Chrome DevTools（性能/内存面板）用于调试
- Lighthouse 用于审计
- Webpack/Rollup 用于打包和代码分割
- WP Rocket 用于自动化缓存、懒加载和脚本延迟
立即开始优化
JavaScript 是现代交互式网站的核心，但优化不当会拖慢速度、影响用户体验。上述技术能帮助您减少瓶颈、精简代码、合理分配脚本优先级，让主线程保持响应，实现更流畅的访问体验。 如果想要更简便的解决方案，WP Rocket 可通过简单点击几下鼠标就建立坚实的性能基础。支持 14 天免费试用，无风险体验。
