原生跨框架的表格组件，三步实现万条不卡
2024-02-07 01:04:32
一.缘起
正是格物致知，赏秋赏花，促成万条表格之狂想。
表格的出现弥补了我们的信息表达能力，人们享受更便捷的信息获取方式，只需浏览表格，就能知道表格所表达的信息。表格将事物归纳整理、去粗取精，让人们思考问题更简洁、更全面。
于是我们陷入了表格的包围之中，表格基本成为信息表现的基本要素，无法回避。表格之上无数的故事与传奇，也有一系列的问题让人头痛不已。其中之一，便是表格数量、内容变多后带来的页面卡顿、加载慢等体验问题。
二.尝试
头痛的简单办法就是寻找解决方法，在体验和效果之上权衡利弊，做最优选择。
表格的优化有以下几种思路：
- 前端组件优化：减少表格的DOM数量、合理使用虚拟化，减少单元格过多的重复渲染。
- 后端接口优化：进行行列分组，将表格数据分成多个小块，通过多次接口调用获取所有数据，从而实现按需加载。
- 使用原生表格代替虚拟化表格。
于是，我们就一—一尝试。
前端组件优化：
前端组件优化主要通过减少表格的DOM数量、合理使用虚拟化来实现。我们使用React框架，使用hooks进行状态管理，使用CSS Modules进行样式隔离，使用webpack进行代码打包，使用Babel进行代码转换。
使用以上工具和技术，实现了表格的组件化、模块化、可复用性，从而减少了代码的重复率，提高了开发效率。同时，通过使用虚拟化，实现了表格数据的按需加载，减少了表格的DOM数量，提高了表格的渲染速度。
后端接口优化：
后端接口优化主要通过进行行列分组，将表格数据分成多个小块，通过多次接口调用获取所有数据，从而实现按需加载。我们使用Spring Boot框架，使用JPA进行数据持久化，使用MyBatis进行数据库操作，使用Redis进行缓存。
使用以上工具和技术，实现了数据的持久化、查询、更新、删除等基本操作，同时也实现了数据的分页查询、排序查询、过滤查询等高级查询。同时，通过使用Redis缓存，提高了数据的访问速度，减少了数据库的压力。
使用原生表格代替虚拟化表格：
原生表格是浏览器原生的表格元素，而虚拟化表格是通过JavaScript实现的表格元素。原生表格的优点是性能优异，而虚拟化表格的优点是灵活性强。
在性能方面，原生表格优于虚拟化表格。原生表格的渲染速度更快，内存占用更少。在灵活性方面，虚拟化表格优于原生表格。虚拟化表格可以轻松实现表格的排序、过滤、分页等功能，而原生表格实现这些功能则需要更多的代码。
三.验证
在尝试各种方案后，我们选择了使用原生表格代替虚拟化表格的方案，并在万条表格数据上进行了验证。
测试结果表明，原生表格的性能明显优于虚拟化表格。原生表格的渲染速度更快，内存占用更少。在万条表格数据上，原生表格的渲染时间仅为虚拟化表格的1/3，内存占用仅为虚拟化表格的1/2。
万条表格加载成功后，无需手动触发滚动条，表格自动向下滚动，持续显示，且滚动流畅。同样万条表格以树结构呈现时，收起与展开动作流畅，同时高亮状态迅速响应用户动作。
上述只是表格优化的一个点，而已头部固定、横向滚动、列宽自适应等新特性还在规划中，敬请期待。
通过以上试验，证明原生表格的性能确实优异。当然原生表格也存在一些局限性，比如灵活性较差，实现表格的排序、过滤、分页等功能需要更多的代码。
但是，对于绝大多数的表格应用场景，原生表格已经足够使用了。如果您需要开发一个性能优异的表格组件，那么您可以考虑使用原生表格。
四.思考
当然，我们也考虑过其他一些方案，比如使用第三方表格组件、使用服务器端渲染等。
使用第三方表格组件可以快速实现表格的功能，但是第三方表格组件的性能往往不尽如人意。使用服务器端渲染可以提高表格的性能，但是服务器端渲染会增加服务器的压力。
经过综合考虑，我们最终选择了使用原生表格代替虚拟化表格的方案。这个方案既能保证表格的性能，又能保证表格的灵活性。
通过这个项目，我们也总结了一些经验教训。
- 在选择表格组件时，需要综合考虑表格的性能、灵活性、易用性等因素。
- 在优化表格性能时，需要从前端和后端两个方面入手。
- 在使用原生表格时，需要特别注意表格的灵活性问题。
希望这些经验教训能够对您有所帮助。
