Dacă sunteți predispuși să urmăriți panoul browserului cu un ochi de vultur, este posibil să fi observat că paginile își încarcă frecvent imaginile și aspectul înainte de a încărca textul - modelul de încărcare opus exact pe care l-am experimentat în anii 1990. Ce se întâmplă?
Sesiunea de Întrebări și Răspunsuri de astăzi ne vine prin amabilitatea SuperUser - o subdiviziune a Stack Exchange, un grup de site-uri web de întrebări și răspunsuri bazat pe comunitate.
Intrebarea
Cititorul SuperUser, Laurent este foarte curios de ce exact paginile par să încarce elemente complet diferit decât au făcut odată. El scrie:
Am observat că, recent, multe site-uri web își încetează afișarea textului. De obicei, fundalul, imaginile și așa mai departe vor fi încărcate, dar nu text. După ceva timp, textul începe să apară ici și colo (nu întotdeauna tot în același timp).
Practic, funcționează opus, cum se obișnuia, când textul era afișat mai întâi, apoi imaginile și restul se încărcau după aceea. Ce tehnologie nouă creează această problemă? Vreo idee?
Rețineți că am o conexiune lentă, ceea ce probabil accentuează problema.
Consultați [above] pentru un exemplu - totul este încărcat, dar durează câteva secunde înainte ca textul să fie afișat în cele din urmă.
Deci, ce dă? Laurent, și mulți dintre noi, ne amintim de o perioadă în care textul s-a încărcat mai întâi și orice altceva - GIF-uri animate, fundaluri cu plăci și toate celelalte artefacte ale navigării pe web de la sfârșitul anilor 90 - au venit mai târziu. Ce cauzează situația actuală a elementelor de design mai întâi, textul mai târziu?
Răspunsul
Contribuitorul SuperUser, Daniel Andersson, oferă un răspuns minunat detaliat, care ajunge chiar în partea de jos a misterului de ce-font-încărcare-ultimul:
Unul dintre motive este că, în zilele noastre, designerilor web le place să utilizeze fonturi web (de obicei în WOFF format), de ex. prin Fonturi web Google .
Anterior, singurele fonturi care puteau fi afișate pe un site erau cele pe care utilizatorul le instalase local. Deoarece de ex. Utilizatorii de Mac și Windows nu au neapărat aceleași fonturi, designerii au definit întotdeauna reguli ca instinctiv
font-family: Arial, Helvetica, sans-serif;unde, dacă primul font nu a fost găsit pe sistem, browserul ar căuta al doilea și, în cele din urmă, un font de rezervă „sans-serif”.
Acum, se poate da o adresă URL a fontului ca regulă CSS pentru ca browserul să descarce un font, ca atare:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);și apoi încărcați fontul pentru un anumit element, de exemplu:
font-family: „Droid Serif”, sans-serif;Acest lucru este foarte popular pentru a putea utiliza fonturi personalizate, dar duce și la problema că nu este afișat niciun text până când resursa nu a fost încărcată de browser, care include timpul de descărcare, timpul de încărcare a fontului și timpul de redare. Mă aștept că acesta este artefactul pe care îl experimentați.
De exemplu: unul dintre ziarele mele naționale, Știrile de azi , utilizați fonturi web pentru titlurile lor, dar nu și pentru potențialii lor, așa că atunci când site-ul respectiv este încărcat, de obicei văd primul, iar jumătate de secundă mai târziu toate spațiile goale de mai sus sunt populate cu titluri (acest lucru este valabil în Chrome și Opera, la cel puțin. Nu am încercat pe alții).
(De asemenea, designerii presară JavaScript absolut peste tot în aceste zile, așa că poate cineva încearcă să facă ceva inteligent cu textul, motiv pentru care este întârziat. Totuși, acest lucru ar fi foarte specific site-ului: tendința generală a textului să fie întârziată în aceste ori este problema fonturilor web descrisă mai sus, cred.)
Plus:
Acest răspuns a devenit foarte votat, deși nu am intrat în prea multe detalii sau poate deoarece din aceasta. Au existat multe comentarii în firul întrebării, așa că voi încerca să extind puțin […]
Se pare că fenomenul este cunoscut sub numele de „fulger de conținut nestilizat” în general și „fulger de text nestilat” în special. Căutarea „FOUC” și „FOUT” oferă mai multe informații.
Pot recomanda postarea designerului web Paul Irish pe FOUT în legătură cu fonturile web .
Ceea ce se poate observa este că diferite browsere gestionează acest lucru diferit. Am scris mai sus că am testat Opera și Chrome, care s-au comportat la fel. Toate cele bazate pe WebKit (Chrome, Safari etc.) aleg să evite FOUT by nu redarea textului fontului web cu un font alternativ în timpul perioadei de încărcare a fontului web. Chiar dacă fontul web este memorat în cache, acolo voi să fie o întârziere de redare . Există o mulțime de comentarii în acest fir de întrebări care spun altfel și că este complet greșit faptul că fonturile din cache se comportă astfel, dar de ex. de pe linkul de mai sus:
În ce cazuri veți obține un FOUT
- Voi: Descărcarea și afișarea unei telecomenzi ttf / otf / woff
- Voi: Afișarea unui ttf / otf / woff în cache
- Voi: Descărcarea și afișarea unui data-uri ttf / otf / woff
- Voi: Afișarea unui cache de date-uri ttf / otf / woff
- Nu voi: Afișarea unui font care este deja instalat și denumit în stiva tradițională de fonturi
- Nu voi: Afișarea unui font care este instalat și denumit folosind locația local ()
Întrucât Chrome așteaptă până când riscul FOUR dispare înainte de redare, acest lucru dă o întârziere. La care măsură efectul este vizibil (mai ales atunci când se încarcă din cache) pare să fie dependent, printre altele, de cantitatea de text care trebuie redată și poate de alți factori, dar cache-ul nu elimină complet efectul.
Irish are, de asemenea, câteva actualizări privind comportamentul browserului începând cu 2011-04-14 în partea de jos a postării:
- Firefox (începând cu FFb11 și FF4 Final) nu mai are FOUT! Wooohoo! http://bugzil.la/499292 Practic, textul este invizibil timp de 3 secunde și apoi readuce fontul alternativ. Cu toate acestea, fontul web se va încărca în aceste trei secunde ... sperăm ...
- IE9 acceptă WOFF și TTF și OTF (deși necesită un bit de încorporare set set - în mare parte, dacă folosiți WOFF). IN ORICE CAZ!!! IE9 are un FOUT. :(
- Webkit are un petic care așteaptă să aterizeze pentru a afișa text alternativ după 0,5 secunde. Deci, același comportament ca FF, dar 0,5s în loc de 3s.
Dacă aceasta ar fi o întrebare adresată designerilor, s-ar putea merge în modalități de a evita astfel de probleme, cum ar fi
webfontloader, dar asta ar fi o altă întrebare. Legătura Paul Irish intră în detalii suplimentare cu privire la această chestiune.
Aveți ceva de adăugat la explicație? Sună în comentarii. Doriți să citiți mai multe răspunsuri de la alți utilizatori ai Stack Exchange? Consultați aici firul complet de discuție .
