初探富文本之基于虚拟滚动的大型文档性能优化方案

虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。具体来说，虚拟滚动只渲染用户浏览器视口部分的文档数据，而不是整个文档结构，其核心实现根据可见区域高度和容器的滚动位置计算出需要渲染的列表项，同时不渲染额外的视图内容。虚拟滚动的优势在于可以大大减少DOM操作，从而降低渲染时间和内存占用，解决页面加载慢、卡顿等问题，改善用户体验。

描述

前段时间用户向我们反馈了一个问题，其产品有比较多的大型文档在我们的文档编辑器上进行编辑，但是因为其文档内容过长且有大量表格，导致在整个编辑的过程中卡顿感比较明显，而且在消费侧展示的时候需要渲染比较长的时间，用户体验不是很好。于是我找了一篇比较大的文档测试了一下，由于这篇文档实在是过大，首屏的LCP达到了6896ms，即使在各类资源有缓存的情况下FCP也需要4777ms，单独拎出来首屏的编辑器渲染时间都有2505ms，整个应用的TTI更是达到了13343ms，在模拟极限快速输入的情况下FPS仅仅能够保持在5+，DOM数量也达到了24k+，所以这个问题还是比较严重的，于是开始了漫长的调研与优化之路。

方案调研

在实际调研的过程中，我发现几乎没有关于在线文档编辑的性能优化方案文章，那么对于我来说几乎就是从零开始调研整个方案。当然社区还是有很多关于虚拟滚动的性能优化方案的，这对最终实现......