寻找快速流动内容的想法

时间:2012-08-28 19:18:06

标签: javascript

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

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

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

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

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

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

答案 1 :(得分:0)

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

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

这对你有意义吗?