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

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

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

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

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

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

Step 1

首先整个蓝色box的宽度是可以通过样式设置计算出来的,再减去两边的padding,就可以得出文本这个element的宽度,我们将它定义为textWidth。然后查看文本的字体样式,包括:font-familyfont-sizefont-weightline-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-breakbreak-word,便可以得出将会有多少行。由于换行时,会有多的空白,如下红框的地方:

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

js 复制代码
const rows = virtualTextWidth / (textWidth - 40);

Step 4

如果上面的rows为1.02,说明刚刚超过一行多一点,那就是算两行了,每一行的高度是通过line-heightfont-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>

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

相关推荐
IT_陈寒1 分钟前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding12 分钟前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖35 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花1 小时前
i18n国际语言化配置
前端
编程贝多芬1 小时前
Promise 的场景和最佳实践
前端·javascript
Asort1 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio1 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果1 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript