Na rozsądnym łączu prędkości opóźnienie i obciążenie związane z dodatkowym żądaniem prawdopodobnie przeważą zyski, ponieważ nie pobierają niewielkiej ilości (mam nadzieję, że skondensowane i spakowane) danych tekstowych, które nie są wymagane dla tego użytkownika aby wyświetlić stronę o tej rozdzielczości. Zobacz Ilya Grigorik's excellent post on latency, aby uzyskać więcej informacji o tym, jak to jest głównym ograniczeniem wydajności dla wielu użytkowników.
Koszt opóźnienia dodatkowych danych będzie szczególnie istotny w przypadku użytkowników urządzeń mobilnych (które będą oszczędzać energię swoich radiotelefonów, gdy nie są używane), a jeszcze bardziej na mobilnych połączeniach 2G lub 3G, które mają stosunkowo wysokie koszty w nawiązywanie połączeń (wydaje się, że znacznie poprawia to 4G).
Kluczem, jak w przypadku wszystkich tych rzeczy, jest testowanie i mierzenie - ale prawie na pewno spodziewam się, że łączenie stylów okaże się szybsze dla użytkowników. Nie zapomnij o tym, że każdy poprawny arkusz stylów (where the media query evaluates to true) zablokuje renderowanie strony.
Warto również zauważyć, że Ilya (który pracuje dla Google, więc powinien wiedzieć), że cytuje WebKit będzie jeszcze pobrać arkusze stylów multimedialne zapytania, które zwróci false, aczkolwiek o niskim priorytecie oraz w non-blocking sposób.
jeśli zapytanie mediów wartość false następnie arkusz stylów jest oznaczone jako nonblocking i podana jest bardzo niski priorytet pobierania
i
Jedyne zastrzeżenie , jak wskazuje Scott, jest to, że przeglądarka pobierze wszystkie włączone arkusze stylów, nawet jeśli ekran urządzenia nie może nigdy przekroczyć t on [cytowane] szerokość krótko
Patrząc na źródło WebKit wydaje się, jakby to wciąż się dzieje, prawdopodobnie, aby umożliwić natychmiastową reakcję na obracanie ekranu lub zmiany rozmiaru okna.
// Load stylesheets that are not needed for the rendering immediately with low priority.
223 ResourceLoadPriority priority = isActive ? ResourceLoadPriorityUnresolved : ResourceLoadPriorityVeryLow;
224 CachedResourceRequest request(ResourceRequest(document().completeURL(url)), charset, priority);
225 request.setInitiator(this);
226 m_cachedSheet = document().cachedResourceLoader()->requestCSSStyleSheet(request);
W przypadku takich pytań mogę bardzo polecić High Performance Browser Networking, które można przeczytać online za darmo.
Jakie nieistotne dane? Nagłówki odpowiedzi HTTP? – BoltClock
@ BoltClock'saUnicorn Miałem na myśli tylko oznaczenie css, które nie zostanie użyte (masz szeroki ekran o rozdzielczości 1280 pikseli, ale dostajesz niepotrzebnie duży plik z np. 5 zapytaniami o media). – Roni
Zostanie on załadowany, nawet jeśli jest nie jest używane, niezależnie od tego, czy zapytanie o media zostało umieszczone w CSS czy w tagu linku. – BoltClock