19

<head></head>html の上 ( の間) にスタイルシートを配置しています。私が理解している限り、これがベストプラクティスです。(例: http://stevesouders.com/hpws/css-bottom.php )

とにかく、最近、私は異なる結果を経験しています。代わりに、test.css が遅い場合、以下のコードは空白のページを返します。これは、プログレッシブ レンダリングが発生していないことを意味します。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>

次に、test.css を一番下に置くと、プログレッシブ レンダリングが得られます。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>

私がこれまで理解してきた限り、それは逆のはずです.. おそらく私が見落としている他の要因がありますか？

4

4 に答える 4

50

Google は、スタイルが頭の中で「所属」するという伝統を急速に打ち破っています。実際、重要なスタイルは<head>タグまたはインラインのいずれかに属することを推奨していますが、その他の必須ではないスタイルは終了</html>タグの後に参照する必要があります。これは、最新のブラウザーのすべてではないにしても、ほとんどのブラウザーで動作します (すべてをテストしたわけではありません)。

この背後にある理由は、大量のスタイルをノンブロッキング参照としてロードし、(潜在的に) 大量のスタイルをすべて取得する前にブラウザーがページへの書き込みを開始できるようにするためです。「重要な」スタイルの内容によっては、スタイリングがレンダリングされる前に、最初のレイアウトの恐ろしいプロポーションが発生する可能性があります ( FOUC )。これはおそらく、「空白ページ」の問題で発生しているものです。

また、CSS がほぼ 20 年前 (1996 年) にリリースされたことを思い出してください。そのため、Google (およびその他) が操作し、概念の従来のパラメータを押し出していることは驚くべきことではありません。

とてつもなく単純な例:

<!DOCTYPE html>
<html>
<head>
    <title>It's a Brave New World</title>
    <link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
    <!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />
于 2014-02-13T09:22:24.877 に答える
6

CSS は で定義する必要があります<head>。

このようにして、要素が DOM に読み込まれると、適切なスタイルがすぐに適用されてレンダリングされます。

于 2011-11-07T07:10:53.197 に答える