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

Elle 發布于2019-08-22 18:29 / 529人閱讀

大文檔首屏渲染方案思考

一、服務端渲染

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

缺點：大文檔渲染完可能體積比較大，網絡傳輸占時間比之前多，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云服務器云服務器人工智能的思考對人工智能的思考大數據的儲存方案大數據的解決方案

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/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