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

Cuprins:

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

Video: De ce paginile Web nu afișează imediat textul?
Video: How To Make Formulas Work Automatically In Microsoft Excel | Make Formulas Calculate Automatically 2024, Martie
De ce paginile Web nu afișează imediat textul?
De ce paginile Web nu afișează imediat textul?
Anonim
 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ă?
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:

I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).

It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?

Note that I’m on a slow connection, which probably accentuates the problem.

See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.

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:

One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.

Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as

font-family: 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(https://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 că..
  • 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.

Recomandat: