ノンブロッキング読み込みスクリプト分析 [完全]_javascript スキル

ブラウザはシングルスレッドであるため、スクリプトはロード時に他のリソースのダウンロードをブロックします。ブラウザは現在改善されていますが、まだ改善の必要があります。
明らかに、スクリプトは順番に実行する必要がありますが、順番にダウンロードする必要はありません。 解決策:
1.埋め込み JS
通常、ページ サイズとキャッシュにより多くの利点がもたらされるため、JS を外部ファイルに導入することをお勧めします。
ホームページや少量の JS などのいくつかのケースでは、許容できる。
2. XHR Eval
XMLHttpRequest 経由でサーバー側からスクリプトを取得します。
主な欠点は、XHR を通じて取得したスクリプトをメイン ページと同じドメインにデプロイする必要があることです。

コードをコピー コードは次のとおりです。

Ajax.get("test.js" 、関数 ( xhr) {
eval(xhr.responseText)
});

3. XHR インジェクション
XHR を使用してスクリプトを取得し、スクリプト タグを作成します。
同様に、XHR 経由で取得したスクリプトは、メイン ページと同じドメインにデプロイする必要があります。

コードをコピー コードは次のとおりです。

Ajax.get('test.js' , function ( xhr) {
injectscript(xhr.responseText);
function injectscript(scriptText) {
var s = document.createElement('script'); .text = scriptText;
document.getElementsByTagName('head')[0].appendChild(s);



4. Iframe のスクリプト

必要なスクリプトをページに配置し、iframe 経由でページを読み込みます。 欠点は、iframe 自体のコストが比較的大きく、ブラウザのセキュリティ メカニズムにより、iframe 内の js がクロスドメインの親ページにアクセスすること、またはその逆が許可されないことです。
5.スクリプト DOM 要素

JS はスクリプト DOM 要素を動的に作成し、その src 属性を設定します。

コードをコピー コードは次のとおりです。 var scriptElem = document.createElement('script ');

scriptElem.src = 'http://domain.com/test.js';

document.ge('head')[0].appendChild(scriptElem);

6. Script Defer

script タグに defer 属性を追加します。

欠点は、IE と一部の新しいブラウザーでのみサポートされていることです。


コードをコピー

コードは次のとおりです:

7. document.write スクリプト タグ

document.write を使用して、HTML タグ スクリプトをページに書き込みます。
欠点は、スクリプトが IE でのみ並行して読み込まれることです。

コードをコピー

コードは次のとおりです。 document.write("");
あまり議論されていない違いの 1 つは、ブラウザのステータス バー、プログレス バー、タブ アイコン、マウスなどのブラウザのビジー状態への影響です。
相互に依存関係のある複数のスクリプトをロードする場合、実行順序を保証できるテクノロジーも必要です。

技术	并行下载	可以跨域	存在Script标签	忙碌指示	顺序保证	大小 (bytes)
XHR Eval	IE, FF, Saf, Chr, Op	no	no	Saf, Chr	-	~500
XHR Injection	IE, FF, Saf, Chr, Op	no	yes	Saf, Chr	-	~500
Script in Iframe	IE, FF, Saf, Chr, Op	no	no	IE, FF, Saf, Chr	-	~50
Script DOM Element	IE, FF, Saf, Chr, Op	yes	yes	FF, Saf, Chr	FF, Op	~200
Script Defer	IE, Saf4, Chr2, FF3.1	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~50
document.write Script Tag	IE, Saf4, Chr2, Op	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~100

ほとんどの場合、スクリプト DOM 要素が適切な選択です。この方法はすべてのブラウザに適しており、クロスドメインの制限がなく、非常にシンプルで理解しやすいです。唯一の欠点は、個々のスクリプトの実行順序が保証できないことです。依存関係のある複数のスクリプトをロードする必要がある場合は、これらのスクリプトを 1 つに結合して、必要な順序で実行されるようにするか、他の手法を使用する必要があります。
現在、非同期ロード中に実行順序を維持する方法がいくつかありますが、スペースの都合上、詳細は説明しません。
単一スクリプト
1、ハードコードされたコールバック
2、ウィンドウ オンロード
3、タイマー
4、スクリプト オンロード
5、スクリプト タグの劣化
複数のスクリプト
1、マネージド XHR
2. DOM 要素とドキュメントの書き込み
この記事は、「高パフォーマンス Web サイト構築の上級ガイド」を参照しています。