Zašto web stranice ne odmah prikazuju svoj tekst?

Ako ste skloni gledati okno preglednika s okom orlovima, možda ste primijetili da stranice često učitavaju svoje slike i izgled prije učitavanja teksta - upravo obrnuto opterećenje koje smo imali tijekom 1990-ih. Što se događa?

Današnja pitanja i odgovori nam se javljaju zahvaljujući SuperUseru - podjele Stack Exchange-a, zajednice-driven grupiranja Q & A web stranica.

Pitanje

Čitatelj SuperUser Laurent vrlo je znatiželjan zbog čega izgleda da točno stranice učitavaju elemente posve drukčije nego što su to učinile jednom davno. Piše:

Primijetio sam da su nedavno mnoge web stranice usporene za prikazivanje teksta. Obično se pozadina, slike i tako dalje učitavaju, ali ne i tekst. Nakon nekog vremena tekst se počinje pojavljivati ​​tu i tamo (ne uvijek sve to u isto vrijeme).

U osnovi radi suprotno kao i prije, kada je tekst prvi put bio prikazan, onda su slike i ostali utovarivali poslije. Kakvu novu tehnologiju stvara ovaj problem? Bilo koja ideja?

Imajte na umu da imam sporu vezu, što vjerojatno naglašava problem.

Pogledajte [gore] za primjer - sve je učitano, ali potrebno je još nekoliko sekundi prije nego što se tekst konačno prikazuje.

Pa što daje? Laurent, i mnogi od nas, sjećaju se vremena kada je tekst učitao prvi i sve ostalo - animirani GIF-ovi, popločeni pozadine i svi ostali artefakti web pregledavanja kraja 90-ih - došli su kasnije. Što uzrokuje trenutačno stanje elemenata dizajna, kasnije tekst?

Odgovor

SuperUser suradnik Daniel Andersson nudi predivno detaljan odgovor koji dobiva pravo na dno zašto-the-fonts-učitavanje zadnji otajstvo:

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

Prethodno, jedini fontovi koji su mogli biti prikazani na web mjestu bili su oni koje je korisnik lokalno instaliralo. Budući da npr. Korisnici Maca i Windowsa nisu nužno imali iste fontove, dizajneri instinktivno uvijek definiraju pravila kao

font-obitelj: 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 dodijeliti URL fonta kao pravilo CSS kako bi preglednik preuzeo font, kao takav:

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

i zatim učitajte font za određeni element npr.

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

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

Kao primjer: jedna od mojih nacionalnih novina, Dagens Nyheter, koristi web slova za svoje naslove, ali ne i njihove tragove, pa kad se ta stranica učita, obično vidim tragove, a pola sekunde kasnije sve prazne površine su popunjene s naslovima (to je točno na Chromeu i Operi, barem. Niste pokušali druge).

(Isto tako, dizajneri posvuda propagiraju JavaScript apsolutno svugdje, pa možda netko pokušava učiniti nešto pametno sa tekstom, zbog čega je odgođeno. To bi bilo vrlo određeno mjesto, iako: opća tendencija za tekstom biti će odgođena u tim Vjerujem da je vrijeme gore opisano pitanje web-pismo).

Dodatak:

Taj je odgovor postao vrlo upućen, iako nisam išao u puno detalja, ili moždajer od ovog. Bilo je mnogo komentara u pitanju nit, pa ću pokušati proširiti malo [...]

Fenomen je očito poznat kao "bljesak nezavidnog sadržaja" općenito, a posebno "bljesak neukusnog teksta". Traženje "FOUC" i "FOUT" daje više informacija.

Preporučujem web dizajner Paul Irishov post na FOUT u vezi s web fontovima.

Ono što se može primijetiti je da različiti preglednici to drže drugačije. Napisao sam gore da sam testirala Opera i Chrome, koji su se oboje ponašali slično. Svi oni temeljeni na webu (Chrome, Safari i sl.) Odlučuju izbjeći FOUT odne prikazivanje teksta web fonta sa zamjenskim fontom tijekom razdoblja učitavanja web fonta.Čak i ako web font je pohranjen u memoriju, tamohtjeti biti kašnjenje za prikazivanje, Postoji mnogo primjedbi u ovom pitanju, navodi se drugačije i da je pogrešno isprekidano da se privremeno spremljeni fontovi ponašaju ovako, npr. iz gornje veze:

U kojim slučajevima ćete dobiti FOUT

• Htjeti: Preuzimanje i prikazivanje udaljenog ttf / otf / woff
• Htjeti: Prikazivanje privremene memorije ttf / otf / woff
• Htjeti: Preuzimanje i prikaz podataka - uri ttf / otf / woff
• Htjeti: Prikazivanje predmemoriranih podataka - uri ttf / otf / woff
• Neće: Prikaz font koji je već instaliran i nazvan u vašem tradicionalnom fontu
• Neće: Prikaz fontova koji je instaliran i nazvan pomoću lokalnog () mjesta

Budući da Chrome čeka dok se ne riješi rizik FOUT prije prikazivanja, to daje kašnjenje. U kojojopseg učinak je vidljiv (pogotovo kada se učitava iz predmemorije) čini se, između ostalog, zavisi o količini teksta koji treba biti prikazan, a možda i drugim čimbenicima, ali predmemoriranje u potpunosti ne uklanja efekt.

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

• Firefox (od FFb11 i FF4 Final)više nema FOUT! Wooohoo! Http: //bugzil.la/499292 U osnovi tekst je nevidljiv 3 sekunde, a zatim vraća natrag font.Webfont vjerojatno će se učitati unutar tih tri sekunde iako ... nadamo se ...
• IE9 podržava WOFF i TTF i OTF (iako to zahtijeva ugradnju stvar bajt-uglavnom moot ako koristite WOFF).MEĐUTIM!!! IE9 ima FOUT. :(
• Webkit ima zakrpu koja čeka na slijetanje kako bi prikazala natrag tekst nakon 0,5 sekunde. Tako isto ponašanje kao FF, ali 0.5s umjesto 3s.

Ako je to bilo pitanje namijenjeno dizajnerima, moglo bi se ići na načine izbjegavanja takvih problema kao što suwebfontloader, ali to bi bilo još jedno pitanje. Pavlova irska veza ide dalje u vezi s tim pitanjem.

Imate li nešto za objašnjenje? Zvuči u komentarima. Želite li pročitati više odgovora od drugih tehnoloških korisnika Stack Exchangea? Pogledajte ovdje cijelu raspravu.