次の 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 (Ubuntu では 13) ではsome_DOM_call()非常に遅くなります (JS 全体が 1 秒未満で実行される場合、250 行で約 10 秒)。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 秒間に何が起こっているかを表示しないので、ページに挿入したツリーのレンダリングに関連しているとしか推測できません。しかし、私は間違っているかもしれません。
実際に何が起こっているのかを把握して、物事を改善するにはどうすればよいですか?