現在、表形式の Web UI を作成しています。タブは上部に配置され、同じ共通領域を共有して関連データを表示します。
3 つの質問があります。
DOM 要素の挿入と削除はコストのかかる操作ですか?
DOM要素の挿入と削除にそれぞれjQuery
append()
とメソッドを使用できますか?remove()
それらが高価な場合、効率的な代替手段は何ですか
show()
、hide()
または他に何かありますか?
現在、表形式の Web UI を作成しています。タブは上部に配置され、同じ共通領域を共有して関連データを表示します。
3 つの質問があります。
DOM 要素の挿入と削除はコストのかかる操作ですか?
DOM要素の挿入と削除にそれぞれjQueryappend()
とメソッドを使用できますか?remove()
それらが高価な場合、効率的な代替手段は何ですかshow()
、hide()
または他に何かありますか?
「興味がありました... dom 要素の挿入と削除はコストのかかる操作ですか?」
ほとんどのブラウザは無料でそれを行います。真剣に、ブラウザにページを再描画させる操作は、やりすぎると「コストがかかる」可能性があります。表示/非表示でも再描画が発生しますが、(テストはしていませんが) 追加/削除よりも少し速いと思います。
あなたが説明するタブインターフェースは、おそらく一度にかなりの数の要素を追加/削除する必要があります.
「jquery の append メソッドと remove メソッドは、dom 要素操作をそれぞれ挿入および削除していますか?」
はい。(メソッド名がこれを明確にしない場合は、ドキュメントを参照してください。)
「それらが高価な場合、効率的な代替手段は何ですか...表示と非表示、他に何かありますか?」
.show()
andを使用すると.hide()
、追加して削除する必要がある場合よりも JS がはるかに簡単になる可能性があるため、私の好みです。既に述べたように、要素のグループを一度に表示/非表示にする必要があるタブタイプのインターフェイスでは、現在のタブのすべての要素を含む div を表示/非表示にすることができます。子要素は、親と一緒に表示/非表示になります。
また、jQuery.show()
や.hide()
その他のアニメーション メソッドを使用する.fadeIn()
と.fadeOut()
、タブ間に素敵なトランジションを追加できます。
一般的な意味では、最初に必要な効果をコーディングし、うまく機能しないことがわかった場合は後でより効率的にすることを心配します。
jQuery.remove は、DOM から要素を削除する以上のことを行うことに注意してください。ドキュメントから、「要素自体に加えて、要素に関連付けられたすべてのバインドされたイベントと jQuery データが削除されます。」したがって、これは単純な DOM 操作よりもコストがかかります。