defer

ディファー（属性）

意味スクリプトの実行タイミング指定

deferとは？

ページ全体の読込後にスクリプトを実行します。

deferの具体的な使い方

スクリプトの実行を遅延させる例

<!DOCTYPE html>
<html>
<head>
    <!-- 他の要素 -->
    <script defer src="script.js"></script>
</head>
<body>
    <!-- コンテンツ -->
</body>
</html>

「defer」属性を使用すると、'script.js'の読み込み自体はすぐに始まりますが、スクリプトの実行はページのロードが完全に完了した後まで遅延されます。これにより、ページの表示が妨げられることなく、コンテンツとスクリプトの処理を最適化できます。

deferに関するよくある質問

Q. deferの利点は何ですか？

A. deferの主な利点は、ページの読み込み速度を向上させることです。スクリプトの実行をページのロード完了後まで遅延させることで、ユーザーはコンテンツをより早く見ることができます。また、DOM要素が完全に読み込まれた後にスクリプトが実行されるため、DOM操作に関するエラーを防ぐことができます。

Q. asyncとdeferの違いは？

A. asyncとdeferはどちらもスクリプトの読み込みと実行のタイミングを制御しますが、その動作は異なります。asyncはスクリプトの読み込みが完了次第すぐに実行されますが、deferはページのロードが完全に終わるまでスクリプトの実行を待ちます。また、deferは複数のスクリプトの実行順序を保証しますが、asyncは保証しません。

Q. deferはいつ使うべきですか？

A. deferは、ページの初期表示に直接影響しないスクリプト、特にDOM要素を操作するスクリプトに使用すべきです。例えば、解析や追跡のためのスクリプト、ユーザーインターフェースの拡張機能などに適しています。ページの表示に必須ではないが、ページ全体のロード後に実行したい処理がある場合に使用します。

HTMLのdeferについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、HTMLのdeferやcolspan、pattern、onclick、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。