質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

547閲覧

JavaScriptで「ある性質を有する要素の存在を確認する方法」で、最速なのはどれで、なぜか?

nikuatsu

総合スコア177

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2022/10/05 04:07

前提

ul > liに対し、「ある性質を有する要素の存在を確認する方法」で最速のものを調べています。
存在するとき、しないときの処理の分岐を速くしたいためです。

実現したいこと

最速な方法と、理由を知りたいです。

発生している問題

自分なりに試した結果が以下のようにあり、どうやら「クラスを有する」の方が「データ属性を有する」よりも早いようなのですが、なぜそうなるのか?具体的な理由がわかりません。

該当のソースコード

テストデータは次のようにして、ul > liをセットした後に、randの位置に1件だけ対象の要素を入れておきます。
この対象の要素を探す方法で最速なものを調べているということです。

JavaScript

1// テストデータをセット 2(()=>{ 3 $('body').append('<ul></ul>'); 4 5 // n件のデータをセット 6 const n = 10000; 7 let lis = ''; 8 for ( let i = 0; i < n; i++ ) { 9 lis += '<li></li>'; 10 } 11 $('ul').html(lis); 12 13 // 目的のデータを1つだけ指定 14 const rand = Math.floor(Math.random()*n+1) 15 $('ul > li').eq(rand) 16 .attr('data-state','ok') // データ属性で対象を指定 17 .addClass('is_ok'); // クラスで対象を指定 18 19})();

試したこと

以下4つの方法で試しました。「全件へのlength」「:firstへのlength」「クラスを有する」「データ属性を有する」というマトリクスです。

JavaScript

1// 目的のデータの存在確認にどれが早いか 2logFuncTime( logTimeByAllDatas ); // 「全件へのlength」「データ属性を有する」 3logFuncTime( logTimeByAllClasses ); // 「全件へのlength」「クラスを有する」 4logFuncTime( logTimeByFirstDatas ); // 「:firstへのlength」「データ属性を有する」 5logFuncTime( logTimeByAFirstClasses ); // 「:firstへのlength」「クラスを有する」 6 7// 「全件へのlength」「データ属性を有する」 8function logTimeByAllDatas(){ 9 if( $('ul > li[data-state="ok"]').length ){ 10 // okが存在するときの処理をごにょごにょ 11 }else{ 12 // okが存在しないときの処理をごにょごにょ 13 } 14} 15 16// 「全件へのlength」「クラスを有する」 17function logTimeByAllClasses(){ 18 if( $('ul > li.is_ok').length ){ 19 // okが存在するときの処理をごにょごにょ 20 }else{ 21 // okが存在しないときの処理をごにょごにょ 22 } 23} 24 25// 「:firstへのlength」「データ属性を有する」 26function logTimeByFirstDatas(){ 27 if( $('ul > li[data-state="ok"]:first').length ){ 28 // okが存在するときの処理をごにょごにょ 29 }else{ 30 // okが存在しないときの処理をごにょごにょ 31 } 32} 33 34// 「:firstへのlength」「クラスを有する」 35function logTimeByAFirstClasses(){ 36 if( $('ul > li.is_ok:first').length ){ 37 // okが存在するときの処理をごにょごにょ 38 }else{ 39 // okが存在しないときの処理をごにょごにょ 40 } 41} 42 43// 指定の関数が何秒かかったか確認 44function logFuncTime( func ){ 45 // 実行開始日時を取得 46 const startTime = performance.now(); 47 48 // 指定の関数をn回実行 49 const n = 1000; 50 for ( let i = 0; i < n; i++ ) { 51 func(); 52 } 53 54 // 何秒かかったか確認 55 const endTime = performance.now(); 56 const time = endTime - startTime; 57 const second = time/1000; 58 59 // 0.1秒を超えたら赤く、越えなければ青くしてログに出力 60 const logStyle = second > 0.1 ? 'background-color:#ff9999;' : 'background-color:#c9d0ff;'; 61 const logData = n + ' 回 ' + func.name + ' を実行\n' + second + ' 秒'; 62 console.log('%c' + logData, logStyle); 63}

実行すると「データ属性を有する」の2つが遅くなりがちかと思います。
https://jsfiddle.net/bhrg21ou/

私は1件だけ走査すれば済む「:firstへのlength」のlogTimeByFirstDataslogTimeByAFirstClassesが早くなるだろうと予想していたのですが、どうして「クラスを有する」のlogTimeByAllClasseslogTimeByAFirstClassesが早くなるのでしょうか?

