Jeśli masz skłonność do obserwowania okienka przeglądarki „orlym okiem”, być może zauważyłeś, że strony często wczytują swoje obrazy i układ przed załadowaniem tekstu - dokładnie odwrotny wzorzec ładowania, z którym mieliśmy do czynienia w latach 90. Co się dzieje?
Dzisiejsza sesja pytań i odpowiedzi jest dostępna dzięki uprzejmości SuperUser - części Stack Exchange, grupy witryn internetowych z pytaniami i odpowiedziami.
Pytanie
Czytnik SuperUser Laurent jest bardzo ciekawy, dlaczego strony wydają się ładować elementy zupełnie inaczej niż kiedyś. On pisze:
Zauważyłem, że ostatnio wiele witryn powoli wyświetla tekst. Zwykle ładowane są tło, obrazy i tak dalej, ale bez tekstu. Po jakimś czasie tekst zaczyna pojawiać się tu i ówdzie (nie zawsze cały naraz).
Zasadniczo działa odwrotnie niż kiedyś, kiedy tekst był wyświetlany jako pierwszy, potem obrazy, a reszta ładowała się później. Jaka nowa technologia powoduje ten problem? Dowolny pomysł?
Zauważ, że mam wolne łącze, co prawdopodobnie uwydatnia problem.
Zobacz przykład [above] - wszystko jest załadowane, ale zanim tekst zostanie ostatecznie wyświetlony, minie jeszcze kilka sekund.
Więc co daje? Laurent i wielu z nas pamięta czas, kiedy najpierw ładował się tekst, a wszystko inne - jaskrawe animowane GIF-y, kafelki w tle i wszystkie inne artefakty z późnych lat 90. przeglądania stron internetowych - przyszło później. Co powoduje obecną sytuację najpierw elementów projektu, tekst później?
Odpowiedź
Współautor SuperUser Daniel Andersson oferuje cudownie szczegółową odpowiedź, która dociera do sedna tajemnicy, dlaczego czcionki są ładowane jako ostatnie:
Jednym z powodów jest to, że obecnie projektanci stron internetowych lubią używać czcionek internetowych (zwykle w formacie WOFF format), np. przez Czcionki internetowe Google .
Wcześniej jedynymi czcionkami, które można było wyświetlić w witrynie, były te, które użytkownik zainstalował lokalnie. Ponieważ np. Użytkownicy komputerów Mac i Windows niekoniecznie mieli te same czcionki, projektanci instynktownie zawsze definiowali reguły jako
rodzina czcionek: Arial, Helvetica, sans-serif;gdzie, jeśli pierwsza czcionka nie została znaleziona w systemie, przeglądarka wyszukałaby drugą, a na koniec zastępczą czcionkę „bezszeryfową”.
Teraz można podać adres URL czcionki jako regułę CSS, aby przeglądarka pobrała czcionkę, na przykład:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);a następnie wczytaj czcionkę dla konkretnego elementu np .:
rodzina czcionek: „Droid Serif”, sans-serif;Jest to bardzo popularne ze względu na możliwość korzystania z niestandardowych czcionek, ale prowadzi to również do problemu, że tekst nie jest wyświetlany, dopóki zasób nie zostanie załadowany przez przeglądarkę, co obejmuje czas pobierania, czas ładowania czcionki i czas renderowania. Spodziewam się, że jest to artefakt, którego doświadczasz.
Na przykład: jedna z moich krajowych gazet Dzisiejsze wiadomości używaj czcionek internetowych w swoich nagłówkach, ale nie do potencjalnych klientów, więc po załadowaniu tej witryny zwykle najpierw widzę potencjalnych klientów, a pół sekundy później wszystkie puste przestrzenie powyżej są wypełnione nagłówkami (dotyczy to Chrome i Opery, pod adresem najmniej. Nie próbowałem innych).
(Ponadto projektanci w dzisiejszych czasach używają JavaScript absolutnie wszędzie, więc może ktoś próbuje zrobić coś sprytnego z tekstem i dlatego jest opóźniony. Byłoby to jednak bardzo specyficzne dla witryny: ogólna tendencja do opóźniania tekstu w tych razy to kwestia czcionek internetowych opisana powyżej, jak sądzę).
Dodanie:
Ta odpowiedź spotkała się z bardzo pozytywnym przyjęciem, chociaż nie wdawałem się w szczegóły, a może dlatego tego. W wątku pytań było wiele komentarzy, więc spróbuję nieco rozszerzyć […]
Zjawisko to jest najwyraźniej ogólnie znane jako „błysk niestylizowanej treści”, aw szczególności „błysk niestylizowanego tekstu”. Wyszukiwanie „FOUC” i „FOUT” daje więcej informacji.
Mogę polecić Wpis projektanta stron internetowych Paula Irisha na FOUT w związku z czcionkami internetowymi .
Można zauważyć, że różne przeglądarki obsługują to inaczej. Napisałem powyżej, że przetestowałem Operę i Chrome, które zachowywały się podobnie. Wszystkie oparte na WebKit (Chrome, Safari itp.) Wybierają unikanie FOUT według nie renderowanie tekstu czcionki internetowej z czcionką zastępczą podczas okresu ładowania czcionki internetowej. Nawet jeśli czcionka internetowa jest tam buforowana będzie być opóźnieniem renderowania . W tym wątku z pytaniami jest wiele komentarzy, które mówią inaczej i że jest całkowicie błędne, że czcionki buforowane zachowują się w ten sposób, ale np. z powyższego linku:
W jakich przypadkach otrzymasz FOUT
- Będzie: Pobieranie i wyświetlanie zdalnego ttf / otf / woff
- Będzie: Wyświetlanie ttf / otf / woff z pamięci podręcznej
- Będzie: Pobieranie i wyświetlanie danych uri ttf / otf / woff
- Będzie: Wyświetlanie danych-uri z pamięci podręcznej ttf / otf / woff
- Nie będzie: Wyświetlanie czcionki, która jest już zainstalowana i nazwana w tradycyjnym stosie czcionek
- Nie będzie: Wyświetlanie czcionki, która jest zainstalowana i nazwana przy użyciu lokalizacji local ()
Ponieważ Chrome czeka, aż CZTERY ryzyko zniknie przed renderowaniem, powoduje to opóźnienie. Do którego stopień efekt jest widoczny (szczególnie podczas ładowania z pamięci podręcznej) wydaje się być zależny między innymi od ilości tekstu, który ma być renderowany i być może innych czynników, ale buforowanie nie usuwa całkowicie efektu.
Irish ma również pewne aktualizacje dotyczące zachowania przeglądarek w latach 2011–04–14 na dole posta:
- Firefox (od FFb11 i FF4 Final) nie ma już FOUT! Wooohoo! http://bugzil.la/499292 Zasadniczo tekst jest niewidoczny przez 3 sekundy, a następnie przywraca czcionkę zastępczą. Jednak czcionka internetowa prawdopodobnie załaduje się w ciągu tych trzech sekund… miejmy nadzieję…
- IE9 obsługuje WOFF, TTF i OTF (choć wymaga bit osadzający ustawić rzecz - głównie dyskusyjne, jeśli używasz WOFF). JEDNAK!!! IE9 ma FOUT. :(
- Webkit ma łata czekająca na wylądowanie aby wyświetlić tekst zastępczy po 0,5 sekundy. Takie samo zachowanie jak FF, ale 0,5 s zamiast 3 s.
Gdyby było to pytanie skierowane do projektantów, można by znaleźć sposoby, aby uniknąć takich problemów, jak
webfontloader, ale to byłoby inne pytanie. Link do Paul Irisha zawiera dalsze szczegóły w tej sprawie.
Masz coś do dodania do wyjaśnienia? Dźwięk w komentarzach. Chcesz przeczytać więcej odpowiedzi od innych zaawansowanych technicznie użytkowników Stack Exchange? Sprawdź cały wątek dyskusji tutaj .
