“blocking”属性｜“script”要素:スクリプト｜HTML－havin' a coffee break

＃

“blocking”属性について

“blocking”属性は外部リソースの読み込み時に妨げるべき処理を明示的に示します。

妨げられるべき処理は“ブロック可能トークン(Possible blocking tokens)”によって指定されます。現時点ではブロック可能トークンは“rendering”のみが定義されています。

“blocking="render"”を指定すると、スクリプトを読み込んでいる間は文書のレンダリングが妨げられ、スクリプトによって差し込まれるHTMLや他のスクリプトなどがある時にこれらが読み込まれていない中途半端な状態の文書が一時的に表示されてしまうことを防ぐことができます。

＃

指定できる値

属性値	説明
render	レンダリングを妨げる

値は空白文字で区切ることで複数指定できます。

＃

サンプルコード



<!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="sample-script.js" blocking="render"></script>

<title>黄色いフルーツバナナ - 果物を食べる</title>


</head>

<body>


...

“script”要素~“blocking”属性

“blocking”属性について

指定できる値

サンプルコード