逆に「データ属性を有する」の2つがなぜ遅いのか理由も知りたいです。
よろしくお願い致します。

kemusi👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nikuatsu

2022/10/05 05:28

m.ts10806さん、ご指摘痛みいりますが、文章がないとわからないので、もしよろしければ何がいけなかったのか教えてくださいませ…
guest

回答2

0

:first が速くない理由

:first は jQuery 独自の擬似クラスで、これがセレクタに入っているとブラウザ内蔵のネイティブコードによる querySelectorAll() が使われずに jQuery 内蔵の JavaScript 実装が使われます。

クラスが他の属性より速い理由

クラスによるマッチングが他の属性によるマッチングよりはるかに頻繁に使われるため、ブラウザのネイティブ実装はクラスのマッチングが速くなるように最適化されています。
以前 Safari と Chrome の実装を見たときは、要素からクラス名を取り出すのがO(1)、クラス名以外の属性値を取り出すのが O(N) (Nは要素が持つ属性の数)でした。


パフォーマンスがそれほど気になるなら、jQuery は論外です。いっさい使ってはいけません。

投稿2022/10/05 04:46

int32_t

総合スコア21065

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nikuatsu

2022/10/05 04:51

ただいま拝読致しました。詳しいご回答を誠にありがとうございます。クラスが早い理由についてより詳細に理解できました。そもそもjQueryはパフォーマンス的に微妙なのですね…
nikuatsu

2022/10/05 05:35

> クラスのマッチングが速くなるように最適化されています そうなると、データ属性を積極的に使うケースってあるのでしょうか?JSONを持たせたいときくらいですかね?
int32_t

2022/10/05 06:55

たしかに data-state="ok" より class="data-state-ok" を使ったほうが querySelectorAll() は速いのでしょうけど、 多くの人は速度差を気にしてないとか、 model であるデータ構造は別にあって view である HTML に 'ul > li[data-state="ok"]' というクエリをかけるのが稀とかかもしれません。
nikuatsu

2022/10/05 07:37

データ構造はHTMLと別に持っておくのが定石みたいな感じなのですね。いつもHTMLから取っていました。見直してみます。ご返信ありがとうございました。
guest

0

ベストアンサー

:firstというのは、正式なDOMに存在しない、jQuery専用のセレクタです(jQuery公式)。

このようなセレクタが含まれていると、DOMのquerySelectorAllに直接投げることができず、JavaScriptコードでセレクタを処理する必要が出るので遅くなります。

1個だけ検索したいのであれば、最速なのはネイティブのquerySelectorです。logTimeByAFirstClassesより数倍速いです(jsFiddle)。

投稿2022/10/05 04:34

編集2022/10/05 04:43
maisumakun

総合スコア145208

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2022/10/05 04:51 編集

「jQuery内部のセレクタエンジンを使う前提であれば」、クラスで当てはまるもののほうがgetElementsByClassNameを使えるので速くなります。 とはいえ、jQueryによるセレクタ処理は、速度が最重要な場面で使うべきものではありません。
nikuatsu

2022/10/05 04:45

querySelectorが早いとは、ありがとうございます。活用させて頂きます。 :firstを使っても早くならない理由も理解できました。 ところで、質問でも、リンクを貼って頂いた2つでもですが、クラスの方がデータ属性より早いのはどうしてなのでしょうか?
nikuatsu

2022/10/05 04:48

> 「jQuery内部のデレク他エンジンを使う前提であれば」、クラスで当てはまるもののほうがgetElementsByClassNameを使えるので速くなります。 すれ違いで拝読いたしました。クラスの方がデータ属性より早い理由はこれですね。ありがとうございます。 > jQueryによるセレクタ処理 すみません、用語の理解があいまいで… 「jQueryによるセレクタ処理」というのは、「クラス指定」ではなく「データ属性指定」という意味でよろしかったでしょうか?
maisumakun

2022/10/05 04:52

> 「jQueryによるセレクタ処理」というのは、「クラス指定」ではなく「データ属性指定」という意味でよろしかったでしょうか? いえ、$(’セレクタ文字列’)と書くものすべてです。
nikuatsu

2022/10/05 04:55

なるほど、そもそもjQueryで要素を取得するのは遅いということですね。ご返信ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問