Unieruchamiana strona URI danych

Question

Zbudowałem skrypt, który zastąpił wszystkie wstawione obrazy identyfikatorem URI danych w celu zmniejszenia żądań http i rozpoczęcia czasu ładowania na urządzeniach mobilnych.

Niestety doświadczyłem wolniejszego ładowania. Myślę, że to zależy od tego, czy plik HTML był większy (około 100 kb zamiast około 5 kb) :)? A może jest coś innego z identyfikatorami URI danych, które spowalniają ładowanie strony?

Czy przeglądarka musi pobrać cały dokument, zanim będzie mógł załadować do niego podobne źródła? Czy połączone źródła, na przykład css i javascript w górnej części dokumentu, zostaną załadowane zanim przeglądarka zakończy pełny dokument?

Jak to działa z CSS? Czy przeglądarka musi wczytać cały plik CSS przed odczytaniem wszystkich ustawień CSS?

Jeśli tak, to lepiej mieć plik CSS sepearate Uri danych tak: CSS

1. obciążenia dla konstrukcji
2. obciążenia CSS (brak danych URI) dla obrazów tła (wszystkie obrazy tła w Format URI)

Czy "oddzielny plik jpeg chacowany" ładuje się szybciej niż "obraz oparty na URI, który znajduje się w zbuforowanym pliku css"?

Wszelkie inne sugestie dotyczące korzystania z identyfikatorów URI danych?

Answer 1

mobify.com opublikował blogu: On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

[...]
więc można sobie wyobrazić moje zdziwienie, aby dowiedzieć się, kiedy pomiar wydajności setek tysięcy odsłon mobilnych, że ładowanie obrazy korzystające z danych URI są średnio 6x wolniejsze niż przy użyciu binarnego łącza źródłowego, takiego jak img z atrybutem src!

Nie zagłębiłem się w ten post, ale myślę, że częścią problemu może być wymagana moc procesora do dekodowania identyfikatorów URI danych kodowanych base64.

Autor zaleca używanie identyfikatorów URI danych tylko "rzadko w przypadku małych obrazów".

Answer 2

Zawartość HTML jest ładowana, aby pojawiły się w pliku HTML. Dane URI o dużym rozmiarze spowalniają stronę. Duży identyfikator URI danych nie jest obsługiwany w przeglądarkach IE (IE6).

Dane identyfikatora URI dla rozmiaru zdjęcia mniejszego niż 20 KB zalecane są zwykle w postaci &.

Masz opcję kompresji obrazu, js, kompresji css, aby zwiększyć szybkość stronicowania.