Zašto ne web stranice odmah prikazati njihov tekst?

Ako ste skloni gledanju okna preglednika s okom oka, možda ste primijetili da stranice često učitavaju svoje slike i izgled prije učitavanja njihovog teksta - točno suprotan uzorak učitavanja koji smo doživjeli tijekom 1990-ih. Što se događa?

Današnja sesija pitanja i odgovora dolazi nam ljubaznošću SuperUser-a, podjele Stack Exchangea, grupiranja web-lokacija za pitanja i odgovore u zajednici.

Pitanje

Čitač SuperUser Laurent je vrlo znatiželjan o tome zašto se točno čini da stranice učitavaju elemente potpuno drugačije nego što su to nekad činili. Piše:

Primijetio sam da su nedavno mnoge web lokacije sporije prikazivale svoj tekst. Obično se pozadina, slike itd. Učitavaju, ali nema teksta. Nakon nekog vremena tekst se počinje pojavljivati ​​tu i tamo (ne uvijek sve u isto vrijeme).

U osnovi radi suprotno kao i prije, kada je tekst prvi put prikazan, zatim se slike i ostatak nakon toga učitava. Koja nova tehnologija stvara ovo pitanje? Bilo koja ideja?

Imajte na umu da sam na sporoj vezi, što vjerojatno naglašava problem.

Za primjer pogledajte [gore] - sve je učitano, ali potrebno je nekoliko sekundi prije nego što se tekst konačno prikaže.

Pa što daje? Laurent, i mnogi od nas, sjećamo se vremena kada se tekst prvi put učitao, a sve ostalo - animirani GIF-ovi, crtane pozadine, i svi ostali artefakti kasnog web-pregledavanja kasnih 90-ih. Što prvo uzrokuje trenutnu situaciju elemenata dizajna, tekst kasnije?

Odgovor

Doprinositelj SuperUser-a Daniel Andersson nudi predivan detaljan odgovor koji dospijeva do dna zašto-the-fonts-load-last mystery:

Jedan od razloga je što web-dizajneri danas vole koristiti web-fontove (obično u WOFF formatu), npr. putem Googleovih web-fontova.

Ranije su jedini fontovi koji su se mogli prikazati na web-lokaciji bili oni koje je korisnik lokalno instalirao. Budući da je npr. Korisnici Mac i Windows ne moraju nužno imati iste fontove, dizajneri su instinktivno uvijek definirali pravila kao

obitelj fontova: Arial, Helvetica, sans-serif; 

gdje, ako prvi font nije pronađen na sustavu, preglednik će tražiti drugi, a na kraju i zamjenski font "sans-serif".

Sada se može dati URL fonta kao CSS pravilo da bi preglednik mogao preuzeti font kao takav:

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

i zatim učitati font za određeni element na primjer:

obitelj fontova: 'Droid Serif', sans-serif; 

To je vrlo popularno da biste mogli koristiti prilagođene fontove, ali to također dovodi do problema da se tekst ne prikazuje dok se ne učita resurs u pregledniku, što uključuje vrijeme preuzimanja, vrijeme učitavanja fonta i vrijeme prikazivanja. Očekujem da je to artefakt koji doživljavate.

Primjerice: jedan od mojih nacionalnih novina, Dagens Nyheter, koristi web-fontove za naslove, ali ne i njihove naslove, pa kad se ta stranica učita, obično prvo vidim tragove, a pola sekunde kasnije svi prazni prostori su popunjeni. s naslovima (to vrijedi barem za Chrome i Opera. Nisam probao druge).

(Također, dizajneri posipaju JavaScript apsolutno svugdje ovih dana, pa možda netko pokušava učiniti nešto pametno s tekstom, zbog čega je odgođen. To bi bilo vrlo specifično za određeno mjesto, međutim: opća tendencija da se tekst odgađa u tim Vjerojatno je gore navedeno pitanje o web-fontovima.)

Dodatak:

Taj je odgovor postao vrlo naglašen, iako nisam ulazio u detalje, ili možda jer od ovog. Bilo je mnogo komentara u nizu pitanja, pa ću pokušati malo proširiti […]

Fenomen je očigledno poznat kao "bljesak nepostojećeg sadržaja" općenito, a posebice "bljesak nepopisanog teksta". Traženje "FOUC" i "FOUT" daje više informacija.

Mogu preporučiti post web-dizajnera Paula Irisha na usluzi FOUT u vezi s web-fontovima.

Ono što se može primijetiti je da različiti preglednici rješavaju ovo drugačije. Gore sam napisao da sam testirao Opera i Chrome, koji su se oboje ponašali slično. Sve one temeljene na WebKit-u (Chrome, Safari, itd.) Izbjegavaju FOUT ne prikazivanje teksta web-fonta s rezervnim fontom tijekom razdoblja učitavanja web-fonta. Čak i ako tamo je spremljen web-font htjeti biti kašnjenje renderiranja. Postoji mnogo komentara u toj tematskoj temi koji govore drugačije i da je pogrešno da se predmemorirani fontovi ponašaju ovako, ali npr. s gornje veze:

U kojim slučajevima ćete dobiti FOUT

• Htjeti: Preuzimanje i prikazivanje udaljenog ttf / otf / woff
• Htjeti: Prikazuje spremljenu datoteku ttf / otf / woff
• Htjeti: Preuzimanje i prikazivanje podataka-uri ttf / otf / woff
• Htjeti: Prikazuje spremljene podatke uri ttf / otf / woff
• Neće: Prikazivanje fonta koji je već instaliran i nazvan u vašem tradicionalnom skupu fontova
• Neće: Prikazivanje fonta koji je instaliran i nazvan pomoću lokalne () lokacije

Budući da Chrome čeka dok FOUT rizik ne nestane prije prikazivanja, to uzrokuje kašnjenje. U kojoj opseg učinak je vidljiv (osobito pri učitavanju iz predmemorije), čini se da ovisi, između ostalog, o količini teksta koji se mora prikazati i možda o drugim čimbenicima, ali caching ne uklanja u potpunosti efekt.

Irski također ima ažuriranja o ponašanju preglednika od 2011-04-14 na dnu posta:

• Firefox (od FFb11 i FF4 Final) više nema FOUT! Http: //bugzil.la/499292 U osnovi, tekst je nevidljiv 3 sekunde, a zatim vraća zamjenski font. Webfont će se vjerojatno opteretiti unutar te tri sekunde, iako… nadamo se…
• IE9 podržava WOFF i TTF i OTF (iako zahtijeva ugradnju bitset stvari - uglavnom spor ako koristite WOFF). MEĐUTIM!!! IE9 ima FOUT. :(
• Webkit ima zakrpu koja čeka da sleti kako bi se prikazao rezervni tekst nakon 0,5 sekundi. Tako isto ponašanje kao FF, ali 0.5s umjesto 3s.

Ako je to bilo pitanje namijenjeno dizajnerima, moglo bi se otići na načine da se izbjegnu takve vrste problema webfontloader, ali to bi bilo drugo pitanje. Poveznica s Paulom Irskom detaljnije se bavi ovim pitanjem.

Imate li što dodati objašnjenju? Zvuk isključen u komentarima. Želite li pročitati više odgovora od drugih tehničkih korisnika Stack Exchangea? Pogledajte cjelokupnu temu za raspravu ovdje.