简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

王林
リリース： 2024-08-09 01:58:42
オリジナル
805 人が閲覧しました

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>
ログイン後にコピー

まとめ

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

リソース

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

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

ソース：dev.to
前の記事：パッケージマネージャーの理解: pnpm、npm、yarn 次の記事：React ウェブサイトに Google タグ マネージャー コードを追加する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1771
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1908
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1626
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1537
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1572
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！