JavaScript 性能优化实战（易懂版）

JavaScript 性能优化实战（易懂版）

适用对象：前端与全栈工程师。原则：先测量、再优化、可回归。

目录

• TL;DR 快速清单
• 1. 度量与预算
• 2. 网络与缓存优化
• 3. 构建与代码分割
• 4. 运行时与调度
• 5. DOM 渲染优化
• 6. 内存与泄漏
• 7. 并行与重活卸载
• 8. Node.js 端优化
• 9. 诊断剧本
• 附录：工具与参考

---

TL;DR 快速清单

• 指标：LCP < 2.5s，INP < 200ms，CLS < 0.1
• 传输：HTTP/2/3 + CDN + Brotli；预连接/预加载关键资源
• 缓存：静态资源指纹 + immutable；HTML 短缓存 + ETag
• 包体：首屏 JS ≤ 150–200KB gzip；路由级代码分割；移除大依赖
• 渲染：transform/opacity 动画；列表虚拟化；被动事件 + 节流/防抖
• 调度：rAF/Idle/切片；避免长任务阻塞主线程
• 内存：清理监听/计时器；WeakMap；LRU 缓存
• 并行：Web Worker + Transferable；OffscreenCanvas
• 回归：web-vitals RUM + Lighthouse CI + Bundle 预算

---

1. 度量与预算

核心指标与采集（RUM）

// 使用 web-vitals/attribution 采集 LCP/INP/CLS（含归因）
import { onLCP, onINP, onCLS } from 'web-vitals/attribution';const send = (m) => {navigator.sendBeacon('/vitals', JSON.stringify({name: m.name, value: m.value, id: m.id,path: location.pathname, ts: Date.now(),attribution: m.attribution}));
};onLCP(send, { reportAllChanges: true });
onINP(send, { reportAllChanges: true });
onCLS(send, { reportAllChanges: true });

性能预算建议

• 首屏 JS（可执行）≤ 150–200KB gzip
• LCP 资源（图/字体）≤ 100KB；关键请求数 ≤ 6
• CI 设置：Lighthouse 得分门槛 + bundle 体积上限

---

2. 网络与缓存优化

HTML 预连接/预加载与图片懒加载

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" as="style" href="/styles.css">
<link rel="preload" as="script" href="/entry.js" crossorigin>
<img src="hero.avif" srcset="hero@2x.avif 2x" alt="hero" loading="lazy" decoding="async">

按用户意图预取

// 悬停时预取下一步页面资源
const prefetch = (href, as) => {const l = document.createElement('link');l.rel = 'prefetch'; l.href = href; if (as) l.as = as;document.head.appendChild(l);
};
document.addEventListener('mouseover', e => {const more = e.target.closest('#more');if (more) prefetch('/page/product.js', 'script');
}, { passive: true });

Service Worker：静态 Cache First + API Stale-While-Revalidate

// sw.js
const STATIC = 'static-v1';
self.addEventListener('install', e => {e.waitUntil(caches.open(STATIC).then(c => c.addAll(['/', '/index.html', '/styles.css', '/entry.js'])));self.skipWaiting();
});
self.addEventListener('activate', e => {e.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(k => k !== STATIC).map(k => caches.delete(k)))).then(() => self.clients.claim()));
});
self.addEventListener('fetch', e => {const req = e.request; if (req.method