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

Jeśli masz skłonność 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, którego doświadczyliśmy w latach dziewięćdziesiątych. Co się dzieje?

Dzisiejsze pytanie &Sesja odpowiedzi przychodzi do nas dzięki uprzejmości SuperUser - poddziału Stack Exchange, opartego na społecznościach grupy Q & A.

Pytanie Czytelnik

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

Zauważyłem, że ostatnio wiele stron internetowych powoli wyświetla swój 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, 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.

Patrz [powyżej] dla przykładu - wszystko zostało wczytane, ale trwa jeszcze kilka sekund, zanim tekst zostanie ostatecznie wyświetlony.

Więc 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 inne 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ź Daniel ASersson z portalu

SuperUser oferuje wspaniałą szczegółową odpowiedź, która trafia w samo sedno zagadki:

Jedną z przyczyn jest to, że projektanci stron internetowych w dzisiejszych czasach lubią używać czcionek internetowych( zazwyczaj w formacie WOFF).), npprzez 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 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 będzie szukała drugiej i wreszcie awaryjnej czcionki "sans-serif".

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

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

, a następnie załaduj czcionkę dla określonego elementu, na przykład:

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

Jest to bardzo popularne, aby móc używać niestandardowych czcionek, ale prowadzi 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 jest to artefakt, którego doświadczasz.

Jako przykład: jedna z moich krajowych gazet, Dagens Nyheter, używa czcionek internetowych dla ich nagłówków, ale nie ich tropów, 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 nagłówkami( tak jest przynajmniej w przypadku Chrome i Opery. 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 tekstute czasy są opisane powyżej, ale wydaje mi się, że jest to problem z czcionkami sieciowymi.)

Dodatek:

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

Zjawisko to jest ogólnie 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 WWW posta Paula Irlandczyka na temat FOUT w związku z czcionkami sieciowymi.

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.) Wolą unikać FOUT przez , a nie renderowania tekstu czcionki internetowej z czcionką zastępczą podczas ładowania czcionki internetowej. Nawet jeśli czcionka internetowa jest buforowana, będzie 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

• Will: Pobieranie i wyświetlanie zdalnego ttf /otf/ woff
• Will: Wyświetlanie buforowanego pliku /otf/ woff
• Wykonanie: Pobieranie i wyświetlanie danych-uri ttf /otf/ woff
• Will: 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 funkcji lokalnej() lokalizacja

Ponieważ Chrome czeka, aż ryzyko FOUT zniknie przed renderowaniem, spowoduje to opóźnienie. Do jakiego stopnia widoczny jest efekt( szczególnie 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.

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

Jeśli było to pytanie skierowane do projektantów, można znaleźć sposoby uniknięcia tego rodzajuproblemów, takich jak webfontloader, ale byłoby to inne pytanie: link do irlandzkiego Paula jest bardziej szczegółowy w tej kwestii

Czy masz coś do dodania do wyjaśnienia? Sound off w komentarzach. Chcesz przeczytać więcej odpowiedzi od innych tech-doświadczeni użytkownicy Stack Exchange? Sprawdź tutaj cały wątek dyskusji.