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 le î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 Q & A.

Intrebarea

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

Am remarcat că recent, multe site-uri web î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ă opusul așa cum era folosit când textul a fost afișat mai întâi, apoi imaginile și restul se încarcă 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, amintim un moment în care textul încărcat primul și tot ce altceva - gifurile GIF animate, fundalul cu cerneală și toate celelalte 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 misterului ultimului motiv why-the-fonts-load-ul:

Unul dintre motive este faptul că în prezent, designerii web preferă să utilizeze fonturi 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 cel de-al doilea și, în sfârșit, 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 duce și la problema că niciun 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 redare. Mă aștept ca acesta să fie 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 adevărat în cel puțin Chrome și Opera. Nu ați încercat alții).

(De asemenea, designerii presara JavaScript absolut peste tot în aceste zile, deci poate că cineva încearcă să facă ceva deștept cu textul, de aceea este întârziat. Dar 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 poatedeoarece din asta. Au fost multe comentarii în thread-ul întrebării, așa că voi încerca să mă extind un pic [...]

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

Pot să recomand postul 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 prinnu rendering text font text cu un font de rezervă în timpul perioadei de încărcare fonturi web.Chiar dacă fontul web este stocat în cache, acolovoi 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 memorat în memoria cache
• Voi: Descărcarea și afișarea datelor ttf / otf / woff
• Voi: Afișarea datelor cct-uri 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, acest lucru dă o întârziere. La caremăsură efectul este vizibil (mai ales când încărcați 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 browserului începând cu 2011-04-14 în partea de jos a postului:

• Firefox (din FFb11 și FF4 Final)nu mai are un FUT! Wooohoo! Http: //bugzil.la/499292 Practic, textul este invizibil timp de 3 secunde, iar 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 fiwebfontloader, 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.