この記事では、JavaScript における defer 属性と async 属性の使用法について詳しく説明します。必要な方は参考にしていただければ幸いです。
js ファイルを非同期でロードする必要がある理由:
非同期を使用しない場合、ドキュメントは js コードをロードするときに他のリソースのダウンロードをブロックし、空白のページが表示されます。
(1) 先頭に配置された js スクリプトを実行すると、ブラウザが外部リンク ファイルのコードをダウンロードして実行するための時間がかかり、明らかな遅延が発生し、空白のページが表示されます。ユーザーはコンテンツを閲覧できず、ページを操作できません。
(2) IE8、Firefox3.5、Safari4、Chrome2 はすべて Javascript ファイルの並列ダウンロードを許可しており、スクリプトのダウンロード プロセスは相互に影響しませんが、ページの読み込みにはまだ待つ必要があります。すべての Javascript コードがダウンロードされて実行されるまで続行します。このため、<script> タグを <body> の下部に配置することをお勧めします。 </script>
(3) 各 <script> タグはダウンロード時にページのレンダリングをブロックするため、<script> タグの使用を減らすことをお勧めします。これは、外部リンク スクリプトだけでなく、インライン スクリプトにも当てはまります。ブラウザが HTML ページを解析するときに <script> タグに遭遇するたびに、スクリプトの実行により一定の遅延が発生します。さらに、HTTP リクエストによって追加のパフォーマンス オーバーヘッドが発生することを考慮すると、1 つの 100 KB ファイルをダウンロードする方が、25 KB のファイルを 4 つダウンロードするよりも高速になります。 </script>
defer と async の使用法:
同じ点: defer と async はどちらもスクリプトを非同期で読み込むために使用されます。並列ダウンロードを使用すると、ダウンロード プロセス中にブロックされることはありません。
相違点:
defer:
(1) は、外部スクリプトまたは埋め込みスクリプトをロードするために使用できます。インライン スクリプトは IE9 以下に限定されます。メインストリーム ブラウザは W3C の HTML5 仕様に基づいています。defer は src 属性が宣言されている場合にのみ有効です。
例:
//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
console.log("defer");</script>(2) defer 属性を持つ <script> タグはページ上のどこにでも配置でき、対応する Javascript ファイルは <script> に解析されます。ページ上の ; タグ ダウンロードは開始されますが、DOM の読み込みが完了した後に実行されます (onload イベントの前に呼び出されます)。 </script>
async:
(1) 外部スクリプトにのみ使用されます。
(2) 非同期ロード完了直後に実行します。
添付ファイル: defer 属性のブラウザーサポートの詳細については、https://caniuse.com/#feat=script-defer を参照してください。defer を検索してください。
js ファイルを非同期でロードする必要がある理由:
非同期を使用しない場合、ドキュメントは js コードをロードするときに他のリソースのダウンロードをブロックし、空白のページが表示されます。
(1) 先頭に配置された js スクリプトを実行すると、ブラウザが外部リンク ファイルのコードをダウンロードして実行するための時間がかかり、明らかな遅延が発生し、空白のページが表示されます。ユーザーはコンテンツを閲覧できず、ページを操作できません。
(2) IE8、Firefox3.5、Safari4、および Chrome2 はすべて Javascript ファイルの並列ダウンロードを許可しており、スクリプトのダウンロード プロセスは相互に影響しませんが、ページの読み込みは Javascript がすべて完了するまで待つ必要があります。コードはダウンロードされ、続行する前に実行されます。このため、
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
メモ帳++7.3.1
使いやすく無料のコードエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
