性能优化
前端性能是度量指标 + 瓶颈场景的组合：首屏、交互响应、长任务、内存与电量等。此处列出与 JavaScript、DOM与BOM、事件机制 强相关的常见手段，而非完整 Web Vitals 清单。
减少主线程长任务
- 拆分计算：
requestIdleCallback（有空再做）、scheduler.postTask（若可用）、或分包到 Web Worker。 async/await不解冻 CPU：只是把任务延后到其他 tick，重计算仍需移出或切片。
见 异步编程。
DOM 与渲染
- 批量读写：先读后写，避免交替触发布局（layout thrashing）。
- 离线更新：
DocumentFragment、克隆节点、display: none容器内批量改完再挂上树。 requestAnimationFrame：与帧同步的视觉更新（滚动动画、进度条等）。
事件与滚动
- 节流（throttle）：固定间隔触发，适合
scroll、resize。 - 防抖（debounce）：停止触发后延迟执行，适合输入联想、
resize结束再算布局。 passive: true：监听touchstart/wheel等时声明不会preventDefault，部分浏览器可优化滚动（若仍会阻止默认行为则不要设 passive）。
实现常依赖 作用域与闭包 保存计时器句柄。
网络与资源
- 按需加载：动态 模块化
import()、路由级 code splitting。 - 缓存策略：HTTP 缓存、Service Worker（若使用）、避免多余重复请求。
fetch并发控制：限制同时 in-flight 数量，避免拥塞。
内存
- 移除监听器、清理定时器，避免 作用域与闭包 持有已脱 DOM 的引用。
- 弱引用集合：
WeakMap/WeakSet适合与对象生命周期绑定的元数据（不可枚举键、垃圾回收友好）。见 数据类型、ES6+。
测量
- Performance API、
performance.mark/measure。 - Chrome DevTools：Performance、Memory、Coverage。
- 以数据验证优化，避免过早优化。