Firefox：在追加大树非常缓慢之后的第一个DOM动作

Question

我有以下JS伪代码：

var tree = $('<div id="root"></div>');
tree = build_big_tree();   // appends ~250 rows / 3000 DOM elements incl. 1 <audio> per row
$('body').append(tree);
some_DOM_call();

代码在浏览器中运行良好，但在firefox（13，在Ubuntu上），some_DOM_call()非常慢（250行时大约10秒，当整个JS运行在1s以下时）。 我在代码中使用console.timeStamp()找到了这个，直到我找到了罪魁祸首。

10s大致与行数成比例。实际页面位于http://wikiotics.org/fr/FSI-French-basic-course-revised-volume-01-unit-01-lesson-01?view=edit

除了花费时间之外，最烦人的部分是整个浏览器对于那些10甚至其他标签都无法使用。

some_DOM_call（）最初是jQuery代码，但我将其缩小到elem.offsetWidth（在jQuery cssHooks（）中为好奇）。当我注释掉some_DOM_call（）时，以下DOM访问导致10s延迟（body.appendChild(OBJECT)）。所以我的工作似乎并不重要，只要它是一个与DOM相关的动作，就会受到重创。

Firebug没有告诉我这些10年代发生了什么，所以我只能猜测它与渲染我插入页面的树有关。但我可能错了。

我怎样才能弄清楚究竟发生了什么，所以我可以改进一下？