3

私が取り組んでいるこのプロジェクトでは、要素のリストがあり、それらを「グラフ」に変換します（真のグラフではありませんが、疑似グラフと呼ぶことができます）。私は自分のデータセットを持っています。データに対してforループを実行しli、それぞれの要素を作成し、 create と parent を作成しul、lis を追加してから、既にページにある別の DOM 要素 (祖父母と呼びます) に親を追加します。 . その後、ユーザーの操作に基づいてそのリストを更新する必要があります。
また、これはすべて jQuery を使用するコンテキストにあります。

さて、私の質問は、要素を一度作成してから、後続の各呼び出しで結果の HTML を更新する方が速いですか、それとも、各要素、empty()祖父母要素 (親を取り除くul) を再作成してから、新しく再追加する方が速いですか?作成されましたulか（私は今やっています）？

s を再作成するときli、それらは DOM にまったくないため、再作成中に再描画/リフローが発生しないことに注意してください。再描画は、新しく作成した を再追加したときにのみ発生しulます。

同僚と話したところ、HTML 要素を毎回再作成するよりも、一度作成したら更新する方がよいとのことでした。私はこのルートに行くことを考えていましたが、既存liの を更新すると、実際にはたとえば 50 個の要素が再描画されempty()、新しく作成されulた .

考え？

4

2 に答える 2

2

rsp が言うように、どのソリューションが最速になるかは、マークアップの構造と実行中の特定のブラウザーの両方に依存するため、ソリューションをプロファイリングする必要があります。もちろん、現在の速度に不満がある場合にのみ、このすべての努力を行う価値があります。

ただし、3 つの基本的なアプローチがあり、それぞれが最速である可能性があります。1 つ目は 1 回の再描画のみを行います。親ノードを適切に選択すれば、残りは2つだけです。

  1. 新しいコンテンツを HTML 文字列 ( [...].join("")) として作成し、 で適用し.html()ます。 長所:通常、方法 2 よりも高速です。 短所:必ずしも多くはありませんが、古い jQuery データ/イベントが残る可能性があります (つまり、注意しないとリークする可能性があります)。

  2. ドキュメントの外側で jQuery を使用して新しいコンテンツを作成し(たとえば、すべて<li>の を に入れ、作成が完了したら をドキュメントに <ul>挿入します)、通常の内容を挿入します。長所:方法 1 よりも読みやすい傾向があります。 短所:マークアップが複雑になるほどパフォーマンスが低下します。<ul>

  3. ドキュメントから既存のノード (理想的には、 のような単一の親ノード<ul>) を削除し、変更を行ってから、それらを再挿入します。長所:特に複雑なマークアップでは、方法 2 よりも明確でパフォーマンスが高い可能性があります。 短所:レンダリング間で要素の数が変わると、はるかに複雑になります。

最初の削除と最後の挿入のみがドキュメントに影響を与えるため、最後のものは、多数の変更を行っているにもかかわらず、2 回の再描画のみを引き起こします。ドキュメント外の要素を変更しても、再描画は発生しません。

于 2011-03-05T17:26:26.543 に答える
1

最初にコードをプロファイリングすることをお勧めします。時期尚早の最適化は諸悪の根源です。

于 2011-03-05T16:59:47.613 に答える