Zašto web stranice ne odmah prikazuju svoj tekst?

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

Današnje pitanje &Sesija odgovora nam dolazi zahvaljujući SuperUseru - podjele Stack Exchange-a, grupiranjem zajednice Q & A web stranica.

Pitanje

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

Primijetio sam da su nedavno mnoge web stranice usporene da prikazuju svoj tekst. 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).

To 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.

Vidjeti [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 da web dizajneri danas vole koristiti web fontove( obično u WOFF formatu), nprputem Google Web fontova.

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

font-family: 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 možete dati font URL kao CSS pravilo 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-family: 'Droid Serif', sans-serif;

Ovo je vrlo popularno za upotrebu prilagođenih fontova, ali također dovodi do problema da se tekući tekst ne prikaže dok preglednik ne učita resurse, š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 iznadnaseljenih naslovima( to je točno na Chromeu i Operi, barem. Niste pokušali druge).

( Isto tako, dizajneri posvuda sprječavaju 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 sklonost kašnjenju tekstaovo vrijeme je gore opisano pitanje web-fontova, vjerujem.)

Dodatak:

Ovaj odgovor postao je vrlo upvotan, iako nisam prešao puno detalja, ili možda jer .U pitanju je bilo mnogo komentara, pa ću pokušati malo proširiti [...]

Fenomen očito je poznat kao "bljesak neukusanog sadržaja" općenito, a posebno "bljesak neukusanog 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 webkitski( Chrome, Safari i sl.) Izbjegavaju izbjegavanje FOUT-a pomoću i ne prikazivanje teksta fonta web-mjesta s rezerviranim fontom tijekom razdoblja učitavanja web-fonta. Čak i ako je web font fached, tamo će biti kašnjenje renderiranja .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.od gore navedene veze:

U kojim slučajevima ćete dobiti FOUT

• Hoće li: preuzimati i prikazati daljinski ttf /otf/ woff
• Hoće li: Prikazati predmemoriju ttf /otf/ woff
• Hoće li: Preuzimanje i prikazivanje podataka uri ttf /otf/ woff
• Hoće li: Prikazati podatke spremljene u memoriju - urit ttf /otf/ woff
• Neće: Prikazati font koji je već instaliran i nazvan u vašem tradicionalnom stalku fontova
• Neće: Prikaz font koji je instaliran i nazvan pomoću lokalnog() lokacija

Budući da Chrome čeka dok je rizik FOUT nestalo prije prikazivanja, to daje kašnjenje. Koliko je efekt u rasponu vidljiv( pogotovo prilikom učitavanja iz predmemorije), između ostalog ovisi o količini teksta koji treba biti prikazan, a možda i drugim čimbenicima, ali predmemoriranje u potpunosti ne uklanja efekt.

Irski ima i neka 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). svejedno! IE9 ima FOUT.:(
• Webkit ima zakrpu koja čeka na zemlju kako bi prikazala rezervirani tekst nakon 0,5 sekundi, tako da je isti ponašanje kao FF, ali 0.5s umjesto 3s.

Ako je to bilo pitanje namijenjeno dizajnerima,problema kao što je webfontloader, ali to bi bilo još jedno pitanje. Paul irski link ide u dodatne pojedinosti o ovom pitanju. JPG ima nešto za dodati objašnjenje? zvuči u komentare.Želite li pročitati više odgovora iz drugih tech-pametni korisnici razmjene Stacka? Pogledajte cijelu raspravu ovdje