2011-11-13 5 views
7

現在のWebプロジェクトでは、いくつかのjQueryプラグインを使用していて、閉じているbodyタグの直前でそれらを初期化しています。私の質問は、読み込み時間/パフォーマンスの観点からは、私はすべての初期化を行い、それらを単一の外部化されたjsファイルにコピーするのが最善でしょうか?プラグインはサイト内のすべてのページで同じ方法で初期化されているため、1つをロードしているように見えますが、集中化されたファイルは最適ではありませんか?フィードバックに感謝します。すべてのJavaScriptソースを1つのファイルにコピーする必要がありますか?

答えて

5

これはすべてあなたが開発しているものによって異なりますが、ここではいくつかのルールを示します。

HTTPリクエストはオーバーヘッド(特にHTTPS経由)を意味しますので、できるだけ小さくするようにしてください。これはモバイルにとって非常に重要です。しかし、いくつかの例外があります。アプリケーションの初期化時に不要なJavaScriptファイルを読み込むことは時にはスマートなので、本当に必要なときにキャッシュされます。一般的なライブラリのCDNを使用するとパラレルダウンロードのためにパフォーマンスが大幅に向上することがあります。

はできるだけ小さくしてください。したがって、すべてのJavaScriptとCSSを縮小し、HTMLをさらに縮小します。

キャッシュヘッダーが正しく設定されていること(いくつかは1年以上に設定されていることがあります)を確認してください。新しいバージョンのスクリプトがデプロイされている場合、バージョン番号を持つscript要素のsrc属性を:<script src="myapp.js?v=2"></script>

実際のパフォーマンスよりもパフォーマンスが優れていることがあります。 HTMLをロードしてレンダリングすることが、アプリケーションの初期化よりも重要です。これは、JavaScriptファイルを非同期に読み込むことによって(GoogleのようにJavaScriptを使ってスクリプト要素を挿入するか、これを行うスクリプトローダーを使用して)行うことができます。スクリプトファイルが完全に読み込まれて解析される前に、ロードされたファイルの実行順序やページとの対話などの新たな課題が発生します。

最終的には、オンラインアプリやサイトのアーキテクチャに大きく依存しており、その相互作用が何であるか、またはすべきか、いくつかの例を挙げてさらに詳しく説明しますか?

PM5544。

+0

偉大なフィードバックPM5544のおかげで。パフォーマンスを向上させるために非同期jsローディングについてもっと知りたいのは特に興味があります。ここでは、友人が彼のアートワークを表示するために行った小さなサイトの例を示します:http:// tinyurl。com/758ocgoいくつかのjQueryプラグインを使用していますが、パフォーマンスを最適化するために何かをする必要があるかどうか不思議です。 – nickpish

+0

この特定のケースでは、私はあなたに次のことをお勧めします。プラグインを1つのJavaSciptファイルにまとめて、それを縮小します。すべての「

1

javascriptコードは、すべてのページ間でより効率的にキャッシュすることができるため、共通の外部化されたjavascriptファイルの方が有意義です。

外部化されたjavascriptファイルの初期化コードを呼び出す閉じるbodyタグの前に、ページ内に数行のコードがインラインであり、初期化をトリガーする最適な方法であれば、何も遅くならない。

+0

意味があります。感謝jfriend – nickpish

0

はい、YUI Compressorなどのツールを使用してJavaScriptとCSSを1つのファイルにまとめることができます。しかし、アセットのすべてを1つのファイルに入れるのは面倒です。ファイルが大きい場合、ブラウザは複数の同時リクエストに対して1つのTCPストリームしかダウンロードできません。ここではこれについての続きを読む:あなたのHTMLに<script>タグを入れてLoading JavaScript Resources the Fun Way

については、答えは終了</body>タグの前に、ページの下部にあります。 GoogleのWeb Performance Best Practicesサイトをご覧ください。

関連する問題