DocsPricingBlog
Contact Us
Log inSign up for FREE
Back to Tech Articles

HTMLの<script>タグのasyncとdeferを覚える

Feb 11, 2025
# HTML

Wenhao Wang

Dev Intern · Leapcell

This post is also available in English, 한국어, and Deutsch
Cover of "HTMLの<script>タグのasyncとdeferを覚える"

すべてのウェブ開発者は、HTMLに精通していると誇らしげに主張します。しかし…本当に<script>タグのasyncとdeferの違いを知っていますか？

これらの属性は、現代のフロントエンドWebアプリケーションでは一般的ですが、見過ごされがちです。

まず要約しましょう。HTMLでは、<script>タグは3つの方法で使用でき、以下で一つずつ説明します。

  1. デフォルトのシーケンシャル実行： <script src='https://...'></script>
  2. ダウンロード直後に実行： <script src='https://...' async></script>
  3. ドキュメントが完全に解析された後に実行： <script src='https://...' defer></script>

<script>

説明

ブラウザがHTMLドキュメントの解析中にデフォルトの<script>タグを検出すると：

  1. 残りのHTMLの解析をブロックします。
  2. JavaScriptスクリプトをロードし、スクリプトが完全にロードされると、すぐに実行します。
  3. 実行後、HTML解析が再開されます。

次の例を考えてみましょう。

<html lang="zh">
  <head>
    <script>
      console.log('First script');
    </script>
    <script src="https://.../Chart.min.js"></script>
    <script src="https://.../moment.min.js"></script>
    <script src="https://.../vue.min.js"></script>
  </head>
  <body>
    Page content 1
  </body>
</html>

実行順序：

  1. `console.log(

Share this article

HackerNews

More Posts from Leapcell

Popular Posts