JavaScript性能优化技巧有哪些？

JavaScript性能优化的核心在于减轻主线程压力、降低资源加载负担并提升执行效率，本文系统梳理了三大实用方向：以Terser等工具驱动的智能代码压缩（涵盖语法精简、Tree Shaking、图片字体优化），按需触发的多层次懒加载（路由、组件、图片、第三方SDK），以及易被忽视却见效迅速的细节技巧（拆分长任务、避免布局抖动、缓存计算结果、善用现代API），强调所有策略都应立足真实场景，拒绝过度优化，让前端性能提升既扎实又可持续。

JavaScript性能优化核心是减少主线程负担、降低资源加载压力、提升执行效率。代码压缩和懒加载是其中两个关键方向，但需结合实际场景选择合适策略。

代码压缩：减小体积，加快传输

压缩不是简单删空格，而是通过工具在保持功能前提下精简语法结构和移除无用代码。

• 使用构建工具压缩：Webpack、Vite、Rollup 默认集成 Terser 插件，启用 production 模式即可自动压缩（移除 console、注释、简化变量名、合并常量等）
• 启用 Tree Shaking：确保使用 ES Module 语法（import/export），避免 CommonJS；关闭 sideEffects: false 配置可剔除未引用的导出模块
• 压缩图片与字体资源：JS 中动态加载的图片建议用 WebP/AVIF 格式；字体文件用 font-display: swap + 字体子集化（如只含中文常用字）
• 避免手动压缩逻辑：不要自己写正则删空格或缩写变量名，容易出错且不可维护；交由成熟工具处理

懒加载：按需加载，延迟执行

懒加载本质是把非首屏、非关键路径的代码或资源推迟到真正需要时才加载，减少初始 JS 包体积和解析耗时。

• 路由级懒加载（SPA 常用）：Vue Router 中用 defineAsyncComponent 或 import()；React Router v6.4+ 推荐配合 React.lazy + Suspense
• 组件级懒加载：对模态框、图表、富文本编辑器等重型组件，用 import() 动态导入，在用户触发操作（如点击按钮）后再加载
• 图片懒加载：用 loading="lazy" 原生属性（兼容性好）；复杂场景可用 IntersectionObserver 监听进入视口后设置 src
• 第三方 SDK 懒加载：如统计脚本、客服组件，不放在 HTML head 中，而是在用户行为（如停留 5 秒、滚动到底部）后动态插入 script 标签

其他实用优化点

压缩和懒加载之外，几个易忽略但见效快的操作：

• 减少长任务：用 requestIdleCallback 或拆分大循环（如每 1000 条数据处理一次，加 setTimeout 微任务让出主线程）
• 避免强制同步布局（Layout Thrashing）：读取 offsetTop 后立刻修改 className，再读 clientWidth —— 这会触发多次重排；应先批量读、再批量写
• 缓存计算结果：对纯函数或高频调用方法（如格式化日期、深比较对象），用 Memoization（如 lodash.memoize）或 WeakMap 缓存
• 用现代 API 替代旧写法：Array.from + map 改为 for...of；频繁字符串拼接改用模板字面量或 Array.join

到这里，我们也就讲完了《JavaScript性能优化技巧有哪些？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！