ホームページ > 記事 > ウェブフロントエンド > スクリプトタグの async 属性と defer 属性について学びましょう
フロントエンドは当然HTMLから始まりますが、scriptタグにasync/deferを追加した場合の機能と違いについてお話します。
誰もが真実を知っています
ブラウザが HTML を解析し、それを 1 行ずつ順番に逆方向に読み取ることは誰もが知っています。書き込みメソッドでは、ブラウザが <script></script>
を読み取ると、 DOM の解析を一時停止し、 <script><code> で定義されたリソースのダウンロードを直ちに開始します。ダウンロードが完了したらすぐに実行してください。このような特性により、DOM ツリーが完全に解析される前に JavaScript が実行を開始し、DOM を操作する必要があるプログラムが正しく実行できなくなり、多くの問題が発生したり、<script><code> が原因で発生したりする可能性があります。リソースのダウンロードと実行時間のプロセスにより、ユーザーは白い画面でスタックし、Web サイトが遅すぎて使用できないと感じることがあります。 </script></p>解決策も非常に簡単で、DOM ツリーの解析を避けるために、<p><script><code> タグを <body><code> の最後の行に置く必要があります。完全な質問ではありませんが、複雑な Web サイトでは HTML と JavaScript が非常に大きいため、<script><code> 内のリソースをダウンロードして読み取る前に、DOM ツリー全体が読み込まれるまで待つ必要があります。検索が完了してから操作できるようになるまでには、明らかな遅延感が生じます。 </script></p>この問題を解決するにはどうすればよいですか? <p></p>HTML4 以降、<p><script><code> には defer<code> 属性が増え、HTML5 には async<code> 属性が増えました。どちらも開発者向けに使用されています。 <script><code> 内のリソースの読み込みと実行順序を制御し、リソースのダウンロード中に DOM 解析が停止するのを回避します。 </script></p>
<p><img src="https://img.php.cn/upload/image/645/992/495/1605087850244264.png" title="1605087850244264.png" alt="スクリプトタグの async 属性と defer 属性について学びましょう"></p>
<p>#defer<strong><span style="font-size: 18px;"></span></strong>##defer</p> は、HTML4.01 仕様で「遅延」を意味します。 : <p><code></code>このブール属性を設定すると、スクリプトが Web コンテンツを生成しない (たとえば、「document.write」は JavaScript で生成されない) ことをユーザー エージェントに通知するため、 </p> ユーザー エージェントは解析とレンダリングを続行できます。 <blockquote>
<em><strong></strong>つまり、</em>defer</blockquote> 属性を追加した後、ブラウザは <p> を読み込まずに画面の解析とレンダリングを続行します。 <code> はスタックしています。実際に実行すると、</code>DOMContentLoaded<code> が実行される前に上から下への配置順にトリガーされます。 </code><code>とても便利だと思いませんか?ただし、W3C 仕様では </code>defer</p> 属性はブール値になると記載されていますが、以前のバージョンの IE9 は、たとえ <p><script defer><code> defer<code> の効果は残りますので、使用する場合は特にご注意ください。 <code>また古い IE です... </script></p>
<p></p>async<p><strong><span style="font-size: 18px;"></span></strong>async</p> は、非同期であることを意味します (非同期)、HTML5 仕様で規定されています: <p><code></code>...async 属性が存在する場合、スクリプトは利用可能になるとすぐに非同期で実行されます...</p>
<blockquote>
<em>In</em><script></script>
</blockquote> <p>async<code> 属性をタグに追加すると、</code>defer<code> と同じように、ダウンロードもバックグラウンドで実行されます。ただし、違いは、ダウンロードが完了するとすぐに実行され、DOM 解析を一時停止し (まだ完了していない場合)、JavaScript の実行を開始します。 </code>async<code>属性を追加した後は、ダウンロード完了直後に実行されるため、実行順序は保証できません。 </code><code>この属性は標準に含まれており、JavaScript を介した </code><script></script></p> の動的挿入もサポートしています。例: <p></p>
<pre class="brush:php;toolbar:false">const script = document.createElement('script')
script.src = "/something/awesome.js"
document.body.append(script)</pre>
<code>動的に作成された </code><script> はデフォルトで非同期読み込みになりますが、属性を設定することで無効にできます: <p><pre class="brush:php;toolbar:false">script.async = false<code># type="module"<p><strong><span style="font-size: 18px;">主流の最新ブラウザでは、<script> 属性を type="module" <p> で追加できます。このとき、ブラウザはこのファイルが JavaScript モジュールであると認識し、解析ルールと実行環境が若干異なります。このとき、<code><script> のデフォルトの動作は # のようになります。 ##defer<code> 同様に、バックグラウンドでダウンロードされ、DOM の解析とレンダリングが完了するのを待ってから実行されるため、defer<code> 属性は type="module" の場合には有効になりません。 <code>。ただし、async<code> 属性を使用して、ダウンロードの完了直後に実行することもできます。 <code><code>使用法<p><strong>これら 2 つの属性の特性を理解する必要があります。では、これらを正しく使用するにはどうすればよいでしょうか? <span style="font-size: 18px;"><p><code>defer バックグラウンド読み込みの特性上、レンダリングを中断せず、実行順序を確保するため、基本的に特別な必要がなければ <code><script> に設定します。もちろん <code><script> 配置順序には少し注意する必要があります。 <p><code>async は、ダウンロード後すぐに実行され、実行順序は保証されないため、非常に特殊です 一般的なアプリケーションは、背景のロゴなど、完全に独立した小さなモジュールに設定されるのが一般的です, ページ広告などはユーザーエクスペリエンスの低下を避けつつ、できるだけ早く成果を出すようにしましょう。 <p>現在、ほとんどのフロントエンド開発は Webpack などのパッケージ化ツールによって支援されており、これらのプロパティを自分で設定する機会はほとんどありません。開発者は script-ext-html-webpack-plugin やその他のプラグインを使用できます。分割されたチャンクには、個別に必要な <code><script> 属性が設定されます。 <p><span style="font-size: 18px;">#概要<strong>##async<p> と <code>defer は <code><script>排他的な属性。Web ページ内の他のリソースについては、<code><link> の <code>preload 属性と <code>prefetch 属性を使用して、<code> 読み込みを遅らせることができます。 将来的にのみ必要となるリソース。 <strong><script><p> の <code>async プロパティと <code>defer プロパティのほとんどは、最新のフレームワークのパッケージ化プロセスにすでに組み込まれていますが、これらの Web ページの最も基本的な仕様をしっかりと理解していれば、作成したコードの最終的な効果を理解できます。 <code>プログラミング関連の知識について詳しくは、プログラミング ビデオ コース<p>をご覧ください。 ! <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频课程"></script>
以上がスクリプトタグの async 属性と defer 属性について学びましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。