JSでパフォーマンスを改善する

Question

開発にはjavascriptを使用している間に、フォルダからすべての画像を取得し、すべてのユニークな方法で表示したり、サーバーからデータを取得してすべてのスタイリングとロジックがオンザフライで適用されます（または、数百行または数千に及ぶjsコードを激しくぶつけることを含む）、JS開発者がコードをより効率的に（パフォーマンスの面で）作ることに集中するすべての領域は何ですか。

たとえば、多くのオンラインギャラリーがあります。自分のサーバーから50個の画像をウェブサイトに読み込まなければならない場合、最初にjs開発者の関心事になるものは何でしょうか。私はJSコードのインスタンスを作るためにこれを取り上げています。かなりの量のデータを処理する必要があります。

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

1. メモリの面では、
2. ループを効率的にするという点では、
3. JqueryやDojoのようなサードパーティのフレームワークを使用するという点では、使用される設計とアルゴの面では
4. 大きな助けになり、より効率的なJSのコードを書くことで

任意の提案（私はオープン、このオプションが常にあると思います）。

Answer 1

パフォーマンスチューニングは非常に非常にアプリケーション固有のものです。時期尚早の最適化は一般的にすべての悪

のルートである、最高のアイデアは、あなたのアプリケーションを作成することです：ドナルド・クヌースsays、

として、我々は時間の約97％を言う、小さな効率を忘れなければなりませんあなたが行くにつれて最適化する必要があるものを把握してください。アプリケーションの読み込みに時間がかかりますか？ minifierを使用し、重いリソース（イメージなど）の読み込みを遅らせる。 CPU使用量が多すぎますか？おそらく、バッチではなくDOMを頻繁に更新しているかもしれません。あなたは働いているサンプルがあるまで分かりません。

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

DOMを変更するたびに、ブラウザはリフローして、ページをどのようにレンダリングするかを把握する必要があります。そのため、CSSクラスを使用してスタイルを変更/変更することをお勧めします。スタッキングスタイルの変更は、変更するすべての属性のリフローを意味します。

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

Answer 2

profilerを使用して、パフォーマンスのボトルネックがどこにあるかを測定し、次にそれらについて何ができるかを確認します。

であっても良いプログラマーが間違っている終わるパフォーマンス 引数を構築するに非常に優れているので、最高のプログラマは憶測に プロファイラとテストケースを好みます。 - Martin Fowler

Answer 3

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

questionがありました。 JavaScriptの問題は、Webページだけでは存在しないということです。 HTML（DOM）とCSSがあります。

1. これは基本的な質問です。スピードを上げたい場合は、メモリを増やす必要があります。これはトレードオフ^wikipediaです。何らかのバランスを定義する必要があります。私の個人的な意見では（hereのように）クローンなしのより少ない変数（オブジェクト）でよりクリーンなコードを得ることができ、HTMLはより洗練されたものになります。 DOMコレクションの参照を保持する変数を制限する。

2. ループについて - ループ自体は問題ではありません。ループの内部に問題があります。繰り返し何かを確認しないでください。メモの使用^wikipedia DOMコレクションの反復に注意してください。時間の経過とともに要素が動的に追加されると、時間がかかることがあります。変数を使用して現在の状態または位置をキャッシュします（ここではああ！）。彼らはすべてのブラウザで同じことを行うための統一された方法を提示するようにjQueryのような

3. サードパーティのLIBSは本当に便利です。しかし、jQueryUIのようにモジュールの中にあるものを探します。多くの場合、私は、sizzleと呼ばれる別のライブラリの中にあるセレクタだけがjQueryに組み込まれていて、全体ではありません。しかし、それにもかかわらず、私は彼らの優位性に反する点があります。 HTML5は普及しており、ネイティブ機能を提供しています。

4. アルゴリズムについて - デザインパターンを使用してください。それらは、長年に渡って進化した技法であり、テストされ実証されています。

   • コード
     • YUI compressorの縮小、：もちろん、クロージャ、グローバル変数を防ぐ無名の自己実行機能、等...

を使用して同様のような他の有用なトリックがありますGoogle Closure compilerは、帯域幅を節約します。

また、難解なオブジェクトやパッカーもあります。アルゴリズムが良い場合、が役に立つことがありますが、エラーが発生することがあります。;

いくつかのページではvar doc = document;のようなものを見たことがあるかもしれませんが、documentの呼び出しが短くなりました。

CDNを使用 - GoogleまたはASPのいずれかのホスト。

画像の最適化 - JPG can be optimized（ギャラリーについて）;

JavaScriptやCSSなどの静的コンテンツを別のホストにエクスポートして、Cookieデータを何度も送信しないようにします。 （ここでは別の副作用は、サーバー側の言語をインストールする必要がないことである、唯一のHTTPサーバが必要とされている）のツールとして

あなたは、に精通してかないことがあります。

• JsLint - JavaScriptコードエラーをチェックする。
• JsonLint - jsonデータのエラーをチェックします。
• JsPerf - スクリプトのパフォーマンスをテストして比較するため。他のユーザーが考案したテストのリストも含まれています。
• regexpal - regex helper;
• 多くの "ペースト&共有"サイトjsfiddle、pastebinなどがあります。