ブラウザに JavaScript をノンブロック的に読み込ませるいくつかの方法のまとめ_javascript スキル

スクリプトが正しく実行され、レイアウトがレンダリングされることを保証するために、ブラウザーは、ページのその後のコンテンツのレンダリングと他のリソースの読み込みを、ブラウザーがロードして実行するまで完全にブロックします。

ページの読み込みプロセス中にコンテンツが徐々に表示される場合、それは優れたユーザー エクスペリエンスにとって非常に重要です。通常、wondow オブジェクトの onload イベント処理関数でも何らかの処理を行いますが、一方では、読み込みとレンダリングをブロックするスクリプトの特性により、ページの読み込み時間が増加し、onload イベントのトリガーが遅れます。一方で、ユーザーがリクエストする時間も遅れます。これには、ブラウザが非ブロック的な方法で外部スクリプトをロードできるようにするためのいくつかのメソッドを使用する必要があります。

1 XMLHttpRequest オブジェクトを使用して、外部スクリプトを非同期的に読み込みます。

この方法の利点は、トリガーされるブラウザービジーインジケーターが少なく、最新のすべてのブラウザーでサポートできることです。欠点は、ブラウザのクロスドメイン セキュリティ メカニズムにより、同じドメイン内の外部スクリプトの読み込みしか許可されないことです。さらに、複数のスクリプト間に依存関係がある場合は、関連するキュー管理スクリプトを作成して、複数のスクリプトの実行順序を制御する必要があります。

2 Javascript を使用して外部スクリプトの SCRIPT 要素を動的に作成します

外部スクリプトをクロスドメインで並列読み込みするには、この方法が最適だと思います。実装方法は、外部スクリプトを参照するために必要な srcript 要素を HTML 内で動的に作成し、作成した src 属性を付与するというものです。要素。他のリソースと並行してロードする、対応する外部スクリプトの URL を設定します。

4. iframe を使用して外部スクリプトをロードします

この方法では、新しい HTML ページを使用して外部スクリプトを HTML ページのインライン スクリプトに変換し、次に iframe を使用してスクリプトを含む HTML ページをメイン ページにロードする必要があります。このメソッドを使用するには、次の手順が必要です。コードの一部をリファクタリングして、メイン ページの DOM 要素にアクセスします。さらに、IFRAM は比較的高価な DOM 要素であり、クロスドメインの制限もあります。

5 スクリプトタグ

の derfer 属性の使用

このメソッドは、外部スクリプトを参照する従来の方法で SCRIPT タグに defer 属性を適用するだけで、外部スクリプトのノンブロッキング並列読み込みを実装する最も簡単な方法です。ただし、この方法で外部スクリプトをロードする場合の欠点は、一部のブラウザでのみ並列ロードが実装されるため、互換性に欠けることです。

6 つの document.write スクリプトタグ

このメソッドは、JavaScript の document.write メソッドを直接使用して、HTML 内の外部スクリプトを参照する script タグの文字列を出力するという比較的簡単な実装方法です。欠点は、方法 5 と同様に互換性がないことです。

概要

上記の方法は、ドメインを越える必要があるかどうかなど、特定のニーズに基づいている必要があります。スクリプトが順番に実行されることを確認する必要がありますか?ビジー インジケーターをトリガーする必要があるブラウザーの数は多いですか、それとも少ないですか?互換性だけでなく、どの方式が適しているかなどを総合的に考慮して、サポートするコード量を決定します。