应缓存dom查询结果和循环中不变的值以避免重复计算；如将document.getElementById结果赋给变量，for循环中提前获取arr.length等，减少重排与性能损耗。
避免在循环中重复计算或访问 DOM
每次访问 document.getElementById 或读取 element.offsetWidth 都可能触发重排（reflow），尤其在 for 循环里反复调用，性能损耗明显。浏览器需要不断重新计算布局，尤其在长列表渲染场景下会卡顿。
- 把 DOM 查询结果缓存为变量，如
const btn = document.getElementById('submit'); - 把数组长度、对象属性等不变值提至循环外，比如用
for (let i = 0, len = arr.Length; i 而非for (let i = 0; i - 批量修改样式时，优先操作
className或使用cssOM（如element.style.cssText），避免逐个设style.xxx
用 requestIdleCallback 或 setTimeout 控制非关键任务
主线程被长时间 js 占用会导致页面卡顿、输入响应延迟。像日志上报、非即时 ui 更新、数据预处理这类任务，不该抢占用户交互时机。
- 用
requestIdleCallback委托低优先级任务，在浏览器空闲时执行（注意兼容性：IE 不支持，需 fallback 到setTimeout(..., 0)） - 对可拆分的长任务（如处理 10 万条数据），用
setTimeout分片执行，每轮处理 1000 条并 yield 控制权 - 避免在
scroll或resize中直接运行重逻辑；必须用时，加防抖（debounce）或节流（throttle）
减少闭包与长生命周期引用造成的内存泄漏
闭包本身不慢，但若无意中维持了对大对象或 DOM 节点的引用，且该闭包被长期持有（如绑定在全局事件、定时器、未清理的回调中），GC 就无法回收，内存持续增长。
- 事件监听器用完后务必调用
removeEventListener；若用匿名函数绑定，改用具名函数或用AbortController（现代写法）管理 - 避免在定时器回调中引用外部大数组或
document.body；必要时手动置NULL - 使用 chrome DevTools 的
Memory面板录制堆快照，筛选Detached DOM tree可快速定位残留节点
按需加载 + 代码分割（现代打包场景）
首屏加载 2MB 的 bundle.js 意味着用户得等解析、编译、执行全部完成才能交互——哪怕只用到其中 5% 的功能。
立即学习“Java免费学习笔记（深入）”；
- 用
import()动态导入代替静态import，让 webpack/vite 自动做 code-splitting - 路由级拆分：react router 的
lazy + Suspense、vue Router 的defineAsyncComponent - 第三方库尽量用子模块，例如不用
lodash全量，改用import debounce from 'lodash/debounce'，避免打包进未使用的函数
真正卡顿往往不出现在“怎么写快”，而在于“没意识到某段代码正在阻塞主线程”。比如一个 console.log(obj) 看似无害，但如果 obj 是深层嵌套的响应式代理对象，Chrome 控制台展开时可能触发全链 getter，间接拖慢渲染。这类隐性开销，比算法复杂度更难察觉。