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

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

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

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

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

`<script>`

説明

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

残りのHTMLの解析をブロックします。
JavaScriptスクリプトをロードし、スクリプトが完全にロードされると、すぐに実行します。
実行後、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>