De ce paginile Web nu afișează imediat textul?

Dacă sunteți înclinat să vizionați panoul browserului cu un ochi de vultur, este posibil să fi observat că paginile le încarcă frecvent imaginile și aspectul înainte de a încărca textul - modelul de încărcare exact opus pe care l-am experimentat în anii 1990. Ce se întâmplă?

Sesiunea de întrebări și răspunsuri din ziua de astăzi vine de la amabilitatea SuperUser - o subdiviziune a Stack Exchange, o grupare bazată pe comunitate a site-urilor web Q & A.

Intrebarea

Editorul de aplicații SuperUser Laurent este foarte curios de ce paginile par să încarce elementele complet diferit decât au făcut odată. El scrie:

Am observat că, recent, multe site-uri web își încearcă să afișeze textul. De obicei, fundalul, imaginile și așa mai departe vor fi încărcate, dar nu există text. După ceva timp, textul începe să apară aici și acolo (nu întotdeauna totul în același timp).

În principiu, funcționează exact opusul, așa cum a fost atunci când textul a fost 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.

Vedeți [de mai sus] pentru un exemplu - totul este încărcat, dar este nevoie de câteva secunde înainte ca textul să fie afișat în cele din urmă.

Deci, ce dă? Laurent, și mulți dintre noi, amintesc că un moment în care textul a încărcat primul și toate celelalte - GIF-urile animate, fundalul și alte artefacte ale navigării 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?

Răspunsul

Contribuabilul SuperUser Daniel Andersson oferă un răspuns minunat detaliat care se îndreaptă spre partea de jos a ultimului mister din motivul "de ce-the-fonts-load-ul":

Unul dintre motive este faptul că designerii de web preferă utilizarea fonturilor web (de obicei în format WOFF), de ex. prin intermediul fonturilor Google Web.

Anterior, singurele fonturi care au putut fi afișate pe un site au fost cele pe care utilizatorul le-a instalat local. Deoarece, de exemplu, Utilizatorii de Mac și Windows nu aveau neapărat aceleași fonturi, iar designerii au definit întotdeauna reguli întotdeauna ca fiind

font-familie: Arial, Helvetica, sans-serif; 

unde, în cazul în care primul font nu a fost găsit pe sistem, browserul va căuta al doilea și, în fine, un font "sans-serif".

Acum, se poate da un URL de font ca regulă CSS pentru a obține 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 ex .:

font-family: "Droid Serif", sans-serif; 

Acest lucru este foarte popular pentru a putea utiliza fonturi personalizate, dar conduce la problema că nici un text nu este afișat până când resursele nu au fost încărcate de browser, ceea ce include timpul de descărcare, timpul de încărcare a fonturilor și timpul de randare. Mă aștept că acesta este artefactul pe care îl experimentați.

De exemplu, unul dintre ziarele mele naționale, Dagens Nyheter, folosește fonturi web pentru titlurile lor, dar nu și conducătorii lor, așa că atunci când site-ul este încărcat, văd mai întâi conductorii și o jumătate de secundă mai târziu toate spațiile goale de mai sus sunt populate cu titluri (acest lucru este valabil și în cazul Chrome și Opera, cel puțin nu au încercat alții).

(De asemenea, designerii presara JavaScript absolut peste tot în aceste zile, deci poate că cineva încearcă să facă ceva inteligent cu textul, de aceea este întârziat, însă ar fi foarte specific site-ului: tendința generală de a întârzia textul ori este problema de fonturi web descrisă mai sus, cred.)

Plus:

Acest răspuns a devenit foarte rău, deși nu am făcut prea multe detalii sau poate deoarece din asta. Au fost multe comentarii în firul de întrebări, așa că voi încerca să mă extind un pic [...]

Fenomenul este aparent cunoscut sub numele de "bliț de conținut neuniform", în general, și, în special, "bliț de text necitit". Căutarea "FOUC" și "FOUT" oferă mai multe informații.

Pot recomanda postarea web designer Paul Irish pe FOUT în legătură cu fonturile web.

Ceea ce se poate observa este că diferite browsere se ocupă de acest lucru diferit. Am scris mai sus că am testat Opera și Chrome, care s-au comportat în mod similar. Toate cele bazate pe WebKit (Chrome, Safari, etc.) aleg să evite FOUT prin nu redarea textului fontului web cu un font de rezervă în timpul perioadei de încărcare a fonturilor web. Chiar dacă fontul web este stocat în cache, acolo voi fie o întârziere de redare. Există o mulțime de comentarii în acest thread de întrebare spunând altfel și că este greșit că fonturile memorate în cache se comportă așa, dar de ex. de la link-ul 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 memoria cache
• Voi: Descărcarea și afișarea datelor ttf / otf / woff
• Voi: Afișarea datelor stocate în memorie ttf / otf / woff
• Nu voi: Afișarea unui font care este deja instalat și numit în stiva de fonturi tradiționale
• Nu voi: Afișarea unui font care este instalat și denumit utilizând locația locală ()

Din moment ce Chrome așteaptă până când riscul FOUT nu este îndepărtat înainte de redare, aceasta dă o întârziere. La care măsură efectul este vizibil (mai ales când se încarcă din cache) pare să depindă, printre altele, de cantitatea de text care trebuie redată și de alți factori, dar cache-ul nu elimină complet efectul.

Irlandez are, de asemenea, unele actualizări privind comportamentul browser-ului începând cu 2011-04-14 în partea de jos a postului:

• Firefox (din FFb11 și FF4 Final) nu mai are un Fout! Wooohoo! Http: //bugzil.la/499292 În principiu, textul este invizibil timp de 3 secunde, apoi se aduce înapoi fontul de rezervă. Webfont se va încărca probabil în cele trei secunde, deși ... sperăm ...
• IE9 acceptă WOFF și TTF și OTF (deși necesită un lucru de bitset încorporare - cea mai mare parte moot dacă utilizați WOFF). IN ORICE CAZ!!! IE9 are un Fout. :(
• Webkit are un patch care așteaptă să aterizeze pentru a afișa textul de rezervă 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 găsi modalități de a evita astfel de probleme cum ar fi webfontloader, dar aceasta ar fi o altă întrebare. Legătura dintre Paul și Irlanda trece în detaliu în această privință.

Aveți ceva de adăugat la explicație? Sunați în comentariile. Doriți să citiți mai multe răspunsuri de la alți utilizatori de tehnologie Stack Exchange? Check out discuția completă aici.