• {% raw %}{% endraw %}症状描述{% raw %}{% endraw %}：
  • • 滚动加载下一页时页面完全卡死；
  • • 使用者滚动和操作响应延迟超过 2  秒；
  • • 即使每页仅20  条记录，也会出现一样卡顿；
  • • 低端设备表现尤为糟糕。
  {% raw %}

问题复现与定位 js // ❌ 网络请求慢？按理说，// 检查： 网络请求平均耗时约300毫秒。并非瓶颈 // ❌ 数据量大？// 检查： 每页仅20条，即便累计加载10页也只有200条记录 // ❌ 样式复杂？// 检查： 列表项样式极简，无CSS动画或特效干扰 打开Chrome DevTools 的 **Performance** 面板，对一次“滑到底部并自动加载”行为进行录制。可观察到以下关键异常：

长任务

布局抖动

 /* 强制同步布局 */
const height=el.offsetHeight;// 此处触发回流/重排
el.style.height=`${height}px`;})，

内存泄漏

主要瓶颈概括

可视化对比

普通滚动 加载新页 ───────▶▶▶▶▶▶▶▶───────► 卡顿23⁢40 ms!

调整方法

虚拟滚动 ★ 主要思路

只渲染视口可见区域，其余位置用占位元素保持整体高度。

js class VirtualList{ constructor{ this.container=container;this.itemHeight=itemHeight;this.bufferSize=bufferSize;

 this.items=;this.scrollTop=0;this._init，}
_init{
this._renderSpacer;说起来，// 占位元素保持整体高度
this._renderVisible;// 首屏渲染
this._bindScroll;// 使用 requestAnimationFrame 限流
}
_renderSpacer{
const total=this.items.length*this.itemHeight;说起来，this.spacer=document.createElement;this.spacer.style.height=`${total}px`;this.spacer.className='v-spacer';this.container.appendChild;}

_renderVisible{ const viewH=this.container.clientHeight;

const start=Math.max(0,Math.floor-this.bufferSize);

const end=Math.min(this.items.length,Math.ceil/this.itemHeight)+this.bufferSize);

Array.from( this.container.querySelectorAll).forEach);说起来，

for{ const it=this.items;const el=document.createElement;el.className='v-item';说起来，el.style.position='absolute';el.style.transform=translateY;el.innerHTML=this._renderItem;this.container.appendChild;} }

_bindScroll{ let ticking=!1，

/* scroll → raf / / 防止连续调用 / / 保证 UI 每帧最多一次 */ console.log

继续阅读下方实现细节

防抖 + requestAnimationFrame 调整

利用 IntersectionObserver 替代频繁 scroll 派发，再配合 requestAnimationFrame 批量更新 DOM。

js class OptimizedInfiniteScroll{ constructor{ /* 基础状态 */ Object.assign;

 /** 初始化 **/
const obs=new IntersectionObserver(
entries=>{ if{
this._load;} },{threshold:.1});obs.observe);其实，/** 保存观察者便于销毁 **/
Object.defineProperty;}
async _load{
ifreturn;Object.assign;try{
const data=await fetchData;按理说，// 模拟 API 调用
requestAnimationFrame=>{ // 将 DOM 操作推至绘制阶段执行
const frag=document.createDocumentFragment;data.forEach(it=>{
const d=document.createElement;怎么说呢，d.className='list-item';d.textContent=it.name;frag.appendChild;})，document.querySelector
.appendChild;++this.page，// 翻页计数
if{ // 没有更多了
Object.assign;/** 可自行展示 “已到底” 提示 */}
});其实，}catch{ console.error;} finally{
setTimeout=>{Object.assign;},300)，/* 防抖 */}}
}}

Web Worker 离线计算

把耗时的数据加工搬到子线程，以免阻塞 UI 渲染：

js /* worker.js / self.onmessage=e=>{ const {payload}=e.data;/ 假设这里做大量遍历/过滤 */ const result=payload.map}));self.postMessage;}，

/* main.js */ const w=new Worker;w.onmessage=e=>renderList;w.postMessage;

库速成方案

若项目时间紧迫，可直接选型以下成熟虚拟列表实现：

