我一直在用 Electron (Chrome) 和 React 实现一个聊天客户端。我们的首要任务是速度。因此，我们应该使用虚拟化列表组件（也称为“缓冲渲染”或“窗口渲染”）。我们已经探索了 react-virtualized、react-window 和 react-infinite 等。
所有这些组件的一个共同点是，如果支持可变高度的列表元素，则需要提前知道高度。现在，有些聊天很长，有些很短，这对我们来说是一个挑战。（由于 EXIF 数据和 ffprobe，图像和视频很容易）。
因此，我们面临着测量高度的挑战，同时也竭力追求卓越的性能。一种明显的技术是将元素放在浏览器容器中，离开视口，执行测量，然后呈现列表。但这在性能要求方面伤害了我们。像 react-virtualized/CellMeasurer（不再由原作者维护）和 react-window 之类的软件使我们采用了这种技术，内置于库中，但性能有点慢且不可靠。一个可能更高效的类似想法是使用后台电子浏览器窗口来进行渲染和测量，但我的直觉是这不会更快。
我认为必须有一些解决的方法可以根据自动换行、最大宽度和字体规则提前确定字符串高度。
我目前的想法是使用像string-pixel-width这样的库，以便在我们通过 API 获取文本数据后立即计算行高。基本上，该库使用这段代码来生成字符宽度 [*] 的映射。然后，一旦我们知道每个文本的宽度，当它最大化计算出的最大行宽时，我们将每行分开，最后通过行数推断列表元素的高度。由于断字，它需要一点点算法摆弄，但有库可以帮助解决这个问题 - css-line-break似乎很有希望。
[*] 我们将不得不稍微修改它以考虑所有 Unicode 字符范围，但这是微不足道的。
我还没有完全探索的一些选项包括 python weasyprint 项目和 facebook-yoga 项目。我愿意接受你的想法！
weasyprint electron react-virtualized react-infinite react-window