我正在编写一些代码,将各种内容包装成文本列(以及图像,视频等)。代码工作正常,但由于算法我使用它相当慢,特别是这个一般逻辑:
基本上我的问题是我在列中添加了未知数量的文本,因此在每个文本块之后我检查列的滚动高度,这需要浏览器主动重排DOM以便为我提供正确的scrollHeight 。所以我有50-100或更多的回流,以便正确地铺设所有东西。
关于如何避免大部分内容的任何一般性想法?
答案 0 :(得分:0)
您可以多次呈现内容。由于第一次会缓存它,这应该相当快。多次渲染的原因如下:
在隐藏区域中渲染原始内容
检查列宽与内容的比较
将内容覆盖在列上,但在页面下方。这个
将切断部分溢出的内容。你可以完成
z-indexing或overflow: hidden;
根据第2步的检查,覆盖内容的副本 以相同的方式计算下一列中的偏移量,隐藏了 额外的内容。
跟踪呈现的内容与总内容,以便了解多少内容 如果有多列,则需要执行此操作。
答案 1 :(得分:0)
也许这与Travis J的建议相同,但我不确定,我不太明白他的解决方案。
您可以首先在单个列上渲染所有内容,然后根据所需的列高度与每个元素的offsetTop
加height
来自上而下遍历元素以了解何时分割。当你找到一个要破解的元素时,缓存它的位置并继续。最后,您应该有一个包含要断开的元素列表的数组,因此您实际上可以在列中拆分内容。
这对你有意义吗?