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

2021-09-13 15:02:06 字數 837 閱讀 9814

大文件首屏渲染方案思考

一、服務端渲染

二、分片滑動載入渲染

三、多執行緒分片拼接渲染

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

將580行約2w6千字的文件,clientvars分為三塊,分發給三個worker計算成html字串。渲染的核心**並沒有加入外掛程式模組,只簡單輸出字串。

優化前: 380

方案三: 1200

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

難受之餘,分析了一下1200ms時間的構成,發現從main thread到worker之間postmessage的時間是整個負優化的**,多達900ms到1000ms。

看了worker的資料:

用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渲染。

回溯的一些思考

堆疊中有元素abcdef,每次出棧可以選擇乙個或者兩個元素棧,當有兩個元素出棧時可以選擇其中乙個重新入棧,當棧為空時,總共有多少種出棧方法?對於本題目的一些思考,對於回溯問題,要記得恢復現場。include include include using namespace std queue vect...

生活的一些思考

這裡只是生活中一些零碎的想法,隨時都有可能飄散而去,在此也只是記錄一下,寫到 算 並無主題。生活,這個凌駕於生存而上的活著。對我來說,這個詞,或許只是心靈上的企及。生存,這個滿足於人的最低基本需求的定義,食能果腹,衣能蔽體,也僅此而已吧。而,在生存之上,我們才會考慮,如何食的更有品味,如何穿的更得體...

索引的一些思考

一 索引是什麼?答 索引是一種資料結構,它和表中的列有對應關係,索引是有序的,但資料的物理排序不一定是按照索引的順序排列的。如果是按照索引排序的,則稱為聚集索引 如果不是,則稱之為非聚集索引。由於聚集索引會影響到資料的物理排序,所以每個表只能有乙個聚集索引,但可以有多個非聚集索引。例子解釋 1 cr...