Будущее загрузки CSS в Chrome

20 февраля 2016, 16:27

Новости

03/09/2024 Полиграфическое оборудование для офиса

03/09/2024 Где раздобыть робуксы?

29/08/2024 Где раздобыть робуксы?

Chrome намеревается поменять поведение загрузки <link rel="stylesheet">, это касается тех случаев, когда они расположены непосредственно в <body> страницы. Из сообщения Blink-DEV, выгода этого изменения не совсем ясна, поэтому хотелось бы раскрыть определенные подробности.

Некоторые, подключают CSS с использованием асинхронной загрузки javascript, чтобы скрыть те стили, которые не используются на текущей странице. Этот метод признан наиболее производительным. К сожалению, он связан с реализацией WebKit.

Но многие, как правило, связывают все таблицы стилей сайта в один или два файла, то есть посетитель загружает много правил CSS, даже не относящиеся к посещаемой странице.

Существует более простой способ:

<head>
</head>
<body>
<!-- HTTP/2 push this resource, or inline it, whichever's faster -->
<link rel="stylesheet" href="/site-header.css">
<header>…</header>
<link rel="stylesheet" href="/article.css">
<main>…</main>
<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>
<link rel="stylesheet" href="/about-me.css">
<section class="about-me">…</section>
<link rel="stylesheet" href="/site-footer.css">
<footer>…</footer>
</body>

Его смысл в том, что каждый <link rel="stylesheet">, блокирует рендеринг последующего содержания, пока загружается его таблица стилей, но позволяет визуализировать уже загруженные части контента. Таким образом, таблицы стилей загружаются параллельно, но применяются по очереди. Они ведут себя подобно <script src="…"> … </script>. Это дает вам последовательную визуализацию страницы.

В течении ближайших месяцев, Chorme будет двигаться к подобной модели, и больше пользователей смогут получить быстрый рендеринг веб-страниц.