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

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

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

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

jQuery

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

解決済

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

nikuatsu
nikuatsu

総合スコア172

JavaScript

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

jQuery

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

2回答

1リアクション

1クリップ

296閲覧

投稿2022/10/05 04:07

前提

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

実現したいこと

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

発生している問題

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

該当のソースコード

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

JavaScript

// テストデータをセット (()=>{ $('body').append('<ul></ul>'); // n件のデータをセット const n = 10000; let lis = ''; for ( let i = 0; i < n; i++ ) { lis += '<li></li>'; } $('ul').html(lis); // 目的のデータを1つだけ指定 const rand = Math.floor(Math.random()*n+1) $('ul > li').eq(rand) .attr('data-state','ok') // データ属性で対象を指定 .addClass('is_ok'); // クラスで対象を指定 })();

試したこと

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

JavaScript

// 目的のデータの存在確認にどれが早いか logFuncTime( logTimeByAllDatas ); // 「全件へのlength」「データ属性を有する」 logFuncTime( logTimeByAllClasses ); // 「全件へのlength」「クラスを有する」 logFuncTime( logTimeByFirstDatas ); // 「:firstへのlength」「データ属性を有する」 logFuncTime( logTimeByAFirstClasses ); // 「:firstへのlength」「クラスを有する」 // 「全件へのlength」「データ属性を有する」 function logTimeByAllDatas(){ if( $('ul > li[data-state="ok"]').length ){ // okが存在するときの処理をごにょごにょ }else{ // okが存在しないときの処理をごにょごにょ } } // 「全件へのlength」「クラスを有する」 function logTimeByAllClasses(){ if( $('ul > li.is_ok').length ){ // okが存在するときの処理をごにょごにょ }else{ // okが存在しないときの処理をごにょごにょ } } // 「:firstへのlength」「データ属性を有する」 function logTimeByFirstDatas(){ if( $('ul > li[data-state="ok"]:first').length ){ // okが存在するときの処理をごにょごにょ }else{ // okが存在しないときの処理をごにょごにょ } } // 「:firstへのlength」「クラスを有する」 function logTimeByAFirstClasses(){ if( $('ul > li.is_ok:first').length ){ // okが存在するときの処理をごにょごにょ }else{ // okが存在しないときの処理をごにょごにょ } } // 指定の関数が何秒かかったか確認 function logFuncTime( func ){ // 実行開始日時を取得 const startTime = performance.now(); // 指定の関数をn回実行 const n = 1000; for ( let i = 0; i < n; i++ ) { func(); } // 何秒かかったか確認 const endTime = performance.now(); const time = endTime - startTime; const second = time/1000; // 0.1秒を超えたら赤く、越えなければ青くしてログに出力 const logStyle = second > 0.1 ? 'background-color:#ff9999;' : 'background-color:#c9d0ff;'; const logData = n + ' 回 ' + func.name + ' を実行\n' + second + ' 秒'; console.log('%c' + logData, logStyle); }

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

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

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

kemusi👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/05 04:20

こちらの質問が他のユーザーから「問題・課題が含まれていない質問」という指摘を受けました。

nikuatsu

2022/10/05 05:28

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

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