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

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

网上能搜到很多实现的代码，基础的是，假设每一项都是登高（或等宽）的，高级一点的，支持每一项不等高的，也有不少相关的工具库，比如react-window。

我在工作中遇到的一种情况是，不等高的虚拟列表中，每一项中的文本是已知时，需要给出每一项的高度，那该如何计算呢？

以此为例，我将做一个如下对话框的长列表：

那么重点就是计算文本将会占据的高度，那么可以用canvas。

Step 1

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

css 复制代码

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

Step 2

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

js 复制代码

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

Step 3

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

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

js 复制代码

const rows = virtualTextWidth / (textWidth - 40);

Step 4

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

js 复制代码

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

总结

整个方法的代码如下：

js 复制代码

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的组件如下：

js 复制代码

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

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

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