0

JavaScript in は HTML レンダリングをブロックするため、JavaScript を最下部に保持することをお勧めしますが、 body タグを閉じる直前に、CSS もそうではありませんか?

外部 CSS を外部に保持できないことはわかっています。

4

6 に答える 6

6

CSS は JavaScript のようにブロックしない

Yahoo の Developer Network ブログを引用するには

スタイルシートを使用すると、すべてのスタイルシートがダウンロードされるまでプログレッシブ レンダリングがブロックされます。そのため、スタイルシートをドキュメントの HEAD に移動して、最初にダウンロードされ、レンダリングがブロックされないようにするのが最善です。スクリプトを使用すると、スクリプトの下のすべてのコンテンツでプログレッシブ レンダリングがブロックされます。スクリプトをページ内のできるだけ低い位置に移動するということは、より早くレンダリングされるスクリプトの上により多くのコンテンツがあることを意味します。

さらに、CSS が head に追加されると、最初に解析され、HTML がダウンロードされてもスタイルが設定されます。これにより、HTML の大きなページの下部にスタイル タグを配置した場合に発生する、スタイルのないコンテンツのフラッシュが回避されます。

于 2010-10-26T17:24:14.890 に答える
2

CSS は Javascript のようにブロックしないだけでなく、CSS を 以外の場所に置く<head>と、無視したり不完全に適用したりするなど、奇妙なことをするブラウザーもあります。HTML5は実際には<style>外部に表示することを禁止して<head>います（まだ誰も実装していない「スコープ」機能を除く）。

于 2010-10-26T17:27:34.620 に答える
1

CSS スタイルシートは<link>要素を使用して読み込まれます。この要素は、ドキュメントの head にある場合にのみ有効です。HTML レンダリングをブロックする CSS に関しては、これは当てはまりません。なぜなら、CSS は他の<link>要素と同様にブラウザが読み込まれると適用されるからです。JS は HTML をブロックします。これは、ブラウザーが JS が制御を取得し、DOM を完全にロードする前に実際に何かを実行しようとしていると想定しているためです。基本的に JS は実行され、そのまま放置されます。

CSS が JS と同じようにロードされた場合、まだロードされていない要素を参照するため、要素はスタイルされません。したがって、後で適用され、ロードをブロックしません。

于 2010-10-26T17:27:56.170 に答える
0

JS

JS は Web ページを変更する (DOM を変更する) ことができるため、ブラウザーはすべての外部 JS が (並行して) ダウンロードされ、解釈され、実行されるのを待ってから、その後に続く残りの HTML を続行します。<script src="..." > したがって、すべての外部 JS をの底<body>。このようにして、HTML が解析およびレンダリングされ、ユーザーは何かが起こっていると感じます...

CSS

一方、CSS は DOM を変更できず、ページに「重い」変更を加えることはできません。そのため、ブラウザはダウンロード、残りの HTML の解析、および JS の場合のようなプログレッシブ レンダリングをブロックしません。レンダリングをブロックしているように見えますが、それでも上部に配置して長いFOUCを避ける方がよいでしょう。ただし、ダウンロードはブロックされません

現在、モバイル デバイスの台頭により、CSS を自分HEADの JS の下に配置するだけでは不十分なようです... ATF (スクロールせずに見える範囲) の CSS をインラインで配置し、残りの巨大な最小化された CSS を一緒に配置する必要があります。あなたのJS - 下部/遅延および非同期

これを見てください：http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

于 2014-09-01T09:14:56.933 に答える
0

いいえ、CSS はブラウザが CSS を読み込んだ直後に DOM 要素に適用されます。

JavaScript の場合、次のようにすべての html ロード後にスクリプトを実行するため、スクリプトを読み取り状態にしておくことができます。

window.onload = function (){

//here we start
}
于 2010-10-26T17:24:50.970 に答える
-2

Javascriptを一番下に置いておくのが良い習慣になるのはなぜですか?

CSS と Javascript を別々のファイルに配置し、セクションを使用して HTML ドキュメントに含めることをお勧めします<head>。

于 2010-10-26T17:23:53.593 に答える