13

$("[data-something]")クラスごとに選択するのではなく、さまざまな API を利用する多くの例 (お気に入りの Twitter のブートストラップを含む) を見てきました。$(".something")

それにもかかわらず、これら 2 つの異なるセレクター間のパフォーマンスに関する情報を見つけようとしました。多くのパフォーマンス テストで、これらのセレクターが最新のブラウザーのほとんどで同等に高速であることが判明したことに驚いたので、独自のテストを行うことにしました。

私は今本当に混乱しており、間違って行われたのは私のテストなのか（どういうわけか？）、それとも以前に検査した他のテストなのかわかりません。

テスト中に何か間違ったことをしている場合、またはこれらのテストが正しく、データ属性セレクターが実際には通常のクラスセレクターよりもかなり遅い場合、誰かがより多くの情報を提供できますか?

ありがとうございました

4

1 に答える 1

6

属性セレクターを使用する場合、ブラウザーの querySelector サポートによってパフォーマンスが異なる場合があります。jQuery は組み込みライブラリ (SizzleJS と呼ばれる) にフォールバックしますが、これは非常に低速です。

クラス名の選択は、すべての一般的なブラウザーで一般的にサポートされている getElementsByClassName を常に使用するため、高速になります。

私の見方では、クラスはデータ属性とは異なる目的を果たします。クラスは要素を「分類」して、適切にスタイルを設定し、構造を作成できるようにします。

データ属性はまさにそれです: データ。要素に追加のデータを格納する必要がある場合があります。例えば：

<table>
    <tr data-id="4" data-category="1">
        <td>Name</td>
        <td>Email</td>
    </tr>
</table>

同じ理由で、通常の「id」属性を使用していないことに注意してください。

于 2013-07-23T21:47:38.440 に答える