JavaScript の扱い方_Web サイトのパフォーマンスを向上させるための JavaScript のヒント

特に JavaScript ファイルの場合、ダウンロード時に並列ダウンロードが実際には無効になり、ページのレンダリングもブロックされます。

JavaScript のダウンロードについて

JavaScript スクリプト ファイルをダウンロードする場合、ブラウザは他のダウンロードを並行して開始しませんが、他のリクエストを続行する前に JavaScript スクリプト ファイルを個別にダウンロードすることを許可します。これは、ページ全体のパフォーマンスにとって大きな問題となります。解決策は次のとおりです。

解決策 1: ページ内に JavaScript スクリプトをインライン化します。つまり、JavaScript スクリプトを記述します。 HTML タグ内に直接入力します。
利点: 最速。大規模な Web サイトのホームページでは、JavaScript スクリプトの一部を HTML タグ内に直接インライン化することが合理的です。
欠点: JavaScript スクリプトは個別にキャッシュされず、他のページは JavaScript スクリプトを共有できません (再利用できません)。

解決策 2: JavaScript スクリプト タグのリンクを HTML ファイル タグの下部に配置します。
要件: スクリプトには、ページを書き換えるための document.write() メソッドが含まれていません。

解決策 3: 遅延スクリプトを使用します。つまり、link タグに defer 属性を追加することは、JS スクリプトに document.write() メソッドが含まれていないことを示します。
問題点: Firefox で遅延スクリプトを使用した後も、JavaScript スクリプトはレンダリングと並列ダウンロードをブロックします。
IE では、効果は明ら​​かではありません。

要約: スクリプトで遅延スクリプト技術を使用できる場合は、確実にページの下部に移動できます。
つまり、「解決策 3」は「解決策 2」に完全に置き換えることができます。

解決策 4: ダウンロード後のロードを使用します。つまり、ページが読み込まれた後、JavaScript スクリプトが onload イベントを通じて動的にダウンロードされます。 (CSS もユニバーサルです)
利点: HTML ページのレンダリングをブロックせず、JavaScript スクリプトの再利用が可能になります (スクリプトはブラウザーにキャッシュされます)。
欠点: この関数を実装するために追加の JavaScript コードが生成されるため、プログラムが複雑になります。
問題: 2 回ロードされた可能性があります (1 回はインライン、もう 1 回は外部)。

IFrame を使用してページをネストし、JavaScript スクリプトをロードすると、この問題を解決できます。
例: http://stevesouders.com/hpws/post-onload.php

解決策 5: 動的インライン化。 Cookie をインジケーターとして使用し、コードを使用して外部 JS をページにインライン化する判断を行います。
動的インライン化は、「ロード後のダウンロード」をさらに改良したものです。また、プログラムの複雑さも再び増加します。
JavaScript スクリプトはページの下部に配置することをお勧めしますが、CSS スタイル シートはページの上部に配置する必要があります。

JavaScript の縮小化について

縮小化とは、コードから不要な文字、コメント、空白を削除して JavaScript コードのサイズを削減し、それによってダウンロード時間と JavaScript の読み込み速度を向上させることです。

最小化ツール: JSMin JS Minifier js 圧縮
JSMin は、JavaScript ファイル内の不要な文字、コメント、および空白をすべて削除するために使用されます。

cmd 使用法: C:Documents and Settingsxugang>jsmin js_rerurn.js
1. まず jsmin.exe フォルダーを指定します
2. openWin.js がソース ファイルです
3. js_rerurn.js はターゲット ファイルです

合理化ツール: ShrinkSafe (元の名前: Dojo Compressor) http://dojotoolkit.org/docs/shrinksafe
ShrinkSafe は JavaScript ファイル内の空白を削除するために使用されます。同時に変数名も置換によって短縮されます。
cmd 使用法: java -jar shrinsafe.jar infile.js > outfile.js
shrinksafe.jar はツール名です
infile.js はソース ファイルです
outfile.js はターゲット ファイルです

注: コンソールで実行する場合は、shrinksafe.jar と js.jar が同じディレクトリにあることを確認し、入力 JS ソース ファイルと出力 JS ターゲット ファイルも同じディレクトリにあるようにしてください。 (デフォルトはドライブ C のルート ディレクトリにあります)

通常、JavaScript ファイルを効率化するには、JSMin と ShrinkSafe という 2 つのツールを使用できます。
コンポーネントを圧縮する

同時に、応答時間を短縮するために、HTTP ヘッダー宣言を通じてスクリプト、スタイル シート、HTML ドキュメントを圧縮することを忘れないでください。
ブラウザ クライアント リクエスト: Accept-Encoding: gzip, deflate
Web サーバー レスポンス: Content-Encoding: gzip
gzip は現在人気があり、理想的で効果的な圧縮方法ですが、deflate は効果がわずかに低く、あまり人気がありません。