3

我有许多大文本，我正在使用 columnizer jquery 插件（https://github.com/adamwulf/Columnizer-jQuery-Plugin）的精简版本将它们变成“列”以用于另一个插件。就我的目的而言，Columnizer 是一个不错的执行者——只要在被列化的块中没有浮动内容。

Chrome、FF 和 IE10 在大部分情况下在纯文本或带有图像和其他简单 html 的文本上都有相似的性能。但是，如果您包含浮动内容（在本例中为图像），情况会发生巨大变化：

带图片的大书，创建了大约 700 列
测试条件 Firefox（秒） Chrome（秒）
-------------------------------------------------- ---------------
正常书籍构建（图像，浮动）31.5 1254.2
同上，但没有图像 23.2 18.9
带图像，但没有浮动图像 25.1 24.7
只有少数浮动图像 27.6 1010.9
删除除“p”之外的所有图像、标签 21.3 18.9

如您所见，这是一个巨大的差异。（我确实缓存了构建，但是因为每个浏览器/操作系统组合呈现的东西略有不同，我仍然必须首先在“主要”浏览器中构建每个。直到你等待 iPad 上的 Safari 构建这个事情——将 windows chrome 数字乘以 4。）

所以我的问题是：firefox 在没有被问到的情况下“正确”做了什么，我能做些什么来重新处理 columnizer 代码以在其他浏览器中模仿它？Columnizer 相当“脏”，因为它执行了数千个（我认为在本书中超过 100,000 个）附加，我知道这绝对不是很酷。是否使用文档片段？还有什么技巧？

Columnizer 要求目标容器（它在其中进行内容流动）位于 dom 中，以便可以正确应用样式（即，没有“display:none”，然后在完成时切换）。在我的 CSS 中，我按照建议将其设置为 position:absolute, visibility:hidden。我在想 FF 必须以其他浏览器没有的方式查看这组属性。或者...？

我应该在过程结束时注意，除了轻微的字体渲染差异外，浏览器之间的输出是相同的。

4

1 回答 1

0

我不确定这回答了我自己的问题，但我确实让事情变得更好了，这在某些方面对我来说已经足够回答了。我很想真正了解为什么我的解决方案会有所作为。

背景：我尽可能多地用 PHP 对本书的文本进行“预格式化”，因为在服务器端进行清理和其他普通文本杂务要快得多。然后将这个清理过的 html 块放入一个 div 中，这就是我列的内容。这个容器（我们称它为“raw”）和列的空目标容器（“dest”）需要在 dom 中，所以我在具有“raw”和“dest”的包装 div 上有这个 CSS作为孩子：

position: absolute; 
top: -2000px;
left: -2000px;
width: 700px;
height: 500px;
visibility: hidden; 
overflow: hidden;

这从页面中“删除”了两个 div（就我们的眼球而言），但它们仍在 dom 中，允许 Columnizer 使用它们。

嗯：在 Firefox 中，这足以让事情正常运行，无论是否浮动。但是在 Chrome、Safari 和 IE 中……好吧，看看我原来问题中的表格。呸。

但是通过将“位置：绝对”添加到“原始”，其他浏览器的性能显着提高。他们没有FF那么快，但也不落后。Chrome 浏览器现在需要 40 秒，而不是 1200 多秒。ipad，而不是冰河时代，需要几分钟。

为什么？这对我来说是个谜。在准备期间，这似乎是 columnizer 中的相关位：

...
var $sourceHtml = $('div.raw'),
    $cache      = $('<div></div>'),
    $inBox      = $('#dest'),
    $destroyable, $col;
...
$cache.append($sourceHtml.contents().clone(true));
$inBox.empty();
$inBox.append($("<div style='width:" + options.width + "px;'></div>")); 
$col = $inBox.children(":last");
$inBox.empty();
try {
    $destroyable = $cache.clone(true);
} catch(e) {
    $destroyable = $cache.clone();
}
...

作为缓存创建的空 div 应该在 DOM 中但在 HTML 页面之外，因为它还没有被附加到任何东西。诶？因此，当它被操纵时，页面不需要重新绘制。

我半开玩笑的理论是，虽然 FF 认识到这一点，但其他浏览器没有，并认为 $destroyable 位于页面的绘制区域内 - 可能将其附加到 body 标签甚至“包装”（尽管观看通过 Chrome 的检查员显示没有这样的事情）？

由于节点从 $destroyable 中删除并附加到正在创建的列中，因此每次 $destroyable 更改时其他浏览器都会重新绘制页面。快速使用块和内联的东西，添加浮动时很昂贵。

但是要在这个半生不熟的想法中戳一个洞：尝试将“位置：绝对”添加到 $destroyable 没有任何区别。只有当原始的“原始” div 具有该属性时，事情才会加速。

无论如何，回到酗酒和无知。如果可以的话，请耐心地叹息，让这成为一个可教的时刻！

于 2013-11-08T09:38:39.933 回答