先说个直观感受：用谷歌浏览器打开一个仅含100多个DOM节点的列表页，结果滚动卡顿、交互响应迟缓。

这其实不少开发者都遇到过。表面上是页面“重”了，但根本问题出在浏览器渲染机制上。

根本原因很简单：浏览器在反复触发重排（reflow）和重绘（repaint），主线程被大量布局计算阻塞。

换句话说，你的每一个滚动、每一次数据更新，都让浏览器从头到尾重新算一遍页面结构——能不卡吗？

那么，怎么定位这些瓶颈？又该如何系统性地解决？往下看。

定位性能瓶颈

工具就在手边，别怕用。打开开发者工具的Performance面板，点一下录制按钮，刷新页面并滚动到底部，然后停止录制。

重点关注Layout和Paint区域——这两块一旦出现长条状的耗时块，且单次Layout耗时超过3ms，那就是严重瓶颈，没得跑。

还有个更直接的排查手段：在Elements面板中选中列表容器，右键选择“Break on”→“attribute modifications”，再触发一次数据更新。

如果立刻断点暂停，说明你正在频繁修改class或style，导致浏览器强制同步布局——这也是罪魁祸首之一。

用虚拟滚动替代全量渲染

本质上，你不需要让100个节点全部存在于DOM中。毕竟用户视线能覆盖的，也就屏幕内那一小片。

这就好比看一卷长长的卷轴——你得让它只展开当前需要看的那一段。

方法一：原生IntersectionObserver + 定高容器（推荐）

• 第一步：给列表外层容器设置固定高度和overflow-y: auto，再加个position: relative；
• 第二步：只渲染视口内以及上下各2个item的DOM节点，其余区域用空白占位div撑开，模拟原始高度；
• 第三步：监听滚动事件，用getBoundingClientRect()判断每个item是否真的进到可视区，动态切换真实内容与占位符。

注意，这里有个坑：所有getBoundingClientRect()的调用必须聚拢在滚动回调的末尾，否则会触发同步布局，反而帮倒忙。

方法二：引入 lightweight-virtual-scroll 库

如果不想手写，直接用库也行。

• 执行npm install lightweight-virtual-scroll；
• 在组件中import { VirtualList } from 'lightweight-virtual-scroll'；
• 将原来的ul替换成。

这个库默认禁用了resize observer，所以窗口缩放时不会反复触发重排——算是个贴心的小设计。

批量DOM操作合并为单次提交

很多人写动态列表的时候，喜欢一上来就在循环里直接appendChild，一次1000次，浏览器就得跟着算1000次布局。这显然不是办法。

错误写法：for (let i = 0; i < 1000; i++) { list.appendChild(createItem(i)); } —— 主动触发1000次重排。

正确写法：创建DocumentFragment，在内存里把节点全部拼好，最后一次性挂到DOM树上：

const frag = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) { frag.appendChild(createItem(i)); }
list.appendChild(frag);

操作简单，但必须警惕一个问题：frag创建后不能被重复append，否则会把原内容清空——基本就是“一次填完，之后丢掉”的操作逻辑。

禁用非必要CSS触发重排的属性

样式表中某些CSS属性，是重排的“引爆器”。你需要把它们识别出来并清理掉。

• 首先，移除width、height、top、left、margin、padding的百分比或auto值——这些属性一旦变化，浏览器就得从头算一遍布局，太奢侈了。
• 其次，能用transform: translateY()的，就绝对别用top。前者只触发合成，不会引起布局重排。
• 最后，考虑给真正会动起来的元素加上will-change: transform，提前分配合成层——但要节制，滥用会导致图层爆炸，反而拖累性能。

《夸克》非常好用的免费AI浏览器

下载APP查看