javascript - 寻找快速传播内容的想法

Question

我正在编写一些代码，将各种内容包装到文本列(以及图像、视频等)中。代码工作正常，但由于我使用的算法相当慢，特别是这个一般逻辑:

• 向列中添加内容(本例中为文本)
• 检查 column.scrollHeight > column.offsetHeight(这需要 DOM 回流)
  • 如果是，开始对文本进行二进制分割，直到它更短

基本上我的问题是我在列中添加了未知数量的文本，所以在每个文本 block 之后我检查列的滚动高度，这需要浏览器主动重排 DOM 以便给我正确的 scrollHeight .所以我有 50-100 次或更多回流以正确布置所有内容。

关于如何避免其中的大部分问题有什么一般性想法吗？

Answer 1

您可以多次呈现内容。由于第一次会缓存它，所以这应该相当快。多重渲染的原因如下。

1. 在隐藏区域渲染原始内容

2. 检查列宽与内容的对比情况

3. 将内容覆盖在列上方，但在页面下方。这个 会截掉部分溢出的内容。你可以完成 z 索引或使用 overflow: hidden;

4. 根据第 2 步的检查内容，覆盖内容的副本 以相同的方式计算下一列中的偏移量，隐藏 额外的内容。

5. 跟踪呈现的内容与总内容的对比，以便您了解有多少 如果有多列，您需要对列执行此操作。