Javascript Jquery columnizer插件：在Windows Firefox中快40倍。为什么？

我有很多大的文本，我正在使用columnizer jquery插件（）的一个稍微精简的版本，将它们转换为“columns”，以便在另一个插件中使用。就我而言，Columnizer是一个不错的执行者——只要列化的块中没有浮动内容

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

Big Book w/ Images, roughly 700 columns created Test condition Firefox (sec) Chrome (sec) ----------------------------------------------------------------- Normal book build (images, floats) 31.5 1254.2 As above, but no images 23.2 18.9 w/ images, but no floated images 25.1 24.7 Only a few floated images 27.6 1010.9 Remove all images, tags except 'p' 21.3 18.9 大书带图片，创建了大约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相当“肮脏”，因为它有数千个（我认为在本书中超过100000个）附件，我知道这绝对不酷。它使用文档片段吗？还有别的把戏吗

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

---

在这个过程的最后，我应该注意到，除了字体呈现上的细微差异外，不同浏览器的输出是相同的。

我不确定这是否回答了我自己的问题，但我确实做了很多改进，这在某些方面对我来说已经足够了我很想了解为什么我的解决方案会有任何不同。

Background:我尽可能多地用PHP对书中的文本进行“预格式化”，因为在服务器端进行清理和其他平凡的文本琐事要快得多。然后将清理后的html块放入一个div中，这就是我列化的内容。这个容器（我们称之为“raw”）和列的空目标容器（“dest”）需要在dom中，因此我在包装器div上有一个CSS，它的子级是“raw”和“dest”：

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

这“删除”了页面上的两个div（就我们的眼球而言），但它们仍然在dom中，允许Columnizer处理它们

Hmmm:在Firefox中，无论是浮动还是否，这都足以让事情顺利进行。但在Chrome、Safari和IE中……好吧，看看我最初问题中的表格。恶心

但通过将“position:absolute”添加到“raw”，其他浏览器的性能显著提高。他们没有FF快，但也不落后。而不是1200多秒，Chrome现在需要40秒来呈现整本书。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();
}
...

。。。
var$sourceHtml=$（'div.raw'），
$cache=$（''），
$inBox=$（“#dest”），
$destroyable，$col；
...
$cache.append（$sourceHtml.contents（）.clone（true））；
$inBox.empty（）；
$inBox.append（$（“”））；
$col=$inBox.children（“：last”）；
$inBox.empty（）；
试一试{
$destroyable=$cache.clone（true）；
}捕获（e）{
$destroyable=$cache.clone（）；
}
...

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

我的半理论是，当FF意识到这一点时，其他浏览器就不这样认为了，并且认为$销毁在页面的涂抹区域内——也许是把它附加到身体标签上，或者甚至是“包装”（尽管通过Chrome的检查员看不出这样的东西）？p> 当节点从$destroyable中剥离并附加到正在创建的列中时，其他浏览器会在每次更改$destroyable时重新绘制页面。块和内联的速度很快，当添加浮动时成本很高

但在这个半生不熟的想法上戳个洞：试图在$destroyable中添加“position:absolute”并没有什么区别。只有当原始的“raw”div具有该属性时，事情才会加速

---

不管怎样，回到酗酒和无知。如果可以的话，请耐心地叹口气，让这成为一个可教的时刻

虽然我不知道答案，但我希望看到您的问题正在进行中。你有一个网页或小提琴，我们可以看到正在发生的事情吗？请确保你有最新的版本这还不足以成为一个答案，插件必须计算出每个屏幕元素在页面上显示后使用了多少空间。在边界情况下，它将迭代很多次，在列之间移动元素。你可能有渐近数据。任何使元素大小更容易计算的东西都对这个插件有好处