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

问题描述

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

排查结果

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

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

offsetHeight 致使卡顿的问题在网上早有论述，firefox 和 chrome 的 issue 列表中也早有说起。其原理是，虽然 offsetHeight 是一个只读属性，可是读取这个属性会形成 reflow，当页面很大的时候，reflow 须要一秒以上，因而卡顿。

解决方案

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