Dlaczego strony internetowe nie wyświetlają natychmiast swojego tekstu?

Jeśli masz tendencję do oglądania okienka przeglądarki z orłem, być może zauważyłeś, że strony często ładują swoje obrazy i układ przed załadowaniem ich tekstu - dokładnie odwrotny schemat ładowania, jakiego doświadczyliśmy w latach dziewięćdziesiątych. Co się dzieje?

Dzisiejsza sesja pytań i odpowiedzi przychodzi do nas dzięki uprzejmości SuperUser - poddziału Stack Exchange, społecznościowego forum z pytaniami i odpowiedziami.

Pytanie

Czytnik SuperUser Laurent jest bardzo ciekawy, dlaczego dokładnie strony ładują elementy zupełnie inaczej niż kiedyś. On pisze:

Zauważyłem, że ostatnio wiele stron internetowych powoli wyświetla ich tekst. Zazwyczaj tło, obrazy i tak dalej będą ładowane, ale bez tekstu. Po jakimś czasie tekst zaczyna pojawiać się tu i tam (nie zawsze wszystko w tym samym czasie).

Zasadniczo działa odwrotnie niż kiedyś, kiedy tekst był wyświetlany jako pierwszy, potem obrazy i pozostałe ładowały się później. Jaka nowa technologia tworzy ten problem? Dowolny pomysł?

Zwróć uwagę, że korzystam z wolnego połączenia, które prawdopodobnie akcentuje problem.

Zobacz [powyżej] na przykład - wszystko jest załadowane, ale zajmuje kilka sekund, zanim tekst zostanie ostatecznie wyświetlony.

Co daje? Laurent i wielu z nas pamięta czas, kiedy tekst załadowany jako pierwszy i wszystko inne - olśniewające animowane GIF-y, kafelkowe tła i wszystkie pozostałe artefakty późnego przeglądania stron internetowych z lat dziewięćdziesiątych - przyszły później. Co powoduje, że obecna sytuacja elementów projektu najpierw, tekst później?

Odpowiedź

Darczyńca SuperUser Daniel Andersson oferuje cudownie szczegółową odpowiedź, która trafia w samo sedno zagadki "dlaczego-the-fonts-load-last":

Jednym z powodów jest to, że projektanci stron internetowych w dzisiejszych czasach lubią używać czcionek internetowych (zwykle w formacie WOFF), np. przez czcionki Google Web.

Wcześniej jedynymi czcionkami, które mogły być wyświetlane na stronie, były te, które użytkownik zainstalował lokalnie. Ponieważ np. Użytkownicy komputerów Mac i Windows niekoniecznie mieli te same czcionki, więc 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 będzie szukała drugiej, a na końcu zastępczej czcionki "sans-serif".

Teraz można podać adres URL czcionki jako regułę CSS, aby przeglądarka pobierze czcionkę jako taką:

@import URL (http://fonts.googleapis.com/css?family=Droid+Serif: 400,700); 

a następnie załaduj czcionkę dla określonego elementu, np .:

rodzina czcionek: 'Droid Serif', sans-serif; 

Jest to bardzo popularne, aby móc używać niestandardowych czcionek, ale prowadzi 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, Dagens Nyheter, używa czcionek internetowych na swoich nagłówkach, ale nie na ich tropach, więc kiedy ta strona jest załadowana, zazwyczaj widzę ją najpierw, a pół sekundy później wszystkie puste przestrzenie powyżej są wypełnione z nagłówkami (tak jest przynajmniej w przypadku Chrome i Opery. Nie próbowałem innych).

(Również projektanci skrupulatnie używają skryptów JavaScript w dowolnym momencie, więc może ktoś próbuje zrobić coś sprytnego z tekstem, dlatego jest opóźniony, ale byłoby to bardzo specyficzne dla strony: ogólna tendencja do opóźniania tekstu w tych tekstach razy wydaje mi się, że problem z czcionkami sieciowymi opisano powyżej.)

Dodanie:

Ta odpowiedź została bardzo upowszechniona, chociaż nie wdawałem się w szczegółybo tego. W wątku pojawiało się wiele komentarzy, więc postaram się nieco rozszerzyć [...]

Zjawisko to nosi nazwę "flash of unstyled content" w ogóle, a "flash of unstyled text" w szczególności. Wyszukiwanie "FOUC" i "FOUT" daje więcej informacji.

Mogę polecić projektanta strony internetowej Paula Irlandczyka na portalu 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 testowałem Operę i Chrome, które zachowywały się podobnie. Wszystkie aplikacje oparte na WebKit (Chrome, Safari itp.) Postanawiają unikać FOUT bynie renderowanie czcionki internetowej czcionką zastępczą w okresie ładowania czcionek internetowych.Nawet jeśli czcionka internetowa jest tam buforowanabędzie być opóźnieniem renderowania. W wątku tym jest wiele komentarzy mówiących inaczej i że jest źle napisane, że czcionki z pamięci podręcznej 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 buforowanego pliku ttf / otf / woff
• Będzie: Pobieranie i wyświetlanie danych-uri ttf / otf / woff
• Będzie: 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 zainstalowanej i nazwanej przy użyciu lokalizacji local ()

Ponieważ Chrome czeka, aż ryzyko FOUT zniknie przed renderowaniem, spowoduje to opóźnienie. Do któregostopień efekt jest widoczny (zwłaszcza przy ładowaniu z pamięci podręcznej) wydaje się być zależny, między innymi, od ilości tekstu, który należy renderować i być może innych czynników, ale buforowanie nie usuwa całkowicie efektu.

Język irlandzki ma również kilka aktualizacji dotyczących zachowania przeglądarki od 2011-04-14 na dole postu:

• 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ą.Webfont prawdopodobnie załaduje się w ciągu tych trzech sekund ... mam nadzieję ...
• IE9 obsługuje WOFF i TTF i OTF (chociaż wymaga osadzania bitsetów - w większości przypadków dyskusyjnych, jeśli używasz WOFF).JEDNAK!!! IE9 ma FOUT. :(
• Webkit ma łatkę czekającą na lądowanie, aby pokazać tekst zastępczy po 0,5 sekundy. Tak samo zachowanie jak FF, ale 0.5s zamiast 3s.

Jeśli było to pytanie skierowane do projektantów, można znaleźć sposoby na uniknięcie tego rodzaju problemów, takich jakwebfontloader, ale to byłoby kolejne pytanie. Łącze Paul irlandzkie bardziej szczegółowo omawia tę kwestię.

Czy masz coś do dodania do wyjaśnienia? Dźwięk w komentarzach. Chcesz przeczytać więcej odpowiedzi od innych użytkowników Stack Exchange, którzy znają się na technologii? Sprawdź cały wątek dyskusji tutaj.