ホームページ > 記事 > ウェブフロントエンド > 非同期と遅延について理解する
非同期と遅延について理解する
- 王林オリジナル
- 2024-08-09 01:58:42767ブラウズ
これは、フロントエンドの面接でよくある質問の 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 サイトの他の関連記事を参照してください。