本文介绍了如何在一个原生跨框架的表格组件中实现万条数据不卡顿，主要分为数据驱动、差异化更新和虚拟滚动三个步骤。数据驱动通过对外提供数据变更接收函数实现视图和数据的隔离。差异化更新避免不必要的DOM操作，提高性能。虚拟滚动则通过仅渲染可视区域的数据，配合滚动事件和防抖机制，确保流畅体验。
确定在GridManager内实现万条不卡的想法，最早出现于2021年初同郑某人和杨某人的饭局上。如今功能已经实现，整理下这个值得记录的过程。
现状分析
在虚拟滚动落地前，针对于现有逻辑的改造是个前置条件。
上方gif内演示了在实现万条不卡前，表格组件所拥有的部分能力。由于这些能力搭建于原生跨框架的结构上，所以在需要对渲染逻辑进行较大范围改造时，原先的能力就成为了不小的包袱。
因此在不影响现有功能的情况下支持万条不卡，需要按序实现以下三个步骤:
- tbody区域的数据驱动改造:
降低功能复杂度 - 差异化更新:
减少DOM节点的更新频率 - 虚拟滚动:
减少DOM节点的更新数量
三个步骤
基于数据驱动，构建差异化更新，最终实现虚拟滚动。
1、数据驱动
随着js框架的出现，数据驱动改变了前端组件的渲染逻辑。
对于一个脱离框架的原生表格组件，虽然需要自行实现数据驱动，但难度其实不大，只需将tbody区域内的所有渲染逻辑进行整合，并向外透出唯一的数据变更接收函数。
<
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
