HTML5 AsyncおよびDeferを使用して、非ブロッキングJavaScriptをロードします

ブラウザは、ページ処理を停止せずにfile.jsおよびその他の繰延スクリプトを並行してダウンロードし始めます。 12年以上前にインターネットエクスプローラーバージョン4.0に実装されました！また、バージョン3.5からFirefoxで利用できます。すべての繰延スクリプトは順番に実行されることが保証されていますが、いつ発生するかを判断することは困難です。理論的には、DomContentLoadedイベントの直前に、DOMが完全にロードされた後に発生するはずです。実際には、それはOSとブラウザ、スクリプトがキャッシュされているかどうか、およびその時点で他のスクリプトが何をしているかに依存します。スクリプトが順番に実行されることを保証することはできませんが、Window Onloadイベントが発射されるまでにロードされます。Firefox3.6、Opera 10.5、および最新のWebKitビルドのAsyncのサポートは、ChromeとSafariの次のバージョンに表示されるはずです。 IE9はまだ非同期をサポートしていません 、しかし、IEチームはDeferのエイリアスとして簡単に追加できます。 ASYNCとDEFERの両方を使用してすべてのブラウザをサポートできます。おそらく数か月以内に、すべてのブラウザで動作するネイティブの非ブロックJavaScriptロードメソッドがあります。NOTE：Operaの遅延スクリプトexecutionOperaは、約：構成で有効にする実験的遅延スクリプト実行施設を提供します。 Asyncスクリプトがページにロードされた場所を覚えているため、document.writeまたは変更を使用することができます。機能は、ページの読み込みをブロックするウィジェットと広告にすぐに役立ちます。 Microsoft、Mozilla、およびWebKitがオペラのリードに従うことを願っています。

javascriptのノンブロッキング、非同期、延期に関するよくある質問（FAQ）

​​

asyncとdeferの両方は、JavaScriptファイルのロードと実行方法を制御するためにHTMLのスクリプトタグに追加できる属性です。 Async属性は、Webページの残りの部分でスクリプトを非同期にロードおよび実行します。これは、Webページの残りの部分がロードされるのを待たずに、スクリプトがロードされるとすぐに実行されることを意味します。一方、Defer属性はスクリプトを非同期的にロードしますが、Webページの残りの部分がロードされるまでスクリプトの実行を担当します。これは、実行する前に完全にロードされているDOMに依存しているスクリプトに役立ちます。

JavaScriptコードをHTMLドキュメントにどこに配置すればよいですか？

HTMLドキュメントにJavaScriptコードを配置すると、Webページの読み込み性能に大きな影響を与える可能性があります。従来、スクリプトはHTMLドキュメントのヘッドセクションに配置されています。ただし、これにより、スクリプトがロードされて実行されるまで、Webページのレンダリングをブロックできます。これを避けるために、閉じるボディタグの直前にスクリプトを配置することをお勧めします。これにより、スクリプトが実行される前にHTMLドキュメントをロードおよびレンダリングできます。あるいは、Webページのレンダリングをブロックせずにスクリプトの読み込みと実行を制御するために、asyncまたはdefer属性を使用することができます。 JavaScriptコードを外部ファイルに入れると、HTMLファイルのクリーナーを簡単に読みやすくすることができます。また、ブラウザがスクリプトをキャッシュすることもできます。これにより、繰り返しの訪問のための読み込み性能が向上できます。ただし、スクリプトをロードするには追加のHTTP要求が必要であるため、初期負荷時間が遅くなる可能性があります。一方、JavaScriptコードをHTMLファイルに直接入力すると、追加のHTTPリクエストが必要になる可能性がありますが、特により大きなスクリプトの場合、HTMLファイルを厄介で維持するのが難しくなります。 ウェブページ。これは、スクリプトをHTMLドキュメントの下部に配置するか、スクリプトタグにasyncまたはdefer属性を使用することにより、スクリプトを非同期的にロードすることによって達成されます。非ブロッキングスクリプトは、ブラウザーがロードされている間にブラウザが残りのWebページをロードしてレンダリングし続けることができるため、Webページのロードパフォーマンスを改善できます。特定の順序。これは、HTMLドキュメントの最上部に小さくまたは近いスクリプトが他の人より前に実行される可能性があることを意味します。複数のスクリプトにdefer属性がマークされている場合、ブラウザはHTMLドキュメントに表示される順序でそれらをロードしますが、Webページの残りの部分がロードされるまで実行をdefutします。これにより、スクリプトが非同期にロードされていても、スクリプトが正しい順序で実行されることが保証されます。はい、同じスクリプトタグでasyncとdeferの両方の属性を使用できます。ただし、それらの動作はブラウザに依存します。両方の属性をサポートする最新のブラウザでは、ASYNC属性が延期属性よりも優先されます。これは、スクリプトが利用可能になり次第、スクリプトが非同期にロードおよび実行されることを意味します。延期属性は無視されます。 async属性をサポートしない古いブラウザでは、代わりに延期属性が存在する場合、代わりに使用されます。

非同期または延期属性を持つスクリプトがロードに失敗した場合はどうなりますか？これは、たとえスクリプトがロードに失敗した場合でも、Webページがロードとレンダリングを継続できるため、AsyncまたはDeferを使用することの利点の1つです。ただし、スクリプトの読み込みエラーを適切に処理して、スクリプトが読み込まれない場合でもWebページが正しく機能するようにすることが重要です。これには、スクリプト要素に非同期または延期プロパティが存在するかどうかのテストが含まれます。プロパティが存在する場合、ブラウザは属性をサポートします。そうでない場合は、ブラウザは属性をサポートしません。

インラインスクリプトを使用して非同期または延期属性を使用できますか？インラインスクリプトには影響しません。インラインスクリプトを非同期にロードして実行する場合は、JavaScriptを使用してスクリプト要素を動的に作成するなど、他の手法を使用する必要があります。実行されました。 ASYNC属性は、Webページの残りの部分がロードされるのを待つことなく、利用可能になり次第、スクリプトをロードおよび実行します。 Defer属性はまた、スクリプトを非同期にロードしますが、Webページの残りの部分がロードされるまで実行を担当します。非ブロッキングスクリプトは、Webページのレンダリングをブロックせずにロードおよび実行されます。使用するのに最適なテクニックは、Webページとスクリプトの特定のニーズに依存します。

以上がHTML5 AsyncおよびDeferを使用して、非ブロッキングJavaScriptをロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。