大文档首屏渲染方案的一些思考

Elle 发布于2019-08-22 18:29 / 528人阅读

大文档首屏渲染方案思考

一、服务端渲染

优点：服务端性能比较好，对移动端手机作用明显

缺点：大文档渲染完可能体积比较大，网络传输占时间比之前多，sheet还是得回到前端渲染，得维护一套node代码，增加成本

二、分片滑动加载渲染

优点：由于只渲染到首屏和预加载一到两屏的文档，速度炒鸡快，理论上不会有边界，可以渲染任意大小的文档

缺点：需要解决未加载完全复制全文的bug，拉滚动条可能卡顿（参考Sheet插入Doc性能后续优化点文中说的拉动卡顿问题），CMD + F 无法全文搜索，需要自己开发全文搜索的功能。需要修改Changeset计算的一些逻辑。

三、多线程分片拼接渲染

方案：利用webworker多线程，主线程将文档分为几个块，分发给worker，worker将这些块输出为字符串，最后拼接输出

优点：可以将主线程让给sheet并行渲染，渲染速度应该会快，不存在二中缺点

缺点：理论上还是存在边界，超级大的文档，还是渲染时间会有天花板

周日简单开发了一下方案三

将580行约2w6千字的文档，clientVars分为三块，分发给三个worker计算成html字符串。渲染的核心代码并没有加入插件模块，只简单输出字符串。

方案 render字符串出来的时间/ms

优化前: 380

方案三: 1200

尴尬的事情发生了，一顿操作猛于虎，一看战绩零杠五，竟然是负优化。。。。

难受之余，分析了一下1200ms时间的构成，发现从main thread到worker之间postMessage的时间是整个负优化的来源，多达900ms到1000ms。

看了worker的资料:

https://developers.google.com...

用Transferable Objects能大大提高postMessage的性能。

再试了一波，能把整个时间提升到780ms，仍然有400ms在的时间可以优化。为毛官方的 demo postMessage如此之快，我自己试的这么慢呢？

原因是我的worker的js相当的复杂，体积很大，每个worker启动的时候都需要去编译这些js，所以导致了这个负优化的产生。理论上我们可以将各个plugin拆分为只render和其他的业务逻辑，能大大减少worker js的包体积。如果在包体积不好缩减的情况下，也可以采用预先初始化worker的方式来减少这个时间。这个方法可以在web容器化的方案里面使用.

后续
在文档1100多行（约4w字）的时候，全文渲染的时间达到520ms，而此时多线程渲染依然保持在220ms左右
结论：对于超大的文档，多线程提升的结果是显著的，而小一些的文档500行左右，意义不大。对于Doc插sheet的渲染可能有一些作用，可以把主线程让给sheet渲染。

云服务器 GPU云服务器人工智能的思考对人工智能的思考大数据的储存方案大数据的解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95905.html

大文档首屏渲染的一些思考和尝试

摘要：大文档首屏渲染方案的一些思考和尝试最近在处理一些优化方面的东西，大文档渲染的优化方案。对于插的渲染可能有一些作用，可以把主线程让给表格渲染。大文档首屏渲染方案的一些思考和尝试最近在处理一些优化方面的东西，大文档渲染的优化方案。这里简单记录分享一下。一、服务端渲染优点：服务端性能比较好，对移动端手机作用明显缺点：大文档渲染完可能体积比较大，网络传输占时间比之前多，shee...

shengguo 2019-08-23 14:44 评论0 收藏0
关于首屏时间采集自动化的解决方案

摘要：关于首屏首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。如在事件处理函数中，计算高度，如果大于屏幕高度则意味着首屏的结构已渲染完毕，开始计算首屏时间。关于首屏首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算，在本文中并不重复阐述这些已经被提出或者实现的方案，而旨在探索与讨论更多的首屏自动化采集方案，扩大思考范围，你我思想之间...

Rindia 2019-08-01 18:28 评论0 收藏0
关于首屏时间采集自动化的解决方案

摘要：关于首屏首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。如在事件处理函数中，计算高度，如果大于屏幕高度则意味着首屏的结构已渲染完毕，开始计算首屏时间。关于首屏首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算，在本文中并不重复阐述这些已经被提出或者实现的方案，而旨在探索与讨论更多的首屏自动化采集方案，扩大思考范围，你我思想之间...

1treeS 2019-08-22 14:05 评论0 收藏0
前端思考 - 收藏集 - 掘金

摘要：并尝试用为什么你统计的方式是错的掘金翻译自工程师的文章。正如你期望的，文中的前端开发单一职责原则前端掘金单一职责原则又称单一功能原则，面向对象五个基本原则之一。单页式应用性能优化 - 首屏数据渐进式预加载 - 前端 - 掘金前言针对首页和部分页面打开速度慢的问题，我们开始对单页式应用性能进行优化。本文介绍其中一个方案：基于 HTTP Chunk 的首屏数据渐进式预加载方案，该方案总...

LinkedME2016 2019-08-20 17:19 评论0 收藏0
前端网页加载渲染链路优化

摘要：所以，关于优化实战我们主要分为两部分加载渲染链路优化和编程代码优化。加载渲染链路优化从访问到页面呈现，整个链路可以做优化的思路。资源缓存这一节我们单独介绍缓存，是的，利用好缓存可以解决很多问题，包括页面加载和渲染的问题都能得到很好的优化。优化实战本文属于思否课堂VirtualDOM到AST玩转前端性能原理解析与代码实战课程官方博客：fed123.com 我们已经全面分析总结了评估页...

zhaofeihao 2019-08-30 15:56 评论0 收藏0