ジャバスクリプト/ DOM - どのように高価なDOMノードを再配置対作成されましたか?

StackOverflow https://stackoverflow.com/questions/554128

  •  23-08-2019
  •  | 
  •  

質問

私が書いたソート可能なテーブルを最適化しようとしています。ボトルネックは、DOM操作です。私は現在、新しいテーブルの行を作成し、それらに私はテーブルをソートするたびに挿入しています。私は、単純なノードを再作成いない、行を並べ替えることによって物事をスピードアップすることができるかもしれません場合、私は思ったんだけど。これは大きな違いを作るためには、DOMノードの並び替えは、ノード作成するよりも多くのきびきびなければならないであろう。これはそうですか? おかげで、 -Morgan

正しい解決策はありません

他のヒント

私は、作成や操作が高速であるかどうかわからないが、私はあなたはそれがページにないとき、表全体を操作して、一度にすべての上に置いた場合、それはより速くなるだろうことを知っています。これらの線に沿って、それはおそらく、テーブル全体が最初にDOMから削除されない限り、代わりに既存の行を再配置する遅くなります。

このページが示唆それは、現在のテーブルのクローンを作成し、あなたが望むようにそれを操作するために最速のだろうということ、そして、DOMにテーブルを交換ます。

私はむしろ、ノード1・バイ・バイを挿入するよりも、文字列として内容全体を構築し、innerHTMLプロパティを使用して、今の約2倍早くこのテーブルを描いています。

あなたは、いくつかのベンチマークのための便利なこのページを見つけることができます:

http://www.quirksmode.org/dom/innerhtml.htmlする

あなたができれば、ない、実際のDOM操作としてではなく、スクリプト内のメソッドのいくつかの並べ替えとして、その後、DOMを操作するDOM操作を行うことをお勧めします。そうではなく、すべての単一ノード上の再描画と呼ばれるものを行うよりも、あなたは、独自のメソッドにすべての単一ノード上の再描画されて、その後、その後、その結果、実際のDOMに取り付けられる親にそれらのノードを接続していたものを凝集しますちょうど2つの再描画ではなく、数百人。私は2つのB / Cあなたは新しいデータで更新する前に、既にDOMにあるもののクリーンアップする必要があります。

と言います

私はこの答えを探していたと迅速なベンチマークます。http:// jsfiddle .NET / wheresrhys / 2g6Dn / 6 / の

これはとても純粋なベンチマークではありません、それはおそらく、あまりにも他の方法で歪んだ、jQueryのを使用しています。しかし、それが与える結果は、DOMノードを移動するように速く作成し、DOMをdetroyingの約2倍であるたびに、ノードということです。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top