私は大量のDOM操作が再ペイントを引き起こすために悪いことを認識しています。
しかし、何かのように何をするか
var container = $("<div />");
{repeat:20}
container.append(<div>content</div>);
{endrepeat}
$("#actualElement").html(container.html());
DOM操作でなくても悪いですか?
回答:
回答№1は2いいえ、そうです container
DOMには添付されません。これは、DOMに多くの要素を追加するための好ましい方法です。
しかし、 html()
すべてのイベントハンドラまたは data
要素に追加します。あなたがそれらを保持したい場合、これを使用することを検討してください:
$("#actualElement").empty().append(container.children());
あなたはまた、 DocumentFragementしかし、あなたはjQueryを使用しているので、私はjQueryに固執します。
更新: 実際の質問に答えるには:はい、それはDOMの操作ですが、DOMには一度しか追加できません。
回答№2の場合は0
いいえ、悪くないです。
または、再描画に関するDOM操作よりも悪い(またはそれ以上)ではありません。実際、あなた は DOMを操作する。
あなたが単にDOMを操作するだけではないと仮定します楽しい、あなたはおそらくそうする目的があります。 DOM操作を必要としない他の解決策がある場合、それらはより良いかもしれませんが、見つからない場合(または見つからない場合)、正確に必要な場合にこの解決法をどうすることができますか?
回答№3の場合は0
はい、それはDOM操作です。しかし、コンポーネントを1つずつ挿入するよりも早くなる可能性があります。
しかし、ほとんどのブラウザでは、再構築/再リフローは1回だけ(ビルドされた構造を挿入するとき)行う必要があります。
ただし、それをベンチマークし、他のオプションと比較する必要があります(HTMLを文字列として挿入するなど)。
回答№4の場合は0
まあ、もちろん、あなたは DOM 新しいノードを挿入して作成します。これにより、おそらく リフローかなり遅いですが、おそらく「悪い」ではありません。
マークアップを作成/変更する場合は、そのトレードオフを取る必要があります。
私のコメントで述べたように、おそらく間違っている"良い"か "悪い"のような言葉でそれについて考えることができます。 DOMのJavascriptでオンザフライで何かを変更したいのであれば、ある時点でリフローする方法はありません。あなたがすることができるのは、避けることだけです 不必要 リフロー/再塗装のみを行うことによって 1つのDOMアクセス あなたの仕事の残りを思い出に残してください。