如何使用JS优化大行数<table>滚动时的加载与渲染速度

核心优先方案：虚拟滚动（窗口化） #

这是解决万行级表格滚动卡顿最有效的手段，原理是只渲染可视区域内的表格行，可视区域外的内容用空白占位，滚动时动态替换可视区域的DOM节点：

• 固定每行高度（如果是不定高可以做高度预计算+缓存），计算出20000行数据的总高度，给表格容器设置对应高度撑开滚动条
• 监听滚动容器的scroll事件，计算当前可视区域对应的起始行、结束行下标
• 仅渲染下标在起始行到结束行范围内的行数据，非可视区域的行全部不渲染，仅保留高度占位
• 若使用前端框架，可以直接调用成熟的封装组件：React生态用react-window/react-virtualized，Vue生态用vue-virtual-scroller，原生JS可以自己实现简易版逻辑

基础渲染优化 #

如果暂时没法接入虚拟滚动，可以先做以下基础优化，也能大幅提升滚动流畅度：

• 给表格设置固定布局：给<table>添加table-layout: fixed样式，强制浏览器按照预设的列宽渲染表格，不需要每滚动一次就重新计算所有单元格的宽度，能减少大量重排开销
• 开启合成层加速：给表格容器添加transform: translateZ(0)或者will-change: scroll-position样式，让浏览器把表格单独放到合成层渲染，滚动时不需要重排整个页面
• 减少单元格内的复杂DOM结构和计算逻辑：移除单元格内不必要的嵌套标签、滚动时暂停单元格内的动画、实时计算等逻辑
• 开启懒渲染/分页：如果业务允许，可以做分页加载，或者滚动到底部再加载下一批数据，初始不要一次性渲染20000行全量DOM

浏览器层面优化 #

• 禁用不必要的浏览器默认行为：给表格容器添加touch-action: pan-y（移动端），避免滚动时触发浏览器的默认手势操作
• 减少重排重绘触发：所有和滚动相关的操作都做节流处理，scroll事件的回调函数执行间隔控制在16ms以上，避免频繁触发DOM更新

内容的提问来源于stack exchange，提问作者Meryem ACHEMLAL