scriptタグにdefer属性をつけたらどうなるの？

defer属性を付けると効果的な場合があります。

ページ読み込みに時間がかかる、読み込み後に実行したい場合に有効

defer属性を付けると、非同期でJavaScriptが読み込みされるようになります。つまり、JavaScriptはHTMLのパースと並行して非同期に読み込まれます。JavaScriptファイルのダウンロードはHTMLの読み込みをブロックしません。

そして、HTMLの読み込みが完全に終わった後にJavaScriptが実行されます。そのため、JavaScriptがDOMにアクセスしたり操作する際に、HTML要素がすでに読み込まれている状態が保証されます。

DOMを操作したいことがある場合、JavaScriptをヘッダー内にdefer属性なしで記述するとエラーになります。DOM操作をしたい場合は、defer属性を付けて記載するか、操作したいDOMよりも後方にJavaScriptを記載するとエラーになりません。

defer属性を複数のscriptタグに付けた場合、HTMLコードの上から順に処理されます。つまり記述した順番で実行されます。

以下、サンプルです。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Defer Script Example</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

deferの利点はページの読み込みが速くなることと、DOMの操作がエラーにならず実行できる点にあります。

なお、defer属性に似たものにasyncがあります。
違いは、deferが記述した順番に必ず実行されるのに対して、asyncはロードが完了した順に実行されるため、毎回同じ順番で実行されるとは限りません。

ユーザービリティの観点から、javaScriptを記載する場合は、defer属性を使ったほうがいいか確認してコーディングすることも大切です。