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

Dacă sunteți predispus 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ă?

Întrebarea de astăzi &Sesiunea de răspuns vine de la amabilitatea SuperUser - o subdiviziune a Stack Exchange, o grupare bazată pe comunitate a site-urilor web Q & A.

Întrebarea

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

Am observat că, recent, multe site-uri web încearcă să afișeze textul lor. 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).

Practic funcționează opusul așa cum era folosit când textul a fost afișat primul, 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 încă 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?

Contribuabilul

pentru răspunsul la SuperUser Daniel Andersson oferă un răspuns minunat detaliat care se îndreaptă spre partea de jos a ultimului mister: why one of the fonts-load-mystery:

Unul dintre motive este faptul că designerii web preferă să folosească fonturi web( de obicei în format WOFF), de exempluprin 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 dintotdeauna reguli ca

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

în cazul în care, în cazul în care primul font nu a fost găsit pe sistem, browser-ul va căuta al doilea, și în cele din urmă un font "sans-serif".

Acum se poate da o adresă URL 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 exemplu:

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 resursa nu a fost încărcată de browser, ceea ce include timpul de descărcare, timpul de încărcare a fonturilor și timpul de randare. Mă aștept ca acesta să fie artefactul pe care îl experimentați.

Ca 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 suntpopulate 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 in aceste zile, asa ca poate cineva incearca sa faca ceva inteligent cu textul, motiv pentru care este intarziat. Dar ar fi foarte specific site-ului: tendinta generala de a intarzia textulaceste timpuri este problema de fonturi web descrisă mai sus, cred.)

Adăugare:

Acest răspuns a devenit foarte upvoted, deși nu am intrat în prea multe detalii, sau poate deoarece de acest lucru. Au existat multe comentarii în firul de întrebări, așa că voi încerca să mă extind un pic [...]

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

Pot să recomand postul de 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 rendering text font text cu un font de rezervă în timpul perioadei de încărcare fonturi web. Chiar dacă fonturile web sunt stocate în cache, acolo va fi 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

• Will: Descărcarea și afișarea unei distanțe ttf /otf/ woff
• Will: Afișarea unui cache ttf /otf/ woff
• Will: Descărcarea și afișarea unui ttf de date /otf/ woff
• Va fi: Afișarea unui cache dat-uri ttf /otf/ woff
• Nu va: Afișarea unui font care este deja instalat și numit în stiva dvs. tradițională de fonturi
• Nu va: Afișarea unui font care este instalat și numit folosind local() locație

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

irlandez are, de asemenea, unele actualizări privind comportamentul browserului din 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 Practic, textul este invizibil timp de 3 secunde și apoi aduce înapoi fontul de rezervă.Webfont-ul se va încărca probabil în acele trei secunde, deși. .. sperăm că. ..
• IE9 acceptă WOFF și TTF și OTF( deși necesită un lucru de bitset încorporare - mai ales, dacă utilizați WOFF). Oricum! !!IE9 are un FOUT.:(
• Webkit are un patch care așteaptă să aterizeze pentru a arăta textul de rezervă după 0,5 secunde. Deci, același comportament ca FF, dar 0,5s în loc de 3s

Dacă aceasta a fost o întrebare adresată designerilor, s-ar putea găsi modalități de evitare a acestor tipuride probleme cum ar fi webfontloader, dar aceasta ar fi o altă întrebare Legătura dintre Paul și Irlanda se referă mai mult la această chestiune

Vrei să citești mai multe răspunsuri de la alte tehnologii?savvy Stack Exchange utilizatori? Uită-te la discuția completă aici