2

定期的に更新してモバイルデバイス（主にモバイルwekbkitブラウザー）に表示する必要がある数百のアイテムリストがあります。リストサーバー側全体を生成し、ユーザーの画面をで更新する方が簡単ですinnerHTML。リストは主に画像のサムネイルです。小さなモバイルCPUで画面がちらつきすぎたり、ドラッグしすぎたりしたくありません。私の質問は、リストを更新したり、クライアント側で並べ替えたり、リスト全体を更新したりした場合に、何が優れているかという<ul>ことinsertBeforeですinnerHTML。

4

4 に答える 4

5

最良の答えは、両方の方法で記述し、ターゲット ブラウザーでプロファイリングすることです。

ただし、これに関する以前の実験では、大きな更新を行う場合innerHTML、DOM インターフェースを介して作業するよりも著しく高速であることが一般的にわかりました。これは理にかなっています: 基本的に、ブラウザーは HTML を内部構造に解析し、結果を表示します。それが彼らの存在理由であり、彼らはそれを行うために高度に最適化されています. 対照的に、多くの DOM 呼び出しでは、ブラウザーの内部構造に適しているかどうかに関係なく API を介して、JavaScript/ブラウザーの内部インターフェイスを何度も移動する必要があります。もちろん、今日の状況は数年前とはかなり異なります。DOM の更新は、以前よりもはるかに一般的になり、はるかに高速になりました。

しかし、繰り返しになりますが、これは何をしているかやターゲット ブラウザによって大きく異なるため、それぞれの方法で代表的なテストを作成し、経験的に調べるのが最善です。

于 2012-05-21T11:06:16.243 に答える
0
  1. それはブラウザの実装に依存します。これには定義も経験則もありません。
  2. 誰もが違いに気付くとは思えません。

したがって、最も使いやすいものを選択してください。これについて議論するために貴重な時間を無駄にしないでください。

于 2012-05-21T11:04:45.237 に答える
0

パフォーマンスが必要な場合は、この方法で実行できます

  1. DOM ツリーから親ノードを削除します (UL または UL の親 ....)
  2. insertBefore または innerHTML を介して、すべての子 (LI) をリストに追加します。innerHTML の方が速い
  3. 親を DOM に追加します。

親を DOM から削除するのはなぜですか? パフォーマンス！ブラウザは、ページを 2 回だけレンダリングします。それ以外の場合は、DOM 操作ごとにページをレンダリングします-挿入ごとに!

于 2012-05-22T07:12:35.140 に答える
0

次のページを参照してください: http://www.quirksmode.org/dom/innerhtml.htmlいくつかのモバイル デバイスでテストを実行し、数値を取得します。

ただし、パフォーマンスが気になる場合は、サーバー側で並べ替えてクライアントに送信しないでください。そうすれば、各ノードをどちらの方法でも追加できますが、モバイル デバイスは並べ替える必要はありません。

于 2012-05-21T11:09:29.933 に答える