Производительность CSS по сравнению с размещением медиа-запросов

Question

Я работаю над своим вторым набегом в разработке отзывчивого веб-сайта для своего бизнеса. Мне интересно, как лучше всего организовать мой файл css с учетом производительности браузера.

Будет только один файл css со всеми включенными медиа-запросами (есть три разрыва: полный размер, вертикальный планшет, телефон). В настоящее время все мои медиа-запросы идут в конце файла (проще найти то, что я точно настраиваю в данный момент). Я размышлял над созданием полного css для каждого перерыва, а затем вызывал их по отдельности на основе медиа-запросов, но недавно читал, что тесты показали, что браузеры все еще загружают все разные файлы css, но затем используют только соответствующий, что просто означает большую загрузку без какой-либо выгоды.

Как только все будет готово, было бы лучше переместить различные M-Q, чтобы они сидели сразу после своего «стандартного» css-аналога (например, размер шрифта вертикального размера планшета, сразу после размера шрифта «по умолчанию»). Или браузер просматривает весь файл CSS, прежде чем начинать визуализацию страницы.

Помещение M-Q в виде фрагментов, разбросанных по файлу css, позволяет загрузить более крупную начальную загрузку css-файлов из-за реплицированного кода @media для каждого фрагмента. Но если это заставляет браузер визуализировать быстрее ....

Аспект, который меня озадачил, был базовый размер шрифта, так как я немного изменю его для планшетов против телефонов и рабочего стола, чтобы разместить расстояния для просмотра. И так как все размеры шрифтов, отступы и поля основаны на единицах rem, изменение базового размера влияет на множество предметов.

Итак, с точки зрения чисто производительности (загрузка и рендеринг браузера) один из методов предпочтительнее других (-ов)?

дополнительные детали ...

Я думаю, возможно, что я должен спросить, каким образом браузер использовать файл CSS. Прочитывает ли он весь файл css и затем начинает рендеринг? Или он начинает рендеринг с первой строкой css, а затем следующей строкой и следующей строкой?

Answer 1

Ну, я не уверен, что для этого не было убедительно, но, например, сайт w3.org использует технику «загрузка по медиаресурсам».

<link rel="stylesheet" href="/2008/site/css/minimum" type="text/css" 
    media="handheld, all" /> 
<style type="text/css" 
    media="print, screen and (min-width: 481px)"> 
/*<![CDATA[*/ 
@import url("/2008/site/css/advanced"); 
/*]]>*/ 
</style> 
<link href="/2008/site/css/minimum" rel="stylesheet" type="text/css" 
    media="handheld, only screen and (max-device-width: 480px)" /> 
<meta name="viewport" content="width=device-width" /> 
<link rel="stylesheet" href="/2008/site/css/print" type="text/css" 
    media="print" /> 

, чтобы заставить браузер загружать активы по типам носителей.

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

В вашем вопросе вы упоминаете 1 единственный файл .css, поэтому, возможно, вы застряли, но если вы можете разделить файл в 3 разных файлах, пример поможет. Счетная часть состоит в том, что если вы используете запросы «размерности», браузеру, возможно, придется загрузить следующий файл css, если пользователь минимизирует или уменьшает область просмотра.

Кроме того, если ваш дизайн НЕ должен сильно меняться, или если результирующий файл довольно мал, да, один одиночный .css-файл будет лучше, чем разные файлы, охваченные медиа-запросами (для обслуживания и кеширования).

Надеется, что это помогает