このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

script”要素~“defer”属性

記事May 2nd,2015
July 10th, 2020
スクリプトをパースと並行して読み込み、パースの完了後に実行する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

defer”属性について

defer”属性はスクリプトをパースと並行して読み込み、パースの完了後に実行する属性です。

通常ブラウザはパースの途中でスクリプトを見つけるとパースを中断し、スクリプトを読み込んで実行するまでパースが再開されないため、その分ウェブページが表示されるのが遅れてしまいます。“defer”属性を指定されたscript”要素で埋め込まれるスクリプトはパースと並行して読み込みが行われるため、ウェブページの表示が遅れるのを防ぐことができます。

defer”属性はsrc”属性を指定していないscript”要素には指定してはいけません。また、埋め込まれるスクリプトがモジュールスクリプトである場合はデフォルトで読み込みがパースと並行で行われ、実行がパースの完了後であるため、“defer”属性は意味を持たず、指定するべきではありません。

defer”属性とasync”属性を両方指定した場合は、async”属性に対応するブラウザではasync”属性async”属性に対応していないブラウザでは“defer”属性が効果を持ちます。

指定できる値

属性値 説明
defer スクリプトをパースと並行して読み込み、パースの完了後に実行する

属性値は省略できます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="script/script.js" defer></script>
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク