0

開発に JavaScript を使用しているときに、フォルダーからすべての画像を取得して独自の方法で表示するフォト ブログや、サーバーからデータを取得し、その場で適用されるすべてのスタイリングとロジックを使用してロードする ajax 呼び出しを行う (または数百行または数千行に及ぶハード ヒット js コードを含むすべてのもの)、JS 開発者がコードをより効率的にすることに集中しているすべての領域は何ですか (パフォーマンスの観点から)。

たとえば、多くのオンライン ギャラリーに出くわします。サーバーから Web サイトに 50 個の画像をロードする必要がある場合、js 開発者が最初に懸念することは何でしょうか。かなりの量のデータを処理する必要がある JS コードのインスタンスを作成するためだけに、これを引き上げています。

私が探しているのは、現在 JS 開発に携わっており、中規模 (または大規模) の js アプリケーションを作成するときに、パフォーマンスを向上させるために何に集中する必要があるかということです。

  1. 使用メモリの面で？
  2. ループを効率的にするという点では？
  3. Jquery や Dojo などのサードパーティ フレームワークの使用に関しては?
  4. デザインと使用されるアルゴリズムに関して（このオプションは常に開いていると思います）

より効率的な JS コードを作成するための提案は、非常に役立ちます。

4

3 に答える 3

2

私の教授は、「良いアルゴリズム、マイクロ最適化は必要ありません」と言っています。

同様の質問がありました。JavaScript の問題は、Web ページに単独で存在しないことです。HTML ( DOM ) と CSS があります。

  1. 使用されるメモリについて - これは基本的な質問です。速度を上げたい場合は、メモリを増やすか、その逆です。トレードオフのウィキペディアです。ある種のバランスを定義する必要があります。私の個人的な意見では (ここのように)、複製のない変数 (オブジェクト) が少なく、よりクリーンなコードが得られ、HTML はよりクリーンになります。DOM コレクションの参照を保持する変数を制限します。

  2. ループについて - ループ自体は問題ではありません。問題はループ内にあります。何かを何度もチェックしないでください。メモ化ウィキペディアを使用します。DOM コレクションの繰り返しには注意してください。時間の経過とともに動的に追加された要素が多数ある場合、処理が遅くなる可能性があります。変数を使用して、現在の状態または位置をキャッシュします (ああ! ここではトレードオフです)。

  3. jQuery のようなサード パーティのライブラリは、すべてのブラウザーで同じことを行うための統一された方法を提供するため、非常に役立ちます。しかし、jQueryUI のように、モジュールに入っているものを探してください。多くの場合、セレクター全体ではなく、jQuery に含まれる sizzleという別のライブラリ内にあるセレクターのみが必要です。とはいえ、私は彼らの支配には反対です。HTML5 は普及しており、ネイティブ機能を提供しています。

  4. アルゴリズムについて - デザイン パターンを使用します。それらは、長年にわたって進化し、テストされ、証明された技術です。クロージャー、グローバル変数を防ぐ名前のない自己実行関数などを使用するように...

もちろん、次のような便利なトリックもあります。

  • コードの縮小
    • YUI コンプレッサー、Google Closure コンパイラーは帯域幅を節約します。
    • 難読化ツールとパッカーもあります。優れたアルゴリズムを使用すると、役立つ場合がありますが、エラーが発生する場合があります!!! ;
    • var doc = document;一部のページでは、 の呼び出しを短縮したようなものを見たことがあるかもしれませんdocument。
  • CDN を使用 - GoogleまたはASPホストから。
  • 画像の最適化 - JPG を最適化してサイズを小さくすることができます (ギャラリーについて)。
  • JavaScript や CSS などの静的コンテンツを別のホストにエクスポートして、Cookie データを何度も送信しないようにします。( ここでのもう 1 つの副作用は、サーバー側の言語をインストールする必要がないことです。http サーバーのみが必要です )

ツールとして、あなたがよく知っているかどうかに関係なく、次のことを知っています。

  • JsLint - JavaScript コード エラーのチェック;
  • JsonLint - json データのエラーをチェックします。
  • JsPerf - スクリプトのパフォーマンスをテストおよび比較します。他のユーザーが考案したテストのリストも含まれています。
  • regexpal - 正規表現ヘルパー;
  • jsfiddle、pastebin など、「貼り付けて共有」するサイトがたくさんあります。
于 2012-05-09T00:19:11.790 に答える
1

パフォーマンスの調整は、非常にアプリケーション固有です。ドナルド・クヌースが言うように、

小さな効率、たとえば約97％の時間を忘れる必要があります。時期尚早の最適化は、すべての悪の根源です。

一般的に、最良のアイデアは、アプリケーションを作成してから、最適化する必要があるものを理解することです。アプリケーションの読み込みに時間がかかりすぎますか？ミニファイアを使用して、大量のリソース（画像など）の読み込みを延期します。CPU使用率が多すぎますか？DOMをバッチではなく、頻繁に更新している可能性があります。実用的なサンプルを入手し、それをプロファイリングするまではわかりません。

サードパーティのライブラリは、プロトタイプをすばやく作成して機能させるための優れたツールです。短所は一般的に1）ペイロードが大きくなる可能性があり、ロード時間が長くなる可能性があります（ただし、これはCDN /キャッシングを使用することで軽減できます）。何が起こっているのか。これは、とにかくCPUの問題が発生している場合にのみ問題になりますが、常にそうであるとは限りません（また、プロファイリングなしで事前に知ることは困難です）。

DOMを変更するたびに、ブラウザーはリフローして、変更に応じてページをどのようにレンダリングするかを理解する必要があります。これが、CSSクラスを使用してスタイルを変更/変更することをお勧めする理由です。スタイルは一度に変更できるためです。一方、スタイルの変更をスタックすると、変更するすべての属性のリフローが意味されます。

これらのタイプのJSパフォーマンスのヒントはたくさんあります。つまり、実際の作業例は、プロファイラー（Chrome開発ツールで利用可能なものなど）とユーザーエクスペリエンスに基づいて表示されているものです。

于 2012-05-08T21:51:28.227 に答える
1

プロファイラーを使用して、パフォーマンスのボトルネックがどこにあるかを測定し、それに対して何ができるかを確認します。

優れたプログラマーでさえ、最終的には間違ったパフォーマンスの議論を構築することに長けているため、最良のプログラマーは推測よりもプロファイラーとテスト ケースを好みます。-- マーティン・ファウラー

于 2012-05-08T21:47:48.667 に答える