非同期と遅延について理解する-jsチュートリアル-php.cn

非同期と遅延について理解する

王林

リリース： 2024-08-09 01:58:42

オリジナル

842 人が閲覧しました

Understanding async and defer

これは、フロントエンドの面接でよくある質問の 1 つです。 HTML、JS、パフォーマンスに関する面接対象者の知識をテストします。

これはフロントエンドのインタビューの質問シリーズの質問 #1 です。準備をレベルアップしたい場合、または常に最新情報を入手したい場合は、FrontendCamp へのサインアップを検討してください。

script タグは、HTML ページに JavaScript を追加するために使用されます。インラインスクリプトまたは外部スクリプトの可能性があります。

<body>
  <!-- Some code before it -->

  <script>
    console.log("This is an inline script.");
  </script>

  <script src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

ログイン後にコピー

HTML の解析中にブラウザが script タグを検出すると、HTML 解析が停止され、JS スクリプトの実行が開始されます。インラインの場合はすぐに実行が開始されますが、外部スクリプトの場合はダウンロードされてから実行されます。

この間、JS スクリプトがダウンロードされて実行されると、HTML 解析がブロックされます。ブラウザが JS スクリプトの実行を完了した場合にのみ再開できます。

ここで何が間違っているのかわかりますか?これにより、エンドユーザーにパフォーマンスの問題が発生します。大量のスクリプトがある場合、またはスクリプトの実行に時間がかかる場合、ユーザーはページのコンテンツを長時間見ることができなくなります。

これを正確に解決するために、async と defer という 2 つの属性があります。

非同期

async 属性が存在する場合、スクリプトは HTML の解析と並行してダウンロードされ、利用可能になるとすぐに実行されます。

複数のスクリプトで async 属性が使用されている場合、実行順序は HTML に表示される順序と異なる場合があります。最初に利用可能なスクリプトが最初に実行されます。

<body>
  <!-- Some code before it -->

  <script async src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

ログイン後にコピー

延期する

defer 属性が存在する場合、スクリプトは HTML 解析と並行して (非同期と同様に) ダウンロードされますが、HTML 解析が完了した後、DOMContentLoaded を起動する前に実行されます。

複数のスクリプトが defer 属性を使用する場合、非同期とは異なり、実行順序は維持されます。

<body>
  <!-- Some code before it -->

  <script defer src="https://example.com/external-script.js" />

  <!-- Some code after it -->
</body>

ログイン後にコピー

まとめ

HTML 解析をブロックすることなく、非同期および遅延ダウンロードスクリプトの両方を実行します。
非同期スクリプトは利用可能になるとすぐに実行されます。 HTML 解析をブロックする可能性があります。
defer スクリプトは、HTML 解析が完了してから DOMContentLoaded.
実行順序が重要ではなく、スクリプトが DOM を変更しない場合は、非同期を使用します。
実行順序が重要である場合、またはスクリプトが DOM を変更する場合は、defer を使用します。
また、これらの属性は インラインスクリプトでは機能しません、つまり src 属性のないスクリプトでは機能しないことにも注意してください。
async と defer の両方が追加された場合は、async が優先されます。

リソース

MDN: スクリプト要素
フロントエンドキャンプ

以上が非同期と遅延について理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。