3

I'm writing some code that wraps various content into columns of text (and images, videos, etc). The code works fine, but due to the algorithm I'm using it's rather slow, specifically this general logic:

  • add something (text for this example) to a column
  • check to see if column.scrollHeight > column.offsetHeight (this requires a DOM reflow)
    • if yes, start to binary split the text until it's shorter

Basically my issue is that I'm adding an unknown amount of text to a column, so after each chunk of text I check the column's scroll height which requires the browser to actively reflow the DOM in order to give me the correct scrollHeight. So I have 50-100 or more reflows in order to properly lay everything out.

Any general ideas on how to avoid most of these?

4

2 回答 2

0

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

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

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

  3. 将内容覆盖在列之上，但在页面之下。这将切断部分溢出的内容。您可以使用 z-indexing 或使用overflow: hidden;

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

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

于 2012-08-28T19:39:46.727 回答
0

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

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

这对你有意义吗？

于 2012-08-28T19:49:58.467 回答