May 31st, 2022
＃
“blocking”属性について
“blocking”属性は外部リソースの読み込み時に妨げるべき処理を明示的に示します。
妨げられるべき処理は“ブロック可能トークン(Possible blocking tokens)”によって指定されます。現時点ではブロック可能トークンは“rendering”のみが定義されています。
通常はスタイルシートの読み込みが遅れたとき、通常は文書のレンダリングは継続するため、一瞬スタイルが適用されていない文書が表示されてしまう場合がありますが、“blocking="render"”を指定した場合にはスタイルシートを読み込んでいる間は文書のレンダリングが妨げられ、このような状態を防ぐことができます。
“blocking”属性は“rel”属性の値に“stylesheet”を指定された“link”要素にのみ指定できます。
＃
＃
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" href="css/stylesheet.css" blocking="render">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
