成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

shengguo / 3536人閱讀

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

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

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

一、服務(wù)端渲染

優(yōu)點：服務(wù)端性能比較好，對移動端手機作用明顯

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

二、分片滑動加載渲染

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

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

三、多線程分片拼接渲染

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

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

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

我決定周末試一波

周日簡單開發(fā)了一下方案三

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

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

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

優(yōu)化前: 380 ms

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

尷尬的事情發(fā)生了，一頓操作猛于虎，一看戰(zhàn)績零杠五，竟然是負優(yōu)化。。。。

難受之余，分析了一下1200ms時間的構(gòu)成，發(fā)現(xiàn)從main thread到worker之間postMessage的時間是整個負優(yōu)化的來源，多達900ms到1000ms。

看了worker的資料:

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

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

再試了一波，能把整個時間提升到780ms，仍然有400ms在的時間可以優(yōu)化。為毛官方的 demo postMessage如此之快，我自己試的這么慢呢？

原因是我的worker的js相當(dāng)?shù)膹?fù)雜，體積很大，每個worker啟動的時候都需要去編譯這些js，所以導(dǎo)致了這個負優(yōu)化的產(chǎn)生。理論上我們可以將各個plugin拆分為只render和其他的業(yè)務(wù)邏輯，能大大減少worker js的包體積。如果在包體積不好縮減的情況下，也可以采用預(yù)先初始化worker的方式來減少這個時間。這個方法可以在web容器化的方案里面使用.

后續(xù)

在文檔1100多行（約4w字）的時候，全文渲染的時間達到520ms，而此時多線程渲染依然保持在220ms左右.

結(jié)論

對于超大的文檔，多線程提升的結(jié)果是顯著的，而小一些的文檔500行左右，意義不大。
對于Doc插sheet的渲染可能有一些作用，可以把主線程讓給表格渲染。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101067.html

相關(guān)文章

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

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

    Elle 評論0 收藏0

  • GMTC 2019 參會回顧

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

    Zack 評論0 收藏0

  • 前端思考 - 收藏集 - 掘金

    摘要：并嘗試用為什么你統(tǒng)計的方式是錯的掘金翻譯自工程師的文章。正如你期望的，文中的前端開發(fā)單一職責(zé)原則前端掘金單一職責(zé)原則又稱單一功能原則，面向?qū)ο笪鍌€基本原則之一。 單頁式應(yīng)用性能優(yōu)化 - 首屏數(shù)據(jù)漸進式預(yù)加載 - 前端 - 掘金前言 針對首頁和部分頁面打開速度慢的問題，我們開始對單頁式應(yīng)用性能進行優(yōu)化。本文介紹其中一個方案：基于 HTTP Chunk 的首屏數(shù)據(jù)漸進式預(yù)加載方案，該方案總...

    LinkedME2016 評論0 收藏0

  • 這么多前端優(yōu)化點你都記得住嗎？

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

    ysl_unh 評論0 收藏0

  • 這么多前端優(yōu)化點你都記得住嗎？

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

    Tecode 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<