应避免循环中频繁读写DOM、未清理的Promise拒绝及DOM读写混合；需缓存查询结果、批量操作、用requestAnimationFrame、WeakMap、校验正则、分页解析JSON等优化性能。
避免在循环中重复计算或访问 DOM
频繁读写 document.getElementById、element.style 或 offsetHeight 等会触发强制同步布局（forced synchronous layout），尤其在 for 或 while 循环中，性能损耗呈指数级上升。
- 把 DOM 查询提到循环外：
const container = document.getElementById('list');而不是每次迭代都调用document.getElementById('list') - 批量读取后再批量写入：先缓存
clientWidth、scrollTop等值，统一计算后再设置style.transform，而非交替读写 - 用
requestAnimationFrame替代setTimeout做动画更新，避免布局抖动
let items = document.querySelectorAll('.item');
// ❌ 错误：每次遍历都触发重排
for (let i = 0; i < items.length; i++) {
items[i].style.left = i * 10 + 'px'; // 写入 style 触发重排
console.log(items[i].offsetTop); // 立即读取 → 强制同步布局
}
<p>// ✅ 正确：分离读与写
const tops = [];
for (let i = 0; i < items.length; i++) {
tops.push(items[i].offsetTop); // 全部读完
}
for (let i = 0; i < items.length; i++) {
items[i].style.transform = <code>translateX(${i * 10}px)</code>; // 批量写入，且用 transform 避免重排
}慎用 console.log 和未捕获的 Promise 拒绝
console.log 在生产环境大量调用会阻塞主线程，尤其打印大型对象时（V8 会深度序列化）；未处理的 Promise 拒绝不仅掩盖逻辑缺陷，还会在 Chrome/Firefox 中持续触发 DevTools 性能警告，间接拖慢调试器响应。
- 构建时用
eslint-plugin-no-console禁止非error/warn级日志 - 用
try/catch包裹await，或始终为Promise添加.catch()，哪怕只写.catch(() => {}) - 开发阶段可保留日志，但上线前通过构建插件（如
babel-plugin-transform-remove-console）自动移除console.*
减少闭包和长生命周期对象的内存驻留
闭包会隐式持有外层作用域引用，若该作用域包含大数组、DOM 节点或定时器，就容易造成内存泄漏。典型场景是事件监听器 + 闭包 + 未解绑。
- 给事件处理器命名函数而非箭头函数，便于后续
removeEventListener - 使用
WeakMap存储私有数据，避免对 DOM 节点强引用 - 定时器（
setInterval）必须配对clearInterval，尤其在组件卸载/页面跳转前
const cache = new WeakMap();
<p>function attachTooltip(element, text) {
// ✅ WeakMap 不阻止 element 被 GC
cache.set(element, { text, shown: false });</p><p>const handler = () => {
if (cache.get(element).shown) return;
element.title = text;
};</p><p>element.addEventListener('mouseenter', handler);
// 记得在合适时机：
// element.removeEventListener('mouseenter', handler);
}警惕正则表达式回溯爆炸和 JSON 解析瓶颈
复杂正则（尤其含嵌套量词如 /(a+)+b/）在匹配失败时可能引发指数级回溯，冻结主线程；而 JSON.parse 解析大字符串（>1MB）会显著卡顿，且无法中断。
立即学习“Java免费学习笔记（深入）”；
- 用
^和$锚定边界，避免贪婪匹配失控 - 对用户输入的正则做白名单校验或超时控制（如用
Web Worker隔离执行） - 大 JSON 数据优先用
stream-json或后端分页，前端避免直接JSON.parse(bigString) - 考虑
structuredClone替代JSON.parse(JSON.stringify(obj))深拷贝，后者既慢又丢函数、undefined、Symbol
实际项目里最常被忽略的是「DOM 读写混合」和「未清理的 Promise 拒绝」——它们不会报错，但会让页面在低端设备上明显变卡，且 DevTools 的 Performance 面板里很难一眼定位。
