ホームページ > 記事 > ウェブフロントエンド > Javascript 関数を高速化するにはどうすればよいですか
最近のプロジェクトで、効率がまだ不十分な機能に遭遇しました。この関数は 2 つのマップ ループ、3 つのフィルター (それぞれにインクルードを伴う)、および組み込みの検索を備えた追加のマップを実行し、合計 12 回の反復を実行しました。これらのメソッドの一部 (フィルターなど) は配列全体を走査する必要はありませんが、特に大量の項目の場合、この操作は依然としてかなりのコストがかかりました。
この関数の複雑さは O(n * m) であり、プロジェクトが拡大するにつれてすぐに問題になる可能性があります。
そこで、この関数を最適化することにしました。私がとった最初のステップは、2 つのキー配列を Set に置き換えることでした。 JavaScript では、Set は一意のデータを格納する構造であり、配列よりもはるかに高速な存在チェックを提供します。配列の複雑度が O(n) であることを確認すると、Set では O(1) になります。さらに、Set.has メソッドは、Array.includes とは異なり、Set 内のデータ数が増加してもパフォーマンスが低下しません。
この変更により、アレイ上で動作するフィルターはすでに大幅に改善されています。ただし、マップの 1 つには、最適化できる Array.find() もありました。 JavaScript では、Map はインデックス付きリストですが、Array.find は線形検索を実行するため、コードが実行されるプロセッサのパフォーマンスに応じて、Map よりも 2,100 ~ 12,000 倍遅くなる可能性があります。
ループの 1 つで Array.find を Map.get に置き換えることで、反復の合計数を 12 から 9 に減らすことができました。 3 つのループの削減はそれほど重要ではないように思えるかもしれませんが、アルゴリズムの複雑さはさらに大きくなりました。 O(n m)、関数の実行時間は 96% も短縮されました!
Intel Core i7-10510U で実行されたテストでは、配列を使用した関数の実行は、5,000 項目の配列を使用した Map および Set を使用した実行より 28 倍の時間がかかりました (191.19 ミリ秒から 6.80 ミリ秒)。
配列を使用した元のアルゴリズムの複雑さは O(n * m) でしたが、実行時間は項目数に応じて指数関数的に増加したことに言及する価値があります。ソフトウェア開発シナリオでは、ビジネスの成長とコードが実行されるマシンの制限を考慮することが重要です。たとえば、配列が 50,000 項目に増加した場合、元のアルゴリズムの実行時間は 13,585 ミリ秒ですが、Set と Map を使用して最適化されたアルゴリズムでは 135 ミリ秒しかかかりません。この場合、元のアルゴリズムは 100 倍遅くなり、最適化により実行時間が 99% 削減されることがわかります。
情報取得に関しては、Array と比較して Set と Map の速度の優位性を考慮すると、Array.filter や Array.find などの繰り返しでこの情報を確認する必要がある場合、Set または Map を作成するための繰り返しのコストは正当化されます。
ただし、シーケンシャルな順序付けができない、インデックスによる要素への直接アクセスが不可能、重複した要素を保存できないという制限など、いくつかの欠点があるため、Set の使用が常に実行可能であるとは限りません。
これらの制限にもかかわらず、多くの状況において、配列を Set または Map に置き換えることは、パフォーマンスと効率の点で大きな利点をもたらします。
以上がJavascript 関数を高速化するにはどうすればよいですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。