6

特定の設定で CSS がどのように評価されるかを理解しようとしています。

<head>タグに次のコンテンツがあるとします。

<html><head>
...
    <link href="reset.css" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="autocomplete.css" type="text/css" rel="stylesheet">
</head>
<body>
... html ...
<script type="text/javascript" src="/js/script.js"></script>
</body></html>

ここで、スクロールせずに見えるコンテンツまたは HTML の要素に直接影響を与えるいくつかのルールを想定reset.cssして含めましょう。style.cssただし、autocomplete.css後で一部の JavaScript によって使用されるクラスのみが含まれます。

reset.cssここで、ブラウザーが既にダウンロードされてstyle.cssいautocomplete.cssて、まだ保留中であるとさらに仮定しましょう。ページの最後にブロッキング スクリプト タグが表示された場合、ブラウザはどうなるでしょうか。明らかに、スクリプト タグまでの HTML をレンダリングできますが、スクリプトの実行は、不足しているためにブロックされていautocomplete.cssますか?

script タグは同期ではないことに注意してください。

私は読んだ: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

そして、CSSOM が存在するまで JavaScript の実行がブロックされると書かれています。

今: 1. ページautocomplete.cssがまだ到着していなくてもレンダリングを開始しますか? 2. script.jsJavaScript の実行はブロックされるまでブロックされautocomplete.cssますか?

レンダリングとスクリプトの実行という 2 つの異なることについて言及していることに注意してください。

4

3 に答える 3

2

最新のパフォーマンスの推奨事項は次のとおりです。

1) ブラウザーがスクロールせずに見えるコンテンツをレンダリングするために必要なヘッダーにすべての css をインライン化します。スクロールせずに表示されるコンテンツ。

2) 他のすべての css をページの下部に追加するか、次のような方法で非同期にロードすることをお勧めします: https://github.com/filamentgroup/loadCSS

于 2017-03-27T09:40:06.273 に答える