页面卡顿主因是主线程被频繁DOM操作、重排重绘压垮；应批量操作DOM（用DocumentFragment或innerHTML）、虚拟列表、避免强制同步布局、动画用transform/opacity、长任务分片（requestIdleCallback）或Web Worker。
页面元素过多导致卡顿，核心是主线程被大量 DOM 操作、布局计算和渲染任务压垮。JavaScript 本身不直接“画”元素，但它频繁创建、插入、读取、修改节点时，会不断触发重排（reflow）和重绘（repaint），尤其在循环中逐个操作，性能断崖式下降。解决的关键不是少写 JS，而是让 JS 更聪明地“交出控制权”或“减少浏览器负担”。
批量操作 DOM，避免逐个插入
循环里反复调用 appendChild 或拼接 innerHTML，等于让浏览器每轮都重新计算样式、布局、绘制——1000 次操作可能引发 1000 次重排。必须合并成一次。
- 用
DocumentFragment在内存中组装好所有节点，最后一次性挂载：
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);
- 或者字符串拼接后统一赋值（适合纯静态内容）：
for (let i = 0; i < 1000; i++) {
html += `
}
document.getElementById('list').innerHTML = html;
只渲染可视区域，用虚拟列表替代全量渲染
列表有上万条数据？全渲染出来不仅卡，还吃内存。用户同一时间只能看到十几二十行，其余的完全没必要存在 DOM 树里。
- 原理：监听滚动位置，动态计算当前可视区域的起始索引，只渲染这部分 + 少量缓冲项
- Vue 项目推荐
vue-virtual-scroller，React 推荐react-window - 自己实现要点：用固定高度容器 +
transform: translateY()定位，避免修改top触发重排
避免读写交替，减少强制同步布局
像在循环里一边读 offsetHeight，一边改 style.color，浏览器不得不立刻执行重排来返回准确值，这种“强制同步布局”（Forced Synchronous Layout）是隐藏性能杀手。
立即学习“Java免费学习笔记（深入）”；
- 把所有读取操作集中放在前面（如批量读
clientWidth、scrollTop） - 所有写入操作集中放在后面（如批量设
style.transform、className） - 动画一律用
transform和opacity，它们走合成层，不触发布局计算
拆分长任务，不让主线程长时间冻结
哪怕只是遍历 5000 条数据做简单处理，如果耗时超过 50ms，用户就会感知到卡顿（掉帧）。不能等它跑完，要主动“让出”主线程。
- 用
requestIdleCallback在浏览器空闲时分片执行：
let i = 0;
function next() {
const end = Math.min(i + chunkSize, arr.length);
for (; i < end; i++) { /* 处理 arr[i] */ }
if (i < arr.length) requestIdleCallback(next);
}
next();
}
- 更彻底的方案：把纯计算逻辑（如排序、过滤、解析）移到
Web Worker，主线程只负责 UI 更新
