javascript - これら 2 つの JS コードの実行効率の比較

Question

＃＃＃テスト環境＃＃＃ リーリー

この質問が提起された理由は、ウェブストームからの警告メッセージのためです。

リーリー

上記のコードはウェブストームの終了時に警告を報告します。警告情報は次のとおりです:

リーリー

エラーメッセージによると、私が考えた解決策は、同じセレクターで取得したJSオブジェクトを変数を使用して置き換えることでした。 リーリー

もちろん、警告はありません。

コードでは実行効率について言及しているため、これら 2 つのコードの実行時間もテストしました。

同じ操作を 10,000 回実行し、3 回テストしました。最初のコードの合計実行時間は 1372 でした。 、1339、1423

コードの 2 番目の部分の合計実行時間は、それぞれ 1407、1277、および 1403 です。
テスト後、警告はありませんが、実行効率は改善されていません。

そして、私は最近ある企業でインターンをしていました。その企業のコードを見てみましたが、2 番目のコードと似たものはありませんでした。セレクター操作を繰り返し実行するコードが無数にありました。

私の問題は、2 番目のコードの最適化がまったく必要ないということです。逆に、変数が 1 つ増えると、保守の難易度が事実上増加します。

以下の回答を読んでください:

次のコードのテストを追加します

---

リーリー

3 つのテストの結果は、1338 1348 1404 です。まだ改善はありません。

Answer 1

何が間違っているのかは他の回答によって指摘されています。
一つ言っておきますが、大幅な効率の向上が見られない理由は、実際には、これらの低レベルのエラーのほとんどは、次の宣言を行うことで最適化できるからです。変数を繰り返し宣言しても、1 億回宣言すると 1 回に最適化され、実行に関しては違いはありません。
js のパフォーマンスに実際に影響を与える可能性があるものはそれほど小さな点ではありませんが、コーディングの考え方の向上はパフォーマンスの小さな向上よりもはるかに重要であるため、それを無視できるという意味ではありません。

Answer 2

var result_logo=$('#result_logo') はループ本体の外側に記述する必要があります。js コードを記述するときは、変更されない jquery オブジェクトをキャッシュするようにしてください。
プロジェクト コードには繰り返し記述されるメソッドが多数あります。の書き方が最適です

Answer 3

あなたが次のような場合:

リーリー

これは最適化できます。ただし、記述する変数は常に jquery オブジェクトです。変数の使用と $() は同じです

。

Answer 4

最新のブラウザはすべて最適化されており、効率を実際にテストするには、IE8 9 と 10 を試して、違いが大きいかどうかを確認してください。また、セレクターはIDセレクターですが、クラスセレクターに変更すると効率の比較が出てきます。

Answer 5

いつ操作しても印刷内容は同じ、Chrome のキャッシュ機構が最適化されました

Answer 6

エラーの理由は次の文にあると思います: warns about duplicated selectors which could be cached.、変数宣言をループの外に書いてみてください

Answer 7

ラベルを取得し、ループ本体内で変数を宣言するコードを書きましたが、これでは明らかに状況は改善されませんでした。

リーリー

理論的には、この方法で書くことで状況を少し改善できますが、テスト方法はまったく科学的ではなく、コードの効率を完全に反映することはできません。コードの効率に依存するだけでなく、ネットワーク速度にも関係するため、反映された結果は正確ではありません。