简介：本文阐述了快手Docs在线表格自研WebGL渲染引擎Kola2d的历程，通过硬件加速、并行处理等技术，实现50+FPS渲染百万单元格大表格，突破在线表格渲染性能瓶颈，为高性能电子表格提供新动力。
在数字化办公日益普及的今天，在线电子表格作为团队协作和数据处理的重要工具，其性能的优化和提升显得尤为重要。快手Docs在线表格，作为一款内部广泛使用的自研协同办公产品，面对多人实时协作、海量数据处理及复杂功能集成等挑战，不断探索和实践，最终自研出基于WebGL渲染引擎的Kola2d，为打造高性能在线电子表格开辟了新路径。
一、背景与挑战
Docs在线表格承载着快手内部大量的数据处理需求。多人实时协作要求系统能够快速响应并更新界面，确保数据一致性；海量数据的存储、加载、渲染和操作对系统性能提出了更高要求；而类Excel的丰富功能，如公式计算、图表生成、权限管理等，则进一步加剧了系统负担。尽管前期已通过将核心渲染引擎从DOM渲染变更为Canvas 2D渲染来提升性能，但随着用户数据的增长和使用场景的扩展，Docs在线表格仍面临卡顿问题，特别是在处理大表格和多人协同场景时。
二、Kola2d自研之路
为解决这一难题，快手Docs团队决定自主研发WebGL渲染引擎Kola2d，以追求极致的渲染性能。WebGL基于OpenGL ES，能够直接利用GPU的强大计算能力进行渲染，实现硬件加速，处理更复杂的图形和更高效的图形渲染。同时，WebGL的并行处理能力使其能够同时处理大量的顶点和片元，这对于需要大量图形计算的应用至关重要。
在自研过程中，团队对WebGL渲染进行了可行性测试，并分析了市面上WebGL框架的优缺点。经过多轮设计和优化，Kola2d最终得以落地。它创新性地引入了WebGL技术，并在此基础上设计了多种性能提升策略，如剔除不在视图区的单元格、优化文字排版等，以进一步提升渲染效率。
三、Kola2d的技术实现与优势
Kola2d的设计遵循清晰的职责划分原则，将Docs在线表格分为业务层和渲染层。业务层专注业务封装，渲染层则专注渲染。业务层生成的数据经过转换后提交给Kola2d进行渲染。这种设计使得业务层和渲染层相对隔离，便于后续进行维护和扩展。
在渲染过程中，Kola2d充分利用WebGL的硬件加速和并行处理能力，实现了高效的数据渲染。同时，它还对外提供了一个FormattedText的文字排版包，用于加速页面排版。这一排版包能够轻松实现文字的度量和排版，并缓存排版结果，遇到样式相同的文字时直接使用缓存结果，从而加快排版速度。
此外，Kola2d还采用了一套优化策略来减少CPU的开销。它只渲染视图区内的单元格数据，对于视图区外的数据则使用默认宽高进行占位。当需要展示到视图区时，再对其进行真实宽高的排版并缓存排版结果。这种策略有效减少了CPU的处理负担，提升了页面响应速度。
四、Kola2d的应用与成效
Kola2d的成功研发使得Docs在线表格能够以50+FPS的帧率渲染拥有百万单元格的超大表格，同时满足多人协同场景下的流畅性要求。这一突破性进展不仅提升了用户的使用体验，还为高性能电子表格的未来发展提供了新动力。
在实际应用中，Kola2d展现出了显著的优势。它能够快速响应用户的操作请求，确保数据的实时更新和一致性；同时，它能够高效处理海量数据，支持复杂的计算和操作；此外，它还集成了类Excel的丰富功能，满足了用户多样化的需求。
五、展望未来与产品关联
随着数字化办公的不断深入和发展，高性能在线电子表格的需求将持续增长。Kola2d的成功研发为快手Docs在线表格的未来发展奠定了坚实基础。未来，团队将继续优化和完善Kola2d的性能和功能，以满足更多场景下的需求。
同时，Kola2d的成功也为其他产品提供了借鉴和启示。例如，在千帆大模型开发与服务平台中，可以借鉴Kola2d的渲染技术和优化策略来提升模型的渲染效率和性能；在曦灵数字人和客悦智能客服等应用中，也可以利用WebGL技术来实现更高效的图形渲染和交互体验。
总之，Kola2d自研之路的成功不仅为快手Docs在线表格的性能提升带来了显著成效，也为高性能在线电子表格的未来发展提供了新思路和新动力。