大文檔首屏渲染的一些思考和嘗試

shengguo 發布于2019-08-23 14:44 / 3534人閱讀

摘要：大文檔首屏渲染方案的一些思考和嘗試最近在處理一些優化方面的東西，大文檔渲染的優化方案。對于插的渲染可能有一些作用，可以把主線程讓給表格渲染。

大文檔首屏渲染方案的一些思考和嘗試

最近在處理一些優化方面的東西，大文檔渲染的優化方案。這里簡單記錄分享一下。

一、服務端渲染

優點：服務端性能比較好，對移動端手機作用明顯

缺點：大文檔渲染完可能體積比較大，網絡傳輸占時間比之前多，sheet還是得回到前端渲染，得維護一套node代碼，增加成本

二、分片滑動加載渲染

優點：由于只渲染到首屏和預加載一到兩屏的文檔，速度炒雞快，理論上不會有邊界，可以渲染任意大小的文檔

缺點：需要解決未加載完全復制全文的bug，拉滾動條可能卡頓（參考Sheet插入Doc性能后續優化點文中說的拉動卡頓問題），CMD + F 無法全文搜索，需要自己開發全文搜索的功能。需要修改Changeset計算的一些邏輯。

三、多線程分片拼接渲染

方案：利用webworker多線程，主線程將文檔分為幾個塊，分發給worker，worker將這些塊輸出為字符串，最后拼接輸出

優點：可以將主線程讓給sheet并行渲染，渲染速度應該會快，不存在二中缺點

缺點：理論上還是存在邊界，超級大的文檔，還是渲染時間會有天花板

我決定周末試一波

周日簡單開發了一下方案三

將580行約2w6千字的文檔，clientVars分為三塊，分發給三個worker計算成html字符串。

渲染的核心代碼并沒有加入插件模塊，只簡單輸出字符串。

方案 render字符串出來的時間為 ms

優化前: 380 ms

方案三處理之后: 1200ms...

尷尬的事情發生了，一頓操作猛于虎，一看戰績零杠五，竟然是負優化。。。。

難受之余，分析了一下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的渲染可能有一些作用，可以把主線程讓給表格渲染。

云服務器 GPU云服務器人工智能的思考對人工智能的思考 java的一些代碼深度學習的一些應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101067.html

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

大文檔首屏渲染方案思考一、服務端渲染優點：服務端性能比較好，對移動端手機作用明顯缺點：大文檔渲染完可能體積比較大，網絡傳輸占時間比之前多，sheet還是得回到前端渲染，得維護一套node代碼，增加成本二、分片滑動加載渲染優點：由于只渲染到首屏和預加載一到兩屏的文檔，速度炒雞快，理論上不會有邊界，可以渲染任意大小的文檔缺點：需要解決未加載完全復制全文的bug，拉滾動條可能卡頓（參考...

Elle 2019-08-22 18:29 評論0 收藏0
GMTC 2019 參會回顧

摘要：回顧上一次參加還是年。年的還是真正的，年的會議早已經把英文全稱去掉，改稱全球大前端技術大會。同時與產品協作從產品設計方面突出關注點，做產品設計方面的優化，如站新版改造減少頁面元素，將播放器窗口直接顯示在第一屏。回顧上一次參加 GMTC 還是 2017 年。那時的我還是剛剛參加工作并在試用期辭職的菜鳥。 2017 年的 GMTC 還是真正的 Global Mobile Tech Co...

Zack 2019-08-23 18:15 評論0 收藏0
前端思考 - 收藏集 - 掘金

摘要：并嘗試用為什么你統計的方式是錯的掘金翻譯自工程師的文章。正如你期望的，文中的前端開發單一職責原則前端掘金單一職責原則又稱單一功能原則，面向對象五個基本原則之一。單頁式應用性能優化 - 首屏數據漸進式預加載 - 前端 - 掘金前言針對首頁和部分頁面打開速度慢的問題，我們開始對單頁式應用性能進行優化。本文介紹其中一個方案：基于 HTTP Chunk 的首屏數據漸進式預加載方案，該方案總...

LinkedME2016 2019-08-20 17:19 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

ysl_unh 2019-08-21 17:30 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

Tecode 2019-08-01 17:58 評論0 收藏0