ホームページ  >  記事  >  ウェブフロントエンド  >  スクリプトタグの async 属性と defer 属性について学びましょう

スクリプトタグの async 属性と defer 属性について学びましょう

青灯夜游
青灯夜游転載
2020-11-11 17:46:402587ブラウズ

スクリプトタグの async 属性と defer 属性について学びましょう

フロントエンドは当然HTMLから始まりますが、scriptタグにasync/deferを追加した場合の機能と違いについてお話します。

誰もが真実を知っています

ブラウザが HTML を解析し、それを 1 行ずつ順番に逆方向に読み取ることは誰もが知っています。書き込みメソッドでは、ブラウザが <script></script> を読み取ると、 DOM の解析を一時停止し、 <script><code> で定義されたリソースのダウンロードを直ちに開始します。ダウンロードが完了したらすぐに実行してください。このような特性により、DOM ツリーが完全に解析される前に JavaScript が実行を開始し、DOM を操作する必要があるプログラムが正しく実行できなくなり、多くの問題が発生したり、&lt;script&gt;&lt;code&gt; が原因で発生したりする可能性があります。リソースのダウンロードと実行時間のプロセスにより、ユーザーは白い画面でスタックし、Web サイトが遅すぎて使用できないと感じることがあります。 &lt;/script&gt;&lt;/p&gt;解決策も非常に簡単で、DOM ツリーの解析を避けるために、&lt;p&gt;&lt;script&gt;&lt;code&gt; タグを &lt;body&gt;&lt;code&gt; の最後の行に置く必要があります。完全な質問ではありませんが、複雑な Web サイトでは HTML と JavaScript が非常に大きいため、&lt;script&gt;&lt;code&gt; 内のリソースをダウンロードして読み取る前に、DOM ツリー全体が読み込まれるまで待つ必要があります。検索が完了してから操作できるようになるまでには、明らかな遅延感が生じます。 &lt;/script&gt;&lt;/p&gt;この問題を解決するにはどうすればよいですか? &lt;p&gt;&lt;/p&gt;HTML4 以降、&lt;p&gt;&lt;script&gt;&lt;code&gt; には defer&lt;code&gt; 属性が増え、HTML5 には async&lt;code&gt; 属性が増えました。どちらも開発者向けに使用されています。 &lt;script&gt;&lt;code&gt; 内のリソースの読み込みと実行順序を制御し、リソースのダウンロード中に DOM 解析が停止するのを回避します。 &lt;/script&gt;&lt;/p&gt; &lt;p&gt;&lt;img src=&quot;https://img.php.cn/upload/image/645/992/495/1605087850244264.png&quot; title=&quot;1605087850244264.png&quot; alt=&quot;スクリプトタグの async 属性と defer 属性について学びましょう&quot;&gt;&lt;/p&gt; &lt;p&gt;#defer&lt;strong&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;/span&gt;&lt;/strong&gt;##defer&lt;/p&gt; は、HTML4.01 仕様で「遅延」を意味します。 : &lt;p&gt;&lt;code&gt;</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&lt;code&gt; の効果は残りますので、使用する場合は特にご注意ください。 &lt;code&gt;また古い IE です... &lt;/script&gt;&lt;/p&gt; &lt;p&gt;&lt;/p&gt;async&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-size: 18px;&quot;&gt;&lt;/span&gt;&lt;/strong&gt;async&lt;/p&gt; は、非同期であることを意味します (非同期)、HTML5 仕様で規定されています: &lt;p&gt;&lt;code&gt;</code>...async 属性が存在する場合、スクリプトは利用可能になるとすぐに非同期で実行されます...</p> <blockquote> <em>In</em>&lt;script&gt;&lt;/script&gt; </blockquote> <p>async<code> 属性をタグに追加すると、</code>defer<code> と同じように、ダウンロードもバックグラウンドで実行されます。ただし、違いは、ダウンロードが完了するとすぐに実行され、DOM 解析を一時停止し (まだ完了していない場合)、JavaScript の実行を開始します。 </code>async<code>属性を追加した後は、ダウンロード完了直後に実行されるため、実行順序は保証できません。 </code><code>この属性は標準に含まれており、JavaScript を介した </code>&lt;script&gt;&lt;/script&gt;</p> の動的挿入もサポートしています。例: <p></p> <pre class="brush:php;toolbar:false">const script = document.createElement('script') script.src = &quot;/something/awesome.js&quot; 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 サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。