Jeśli masz skłonność do oglądania okienka przeglądarki sokolem okiem, być może zauważyłeś, że strony często ładują swoje obrazy i układ przed załadowaniem tekstu – dokładnie odwrotny wzorzec ładowania, którego doświadczyliśmy w latach 90-tych. Co się dzieje?
Dzisiejsza sesja pytań i odpowiedzi przychodzi do nas dzięki uprzejmości SuperUser — pododdziału Stack Exchange, społecznościowej grupy witryn internetowych z pytaniami i odpowiedziami.
Pytanie
Czytnik SuperUser Laurent jest bardzo ciekawy, dlaczego dokładnie strony wydają się ładować elementy zupełnie inaczej niż kiedyś. On pisze:
Zauważyłem, że ostatnio wiele stron internetowych powoli wyświetla swój tekst. Zwykle tło, obrazy itp. będą ładowane, ale bez tekstu. Po pewnym czasie tekst zaczyna pojawiać się tu i tam (nie zawsze cały w tym samym czasie).
Działa to w zasadzie odwrotnie, jak kiedyś, kiedy tekst był wyświetlany jako pierwszy, potem obrazy, a reszta ładowała się później. Jaka nowa technologia tworzy ten problem? Dowolny pomysł?
Zauważ, że korzystam z wolnego połączenia, co prawdopodobnie uwydatnia problem.
Widzieć [above] na przykład – wszystko jest wczytane, ale mija jeszcze kilka sekund, zanim tekst zostanie ostatecznie wyświetlony.
Więc co daje? Laurent i wielu z nas pamięta czasy, kiedy tekst ładował się jako pierwszy, a wszystko inne – jaskrawe animowane GIF-y, kafelkowe tła i wszystkie inne artefakty przeglądania stron internetowych z końca lat 90. – pojawiły się później. Co powoduje obecną sytuację najpierw elementów projektu, później tekstu?
Odpowiedź
Współtwórca SuperUser Daniel Andersson oferuje cudownie szczegółową odpowiedź, która dociera do sedna tajemnicy „dlaczego ładują się czcionki”:
Jednym z powodów jest to, że projektanci stron internetowych lubią obecnie używać czcionek internetowych (zwykle wWOFFformat), np. poprzezCzcionki 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 Maca i Windowsa niekoniecznie mieli te same czcionki, projektanci instynktownie zawsze definiowali reguły jako
font-family: Arial, Helvetica, sans-serif;
gdzie, jeśli pierwsza czcionka nie została znaleziona w systemie, przeglądarka szukałaby drugiej, a na końcu zastępczej czcionki „bezszeryfowej”.
Teraz można podać adres URL czcionki jako regułę CSS, aby przeglądarka mogła pobrać czcionkę, w następujący sposób:
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
a następnie wczytać czcionkę dla konkretnego elementu np.:
font-family: 'Droid Serif',sans-serif;
Jest to bardzo popularne, aby móc używać niestandardowych czcionek, ale prowadzi to również do problemu, że żaden 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 to jest artefakt, którego doświadczasz.
Jako przykład: jedna z moich krajowych gazet,Dagens Nyheter, używaj czcionek internetowych do ich nagłówków, ale nie ich potencjalnych klientów, więc gdy ta witryna jest ładowana, zwykle najpierw widzę potencjalnych klientów, a pół sekundy później wszystkie puste miejsca powyżej są wypełniane nagłówkami (dotyczy to Chrome i Opery, na najmniej. Nie próbowałem innych).
(Ponadto projektanci w dzisiejszych czasach umieszczają JavaScript absolutnie wszędzie, więc może ktoś próbuje zrobić coś sprytnego z tekstem, dlatego jest opóźniony. Byłoby to jednak bardzo specyficzne dla witryny: ogólna tendencja do opóźniania tekstu w tych razy jest opisany powyżej problem z czcionkami internetowymi.)
Dodanie:
Ta odpowiedź stała się bardzo przychylna, chociaż nie wdałam się w szczegóły, a możedlategotego. W wątku pytań było wiele komentarzy, więc postaram się nieco rozwinąć […]
Zjawisko to jest najwyraźniej ogólnie znane jako „flash of unstyled content”, a w szczególności „flash of unstyled text”. Wyszukiwanie „FOUC” i „FOUT” daje więcej informacji.
mogę polecićpost projektanta stron internetowych Paula Irisha na FOUT w związku z czcionkami internetowymi.
Można zauważyć, że różne przeglądarki radzą sobie z tym inaczej. Napisałem powyżej, że przetestowałem Operę i Chrome, które zachowywały się podobnie. Wszystkie te oparte na WebKit (Chrome, Safari itp.) unikają FOUT przeznierenderowanie tekstu czcionki internetowej za pomocą czcionki zastępczej podczas okresu ładowania czcionki internetowej.Nawet jeśliczcionka internetowa jest buforowana, tamWolabyć opóźnieniem renderowania. W tym wątku pytań jest wiele komentarzy mówiących inaczej i że jest całkowicie błędne, że buforowane czcionki zachowują się w ten sposób, ale np. z powyższego linku:
W jakich przypadkach dostaniesz FOUT
- Wola:Pobieranie i wyświetlanie zdalnego ttf/otf/woff
- Wola:Wyświetlanie buforowanego ttf/otf/woff
- Wola:Pobieranie i wyświetlanie danych-uri ttf/otf/woff
- Wola:Wyświetlanie buforowanych danych-uri 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ż ryzyko FOUT zniknie przed renderowaniem, daje to opóźnienie. Do któregostopieńefekt jest widoczny (zwłaszcza przy wczytywaniu z pamięci podręcznej) wydaje się być zależny m.in. od ilości tekstu, który trzeba wyrenderować i być może innych czynników, ale buforowanie nie usuwa całkowicie efektu.
Irish ma również pewne aktualizacje dotyczące zachowania przeglądarki od 2011–04–14 na dole posta:
- Firefox(od FFb11 i FF4 Final)nie ma już FOUT!Hurra!http://bugzil.la/499292Zasadniczo tekst jest niewidoczny przez 3 sekundy, a następnie przywraca czcionkę zastępczą. Czcionka prawdopodobnie załaduje się w ciągu tych trzech sekund… miejmy nadzieję…
- IE9 obsługuje WOFF oraz TTF i OTF (chociaż wymagabit do osadzaniaustaw coś– głównie dyskusyjny, jeśli używasz WOFF).JEDNAK!!! IE9 ma FOUT.🙁
- Webkit małatka czeka na lądowanieaby wyświetlić tekst zastępczy po 0,5 sekundy. Tak samo zachowanie jak FF, ale 0.5s zamiast 3s.
Gdyby to było pytanie skierowane do projektantów, można by znaleźć sposoby na uniknięcie tego rodzaju problemów, takich jak:
webfontloader, ale to byłoby inne pytanie. Link Paul Irish zawiera więcej szczegółów na ten temat.
Masz coś do dodania do wyjaśnienia? Dźwięk w komentarzach. Chcesz przeczytać więcej odpowiedzi od innych doświadczonych technologicznie użytkowników Stack Exchange?Sprawdź pełny wątek dyskusji tutaj.