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