14

私はmbostock の素晴らしい d3を単純な html レンダリングに使用しています。これは、空の div を選択して HTML で埋めるという、私が考えることができる最も簡単な方法です。

d3.select($('#thediv')[0])
  .selectAll('p')
  .data(l).enter()
  .append('p')
  .html(function(d){return 'd3 ' + d;});

Win7 Chrome では、大規模なデータセットの場合、これが非常に遅いように見えることに気付きました。(20000 アイテムで 3.5 秒)

この例は、非常に単純な (ただし長い) リストをレンダリングします: http://jsfiddle.net/truher/NQaVM/

可視性の切り替えという 2 つの解決策を試しました。

$('#thediv').toggle()

切り離された要素への書き込み:

var p = $('<div>')
d3.select(p[0])...
$('#theparent').append(p)

結果は次のとおりです。

Firefox:一様に高速 (600 ～ 700 ミリ秒)

Chrome:トグルまたはデタッチは高速 (800 ミリ秒)、それ以外は非常に低速 (3.5 秒)

Internet Explorer:デタッチは高速ですが、それでも遅い (1.8 秒)、それ以外は非常に遅い (3.2 秒)

私の質問はこれです:より良い解決策はありますか?

4

1 に答える 1

2

一般に、DOM 操作を行うときに遅くなる 2 つのことは、DOM ツリーの変更とブラウザーの再描画です。

可視性の切り替えを使用すると、最新の最適化された DOM エンジンでブラウザーの再描画を回避できます。ただし、DOM ツリーをインラインで変更する代償は引き続き支払うことになります。

切り離された要素を編集すると、再描画が不要になるだけでなく、DOM の更新に料金を支払う必要がなくなります。

いずれの場合も、2 番目のオプションであるフロー外の DOM 操作の方が高速であるか、最悪の場合でも同程度の速さです。ブラウザー間の速度の相対的な違いは、おそらく DOM と Javascript エンジンの違いによるものです。これについてより多くの洞察を与えるかもしれないいくつかのベンチマークがあります。

DOM 操作自体の速度に加えて、ループの展開やその他の最適化(Jeff Greenberg による) を調べて、実際のスクリプトが実行する作業を最小限に抑えることができます。それ以外は、すでに正しく行っています。

ブラウザの内部について詳しく知りたい場合は、ブラウザの内部に関するhtml5rockの長い記事を挑戦的に見てください。ウェブページで JavaScript を高速化する方法について、 Google 開発者向けのすばらしい記事もあります。

于 2013-01-27T11:50:43.297 に答える