前因
今天檢查一個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這個工具查看,非常不錯。