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
不复杂但容易忽略
态插入 script 标签