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, opartego na społecznościach grupowania witryn 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, a następnie obrazy i pozostałe pliki ł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] dla przykładu - wszystko zostało wczytane, 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, kafelki tła i wszystkie pozostałe artefakty późnego przeglądania stron internetowych z lat dziewięćdziesiątych - przyszły później. Co powoduje obecną sytuację elementów projektu, najpierw tekst?

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 przez:

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 ich tropów, więc kiedy ta strona jest załadowana, zazwyczaj widzę najpierw kontakty, a pół sekundy później wszystkie puste przestrzenie powyżej są wypełnione z nagłówkami (tak jest przynajmniej w Chrome i Operze. Nie próbowałem innych).

(Również obecnie projektanci skrupulatnie używają skryptów JavaScript, więc być może ktoś próbuje zrobić coś sprytnego z tekstem, dlatego jest opóźniony.To byłoby jednak 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 przegłosowana, chociaż nie wdawałem się w szczegóły bo tego. W wątku pojawiało się wiele komentarzy, więc spróbuję nieco rozszerzyć [...]

Zjawisko to jest znane jako "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 stron internetowych 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 oparte na WebKit (Chrome, Safari itp.) Wybierają, aby unikać FOUT by nie renderowanie tekstu czcionki internetowej z czcionką zastępczą w okresie ładowania czcionek internetowych. Nawet jeśli czcionka internetowa jest tam buforowana bę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órego stopień efekt jest widoczny (zwłaszcza przy ładowaniu z pamięci podręcznej) wydaje się zależeć między innymi od ilości tekstu, który musi być renderowany i może od 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 (choć wymaga osadzenia 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 by znaleźć sposób na uniknięcie tego rodzaju problemów, takich jak webfontloader, ale to byłoby kolejne pytanie. Łącze Paul-Iris 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.