调试手记: 获取 offsetHeight 导致页面卡顿

问题描述

今天帮同事诊断一个巨大树形列表页渲染卡顿问题，具体现象为，使用 handlebar 渲染巨大的树形列表，全展开，前端卡顿 4 秒以上。

排查结果

首先，页面中有多个 tab 页，每个 tab 上都有一个巨大的树形列表，然而项目中的 tab 页实现方式是先全渲染出来，然后隐藏 inactive 的tab。

第二，也是卡顿关键的原因，开发者为了确定树形列表容器是否需要隐藏一部分列表以及是否需要滚动条，在列表渲染完成后，通过$(...).height()获取了容器的 offsetHeight（并且是在一个 if 判断中）。开发者在调试的时候没有想到 if 判断条件会导致卡顿。

offsetHeight 导致卡顿的问题在网上早有论述，firefox 和 chrome 的 issue 列表中也早有提及。其原理是，虽然 offsetHeight 是一个只读属性，但是读取这个属性会造成 reflow，当页面很大的时候，reflow 需要一秒以上，于是卡顿。

解决方案

直接的解决方案目前还没有，最终决定对功能做 tradeoff，放弃隐藏部分列表的功能，使用 css 控制滚动条。