jquery - jQuery - 表示/非表示 - 設定済みかどうかを確認

Question

重複の可能性:
Jquery のパフォーマンス: hide() vs is(':visible') - どちらが速いですか?

jQuery.hide() 関数を呼び出す前に、要素が既に非表示になっているかどうかを (独自の条件で) チェックすることは理にかなっていますか? (および jQuery.show() との類推)

関数のソースコードを読むと、要素のプロパティに関係なくオーバーランするように思えます。関数セットの属性をチェックしたり、終了させたりするのに時間がかかりますか?

score 3 · Accepted Answer

これらの種類の質問は、常に実際のパフォーマンステストで最もよく答えられ、jsperfシステムを使用するとテストが非常に簡単になります。

驚いたことに、希望のスタイルがすでに設定されている場合は、設定する前に最初に確認するパフォーマンスサイクル（ChromeとFirefoxの場合）を節約できるようです。

ここでさまざまな組み合わせを確認できます：http：//jsperf.com/hide-vs-check

これら2つのオプションの最も簡単な比較として：

elem.style.display = "none";
elem.style.display = "none";

と

elem.style.display = "none";
if (elem.style.display !== "none") {
    elem.style.display = "none";
}

2番目のオプションは少し高速です。これは、スタイルを設定することは、それがすでにその値に設定されている場合でも、依然としてかなりのコストがかかり、不要なときに設定することを避けるために時間を節約することを示唆しています。

または、2つのオプションのjQueryバージョン：

elem.style.display = "none";
elem$.hide()

と

elem.style.display = "none";
if (elem$.css("display") !== "none") {
    elem$.hide();
}

それでも、目的の状態がすでに設定されている場合は、2番目のオプションの方が高速であることを示しています。

ただし、状態を変更する必要がある場合は、追加のテストによって（明らかに）速度が低下します。ここでの最初のオプションは、条件がtrueと評価された場合に条件に余分な時間がかかるため、2番目のオプションよりも高速です。

elem.style.display = "block";
elem$.hide()

と

elem.style.display = "block";
if (elem$.css("display") !== "none") {
    elem$.hide();
}

score 1 · Accepted Answer

属性のチェックに時間がかかります。最初に jQuery は要素を見つけてから、次のすべてをチェックする必要があります。

それ以外の場合、属性を設定するときは、要素を見つけてプロパティを割り当てる (または上書きする) という 2 つの手順だけです。

2 に答える 2