在渲染前/不等高虚拟滚动，每个文本的高度该怎么计算出来？

渲染长列表时，要想性能好，需要用到虚拟滚动（也叫虚拟列表，virtualScroll)。既只有当滚动到视图以内或接近视图的时候，才画出实际的dom。

网上能搜到很多代码，基础的场景是每一项等高（或等宽），复杂一点的场景是每一项不等高，实现起来也有不少相关的工具库可以用，比如react-window。

我在工作中遇到的一种情况如下图，对话框里每一项中的文本是不一样的，也就是不等高的虚拟列表，需要给出每一项的高度，那该如何计算呢？

那么重点就是计算文本将会显示的高度，这里可以用canvas。

第一步 根据css拿到数据

首先整个蓝色box的宽度是可以通过样式设置计算出来的，再减去两边的padding，就可以得出文本这个element的宽度，我们将它定义为textWidth。然后查看文本的字体样式，包括：font-family，font-size，font-weight，line-height。我的项目中，这些属性如下：

{
  font-family: 'Roboto, xxx...';
  font-size: '12px';
  font-weight: 'lighter';
  line-height: 1.2;
}

第二步 用canvas计算

创建canvas，让canvas计算文本的宽度，此时这个canvas并不会显示出来，只是用来计算文本平铺成一行时能有多宽:

const font = "lighter 12px Roboto";
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const { width: virtualTextWidth } = context.measureText(text);

第三步 处理换行，估算行数

现在已知容器的宽度，和文本单行的宽度，文本在这个容器中会换行，此时word-break为break-word，便可以得出将会有多少行。由于换行时，会有多的空白，如下红框的地方：

我们此处假设平均留白宽度为40px。如果你要求非常的精准，那需要计算每个字母的宽度，计算在第几个字符时换行，也是能算出来的，但是太费时，这里我先用个平均值估算看看。

const rows = virtualTextWidth / (textWidth - 40);

第四步 根据行数计算高度

如果上面的rows为1.02，说明刚刚超过一行多一点，那就是算两行了，每一行的高度是通过line-height和font-size相乘得出的，由此可以得出高度了：

const height = (1.2 * 12) * Math.ceil(rows);

总结

整个方法的代码如下：

const getTextHeight = (textWidth: number, text: string) => {
    const font = "lighter 12px Roboto";
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    context.font = font;
    const { width: virtualTextWidth } = context.measureText(text);
    
    const rows = virtualTextWidth / (textWidth - 40);
    
    const height = (1.2 * 12) * Math.ceil(rows);
}

使用react-window的组件如下：

getItemSize = (index: number) => {
    const text = comments[index];
    return getTextHeight(text);
}

<VariableSizeList
    {...otherProps}
    itemSize={getItemSize}
>
    {getListItem}
</VariableSizeList>

最终如愿做出了上方图中的效果。