寻找快速流动内容的想法

Looking for ideas to quickly flow content

本文关键字：寻找      更新时间：2023-09-26

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

  • 向列中添加一些内容（本例中为文本）
  • 检查column.scrollHeight>column.offsetHeight（这需要DOM回流）
    • 如果是，则开始对文本进行二进制拆分，直到文本变短

基本上，我的问题是，我在一列中添加了未知数量的文本，所以在每一块文本之后，我都会检查列的滚动高度，这需要浏览器主动回流DOM，以便给我正确的滚动高度。所以我有50-100个或更多的回流，以便正确地布置所有东西。

关于如何避免大多数这种情况，有什么一般的想法吗？

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

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

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

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

  4. 根据步骤2的检查内容，将内容的副本与以相同的方式在下一列中显示计算的偏移量，隐藏额外内容。

  5. 跟踪呈现的内容与总内容的对比，这样您就可以知道有多少如果有多个列，则需要对其执行此操作。

也许这和Travis J的建议是一样的，但我不确定，我不太理解他的解决方案。

您可以先在单个列上渲染所有内容，然后根据所需的列高度与每个元素的offsetTop加height，自上而下地循环元素，以确定何时拆分。当你找到一个要打断的元素时，缓存它的位置，然后继续。最后你应该有一个数组，里面有要打断的元件列表，这样你就可以把内容分成列了。

这对你有意义吗？

相关文章：