調試手記: 獲取 offsetHeight 致使頁面卡頓

問題描述

今天幫同事診斷一個巨大樹形列表頁渲染卡頓問題，具體現象爲，使用 handlebar 渲染巨大的樹形列表，全展開，前端卡頓 4 秒以上。

排查結果

首先，頁面中有多個 tab 頁，每一個 tab 上都有一個巨大的樹形列表，然而項目中的 tab 頁實現方式是先全渲染出來，而後隱藏 inactive 的tab。

第二，也是卡頓關鍵的緣由，開發者爲了肯定樹形列表容器是否須要隱藏一部分列表以及是否須要滾動條，在列表渲染完成後，經過$(...).height()獲取了容器的 offsetHeight（而且是在一個 if 判斷中）。開發者在調試的時候沒有想到 if 判斷條件會致使卡頓。

offsetHeight 致使卡頓的問題在網上早有論述，firefox 和 chrome 的 issue 列表中也早有說起。其原理是，雖然 offsetHeight 是一個只讀屬性，可是讀取這個屬性會形成 reflow，當頁面很大的時候，reflow 須要一秒以上，因而卡頓。

解決方案

直接的解決方案目前尚未，最終決定對功能作 tradeoff，放棄隱藏部分列表的功能，使用 css 控制滾動條。