В настоящее время я изучаю различные методы оптимизации моего сайта, который скоро будет запущен html5. В итоге я посмотрел на 320 Энди Кларка и проект , который мне кажется довольно интересным.
Хотя это выглядит довольно изящной идеей для улучшения времени загрузки в мобильных браузерах, я не могу полностью понять, что выбрать между помещением всех медиазапросов в один большой файл CSS или разбиением их на разные файлы с разной шириной экрана. пороги.
Как я вижу до сих пор, в любом случае я не могу оптимизировать таблицы стилей так, как мне бы хотелось. Вот сценарии:
Я поместил все медиазапросы в один большой файл CSS. Хотя соответствующий код для мобильных браузеров находится только в первой четверти файла, файл загружается полностью, что приводит к потере некоторой полосы пропускания.
Я разбил таблицу стилей на несколько файлов (то есть будет иметь 320.css, 480.css, 786.css и т. Д.) И объявил каждый из них в заголовке с помощью чего-то в этой строке
<link rel="stylesheet" media="only screen and (min-width: 480px)" ...
В этом конкретном случае мобильные браузеры будут загружать только свой соответствующий файл, но компьютерные браузеры могут получить удар по производительности (который я не могу на самом деле определить количественно) из-за множественных запросов get для обработки всех файлов CSS, соответствующих их экрану ширина.
Что вы думаете об этом? Я уже знаю, что в итоге я пойду на компромисс. Суть вопроса в следующем: "какой?" .