js import { FixedSizeList as List } from 'react-window';

function Virtual{ return ( {items.title})} );}

指标概览

前

Script ████████████████████ 1890 ms Layout ████████  290 ms Paint ████  160 ms TOTAL  2340 ms

后

Script ██  95 ms Layout █  15 ms Paint █  10 ms TOTAL  120 ms

主要要点

• 虚拟滚动 – 把渲染层数压至视口范围；显著降低 DOM 与内存开销。
• 避免强制同步布局 – 不在循环里读取 offset*getBoundingClientRect 等属性；改为一次性批量计算或使用固定高度。
• DocumentFragment – 批量插入节点，只触发一次回流/重绘。
• IntersectionObserver + requestAnimationFrame – 替代高频 scroll，提高事件调度效率。
• Web Worker – 重计算密集型任务交给子线程；配合 Transferable Objects 减少拷贝开销。
• 成熟库优先 – 项目上线快速选型，比手写更可靠、更易维护。

常踩坑记录

高度计算错误

js // ❌ 漏算 padding/margin 导致占位不准 const itemH=element.clientHeight;

// ✅ 正确做法，用 getBoundingClientRect 包含实际渲染尺寸 const itemH=element.getBoundingClientRect.height;

滚动位置跳变

追加新节点后若直接刷新容器，会导致页面瞬间回弹：

js const prev=document.querySelector.scrollTop;appendNewRows;// 恢复原始位置 document.querySelector.scrollTop=prev;

Worker 通信开销

大量数组通过 postMessage 会复制产生额外消耗：

js // 使用 Transferable 对象转移所有权，无需复制 worker.postMessage;

完整实现示例

js class OptimizedVirtualList{ constructor{ this.cntnr=container;/* 根容器 / this.h=itemHeight;/ 单项高度 / this.buf=bufferSize;/ 缓冲区大小 / this.items=;/ 数据集合 / this.page=1;/ 当前分页 / this.loading=!1，/ 加载状态 */ this.hasMore=!0，

 this._setupStructure;/* 建立基础 DOM */
this._setupObserver;/* 底部检测 */
this._loadInitial;/* 首屏拉取 */

}

_setupStructure{ // 清空容器并创建必备结构 while{this.cntnr.removeChild;} // 占位元素保持整体高度 this.spacer=document.createElement;Object.assign;Object.assign;// 可视区域容器 this.viewport=document.createElement;Object.assign;// 加载指示 this.loader=document.createElement;Object.assign;Object.assign;loader.textContent='加载中…'，// “已到底”提示 This.endMsg=document.createElement;This.endMsg.dataset.role='end';This.endMsg.textContent='暂无更多';This.endMsg.style.display='none';

;

//... // 实际代码省略。为了篇幅，此处展示主要结构搭建、Observer、分页加载、虚拟渲染等细节。

效果展示

• 滚动帧率提高至 ~~55 FPS~~；
• 单次分页加载时间从 ~~2300+~~ 毫秒降至 ~~120~~ 毫秒；按理说，
• 内存使用从 ~~150+~~ MB 降至 ~~40~~ MB；
• 使用者满意度从 ★★ 提高至 ★★★★★。

与感悟

1️⃣ 虚拟滚动是处理海量列表少不了的技术手段；不过，2️⃣ 避免在循环里读取几何信息，可显著削减 Layout 开销；3️⃣ 利用现代浏览器 API能把“无效工作”甩出主线程；4️⃣ 性能调优必须靠真实监控数据，而不是凭感觉盲目猜测；5️⃣ 若时间紧迫且团队已有对应框架，引入成熟库往往更使用较稳定。

希望本篇实战案例能帮助正在面对同类痛点的同学们快速脱离“卡顿地狱”。性能是一场马拉松，每一次细微调整都会让使用者体验飞跃提高。

If you find article useful,feel free to give a thumbs‑up or share your own experience in comments!Stay tuned for more front‑end performance deep‑dives.

致谢 &参考资料

• Chrome DevTools Performance 分析教程 
• React Window 官方文档 
• Intersection Observer API MDN 
• Web Workers 入门教程