В следующих примерах используются ресурсы, которые намеренно задерживаются, чтобы показать, что происходит. Поскольку он использует динамические c ресурсы, чтобы каждый раз показывать разные идентификаторы и обеспечивать очистку кэша, я не могу использовать фрагмент стека, но я покажу вам критический код и ссылку на рабочий пример.
В первом примере у нас есть описанный вами случай.
<!DOCTYPE html>
<html>
<head>
<title>Render Blocking Test - A</title>
<link href='/css/styles1.css?delay=1000&x={cachebuster}' rel="stylesheet"/>
<link href='/css/styles2.css?delay=5000&x={cachebuster}' rel="stylesheet"/>
</head>
<body>
<h1>Render Blocking Test - A</h1>
<b>{cachebuster}</b>
</body>
</html>
Заполнитель "{cachebuster}" заменяется другим GUID каждый refre sh. Задержки для двух ресурсов CSS составляют 1 секунду и 5 секунд, чтобы более четко показать задержки
styles1. css содержит
body { background: blue }
styles2. css содержит
body { background: red }
Посмотрите, как это работает здесь: http://alohci.net/text/html/render-blocking-a.htm
Вы увидите, что страница пуста, пока не пройдут 5 секунд, и все ресурсы css скачал. Или при refre sh предыдущая страница отображается, пока не пройдет 5 секунд (GUID изменится через 5 секунд). Фон, когда появляется новый контент, сразу становится красным, а не белым или синим. Вот что означает блокировка рендеринга - новый рендеринг страницы не выполняется до тех пор, пока не будут доступны ресурсы, блокирующие рендеринг.
Для сравнения см. Этот второй пример.
<!DOCTYPE html>
<html>
<head>
<title>Render Blocking Test - B</title>
<link href='/css/styles1.css?delay=1000&x={cachebuster}' rel="stylesheet"/>
</head>
<body>
<h1>Render Blocking Test - B</h1>
<b>{cachebuster}</b>
<script src="/js/script1.js?delay=4000&x={cachebuster}"></script>
<link href='/css/styles2.css?delay=5000&x={cachebuster}' rel="stylesheet"/>
</body>
</html>
Вот как это работает: http://alohci.net/text/html/render-blocking-b.htm
Здесь у нас есть один ресурс блокировки рендеринга на одну секунду, затем некоторый контент - заголовок и GUID - затем скрипт загрузка занимает 4 секунды, а затем второй ресурс блокировки рендеринга.
В этом случае текст и синий фон появляются через 1 секунду. Скрипт загружает парсер-блоки, поэтому второй ресурс css еще не проанализирован и поэтому не может блокировать рендеринг. Следовательно, синий фон виден. Затем скрипт загружается, второй ресурс css анализируется и выполняет рендеринг-блоки до тех пор, пока он тоже не будет загружен, после чего фон меняется с синего на красный.
Наконец, вы можете заметить, что требуется только 5 секунд для появления красного фона, а не 9 секунд, как вы можете себе представить. Это потому, что синтаксический анализатор может по-прежнему смотреть в будущее, когда он блокирован, следует признать, что ему, вероятно, потребуется загрузить второй ресурс css и забрать его заблаговременно, даже если он не сможет использовать его, пока анализатор не разблокируется.