update layer tree導致頁面卡頓


前因

今天檢查一個vue頁面問題,就是在切換Tab時候(某些win10電腦),頁面會卡頓一段很長的時間,短則3秒,長則十幾秒,這個體驗非常糟糕,於是我着手尋找其中原因。

概況

這個vue頁面的元素非常多,主要分為六個Tab內容,切換Tab也只是控制Tab內容的顯隱。按道理這是非常簡單的行為,不應該出現卡頓的情況。

檢查

代碼上,我將切換Tab做的一些業務邏輯去掉,只留下控制顯隱部分,並打印執行時間。

測試過后發現,即便是這么簡單的操作,頁面還是會卡頓,從打印的日志上看,我發現了切換的代碼很快就執行完了,是后續的渲染卡頓了。

Timeline

我打開了控制台工具,點到Timeline那一欄,檢查js的執行情況。

效果如下:

果然有一長串一直在執行的東西,上圖紫色部分,卡頓的時間就是在執行這玩意。

放大紫色部分,發現這一長條紫色是由一塊塊小塊紫色任務組成的,每個小塊執行的都是同一個東西,都是在執行update layer tree這個動作。

思考

這update layer tree是瀏覽器渲染頁面的其中一個行為,但我很奇怪,為什么會有這么多這種操作。

PS:了解update layer tree需要知道什么是頁面重繪(repaint)和回流(reflow),可以看我另一篇文章:https://www.cnblogs.com/lovesong/p/8046730.html

我的代碼:

我Tab切換是用‘visibility:hidden’,由vue一個計算屬性控制,當初為了某些功能,才沒使用‘display:none’的。

引用:

https://stackoverflow.com/questions/25724126/chrome-devtools-timeline-update-layer-tree-event

這個問題里面出現了跟我相似的情況,我看了其中的解答,大體意思,’當前樹的某個顯示層失效,導致該層次結構要更新一層,引發該層次結構上每個層都被更新。’

PS:這里說的樹應該是render tree。

原因:

難道因為‘visibility:hidden’的切換,導致render tree的更新異常?

PS:其實按道理,即便是所有的塊都更新了,也不應該更新那么多次,卡那么久。

所以,我猜想,可能頁面里面某些元素的顯隱導致了render tree循環更新了。

我將‘visibility:hidden’換成‘display:none’控制,測試一下,果然就沒不卡頓了。

后續

我沒有找到哪個位置導致的render tree更新異常,目前只能更換Tab切換方式,從源頭截止。

另外,如果發現頁面卡頓了,可以用Timeline這個工具查看,非常不錯。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM