ノンブロッキング読み込みスクリプト分析 [完全]_javascript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:11:22

オリジナル

1189 人が閲覧しました

ブラウザはシングルスレッドであるため、スクリプトはロード時に他のリソースのダウンロードをブロックします。ブラウザは現在改善されていますが、まだ改善の必要があります。
明らかに、スクリプトは順番に実行する必要がありますが、順番にダウンロードする必要はありません。解決策:
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 と一部の新しいブラウザーでのみサポートされていることです。

コードをコピー

コードは次のとおりです: ");
あまり議論されていない違いの 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 サイト構築の上級ガイド」を参照しています。