javascript性能优化核心是提升首屏渲染与tti，通过async/defer减少阻塞、代码拆分按需加载、压缩传输减体积、避免长任务卡主线程。
JavaScript 网页加载性能优化，核心是让关键资源更快到达、更少阻塞、按需执行。重点不在“写得更炫”，而在“加载得更聪明”——尤其关注首屏渲染速度与可交互时间（TTI）。
用对 async 和 defer 加载脚本
传统 <script src="xxx.js"></script> 会同步阻塞 HTML 解析，造成白屏。两个 HTML5 属性能立刻改善：
- defer：脚本并行下载，但等到 DOM 解析完成后再按顺序执行。适合有依赖关系的业务脚本（如 app.js 依赖 utils.js）
- async：脚本一下载完就立即执行，不保证顺序。适合完全独立、无依赖的脚本（如统计代码、广告 SDK）
- 不要在 defer/async 脚本里直接操作 DOM；可用
DOMContentLoaded或document.readyState === 'interactive'判断时机
拆分代码，只加载当前需要的
把整个 bundle.js 一次性加载，既浪费带宽又拖慢首屏。现代构建工具（Webpack/Vite/Rollup）支持动态导入：
- 路由级拆分：React Router 中用
lazy(() => import('./PageA'))，Vue Router 中用defineAsyncComponent - 功能级拆分：点击按钮才加载图表库，
import('chart.js').then(({ Chart }) => new Chart(...)) - 配合
prefetch或preload可预加载后续可能用到的模块（如用户悬停导航项时预取）
压缩 + 传输优化，减小 JS 文件体积
体积越小，下载越快。这不是“锦上添花”，而是基础门槛：
- 启用构建时 minify（缩小）：移除空格、注释、缩短变量名，通常减少 30–50% 体积
- 开启服务器端 Gzip 或更优的 Brotli 压缩（Brotli 比 Gzip 平均再省 15%）
- 利用 Tree Shaking：基于 ES Module 静态分析，自动剔除未引用的导出（如只用了
lodash/debounce，就不会打包整个 lodash） - 检查第三方库是否提供轻量版（如 moment → dayjs / luxon，lodash → lodash-es）
避免主线程被 JS 长任务卡住
哪怕 JS 文件加载很快，如果执行时干了太多事（比如循环 10 万次、大量 DOM 插入），也会让页面卡顿、无法响应点击或滚动：
- 批量 DOM 操作：用
DocumentFragment或拼接字符串后一次性赋值innerHTML，避免循环中反复触发回流 - 大计算任务可拆成微任务（
queueMicrotask）或使用setTimeout分片执行，给浏览器喘息机会 - 监听器别堆满页面：用 事件委托 统一处理列表项点击，而不是每个 item 单独绑定
- 及时清理：移除不用的定时器、事件监听器、全局引用，防止内存泄漏拖慢后续运行
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
