寻找快速流动内容的想法

Question

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

• 向列添加内容（此示例的文本）
• 检查column.scrollHeight＆gt; column.offsetHeight（这需要DOM重排）
  • 如果是，则开始二进制分割文本，直到它缩短

基本上我的问题是我在列中添加了未知数量的文本，因此在每个文本块之后我检查列的滚动高度，这需要浏览器主动重排DOM以便为我提供正确的scrollHeight 。所以我有50-100或更多的回流，以便正确地铺设所有东西。

关于如何避免大部分内容的任何一般性想法？

Answer 1

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

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

2. 检查列宽与内容的比较

3. 将内容覆盖在列上，但在页面下方。这个    将切断部分溢出的内容。你可以完成    z-indexing或overflow: hidden;

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

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

Answer 2

也许这与Travis J的建议相同，但我不确定，我不太明白他的解决方案。

您可以首先在单个列上渲染所有内容，然后根据所需的列高度与每个元素的offsetTop加height来自上而下遍历元素以了解何时分割。当你找到一个要破解的元素时，缓存它的位置并继续。最后，您应该有一个包含要断开的元素列表的数组，因此您实际上可以在列中拆分内容。

这对你有意义吗？