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