Будущее загрузки CSS в Chrome
![Будущее загрузки CSS в Chrome](/uploads/posts/2016-02/1455974894_07c7fb31f70c735bb1b033cb93df5a62.png)
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 будет двигаться к подобной модели, и больше пользователей смогут получить быстрый рендеринг веб-страниц.
Комментариев 0