我有以下 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 年代发生了什么,所以我只能猜测它与渲染我在页面中插入的树有关。但我可能错了。
我怎样才能弄清楚实际发生了什么,以便我可以改进?