0

我有以下 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 运行时间不到 1 秒）。我console.timeStamp()在代码中发现了这个，直到我找到了罪魁祸首。

10 与行数大致成正比。实际页面位于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 访问导致了 10 秒的延迟（body.appendChild(OBJECT)）。所以我做什么似乎并不重要，只要它是一个与 DOM 相关的动作，它就会受到打击。

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

我怎样才能弄清楚实际发生了什么，以便我可以改进？

4

0 回答 0