Miért nem jelenik meg azonnal a weboldalak a szövegük?

Ha hajlamos vagy nézni a böngésző ablaktábláját sasszemmel, előfordulhat, hogy észrevette, hogy az oldalak gyakran betöltik a képeiket és elrendezésüket, mielőtt betöltik a szöveget - az ellenkező terhelési mintát, amit az 1990-es években tapasztaltunk. Mi történik?

A mai Kérdések és válaszok munkamenet a Jóvagyon - a Stack Exchange alosztályának, a közösség által vezérelt Q&A webhelyek csoportjának köszönhetően..

A kérdés

A SuperUser olvasó Laurent nagyon kíváncsi, hogy az oldalak miért pontosan másképpen töltik be az elemeket, mint egyszer. Ír:

Észrevettem, hogy a közelmúltban sok webhely lassan jeleníti meg a szöveget. Általában a háttér, a képek stb. Betöltődnek, de nincs szöveg. Egy idő után a szöveg itt és ott jelenik meg (nem mindig egyidejűleg).

Alapvetően az ellenkezőjét mûködik, amikor a szöveg elõször jelenik meg, majd a képek és a többi betöltõdött. Milyen új technológiát hoz létre ez a probléma? Bármilyen ötlete?

Ne feledje, hogy lassú kapcsolatom van, ami valószínűleg kiemeli a problémát.

Lásd a [fenti] példát - minden betöltött, de néhány másodpercet vesz igénybe a szöveg végleges megjelenése előtt.

Szóval mi ad? Laurent, és sokan közülünk, emlékszünk arra az időre, amikor a szöveg először betöltődött, és minden más - garrish animált GIF, csempézett hátterek, és a 90-es évek végi webböngészés összes többi tárgya később jött. Mi okozza a tervezési elemek jelenlegi helyzetét, később a szöveget?

A válasz

A SuperUser közreműködő, Daniel Andersson csodálatosan részletes választ kap, amelyre a betűkészlet-betöltött utolsó rejtély alapja áll:

Ennek egyik oka az, hogy a webes tervezők manapság webes betűtípusokat használnak (általában WOFF formátumban), pl. aGoogle Web betűtípusok segítségével.

Korábban az egyetlen olyan betűkészlet, amelyet egy webhelyen lehetett megjeleníteni, azok voltak, amelyeket a felhasználó helyben telepített. Mivel pl. A Mac és a Windows felhasználók nem feltétlenül rendelkeztek ugyanazokkal a betűtípusokkal, a tervezők ösztönösen mindig a szabályokat határozzák meg

font-család: Arial, Helvetica, sans-serif; 

ahol, ha az első betűkészletet nem találta a rendszeren, a böngésző megkeresi a második, és végül egy „sans-serif” betűtípust.

Most egy CSS-szabályként megadhat egy font URL-t, hogy a böngésző betöltse a betűtípust:

@import URL (http://fonts.googleapis.com/css?family=Droid+Serif:400,700); 

majd töltse be a betűtípust egy adott elemhez:

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

Ez nagyon népszerű ahhoz, hogy egyedi betűkészleteket használhasson, de azt is eredményezi, hogy nem jelenik meg szöveg, amíg az erőforrást a böngésző nem tölti be, amely tartalmazza a letöltési időt, a betöltési időt és a megjelenítési időt. Azt várom, hogy ez az artefakt, amit tapasztal.

Például: az egyik nemzeti újságom, a Dagens Nyheter, webcímkéket használ a főcímekhez, de nem az ólomhoz, így amikor a webhely betöltődik, általában az elsőt látom, és fél másodperccel később az összes üres szóköz van feltöltve a címekkel (ez a Chrome és az Opera esetében is igaz)..

(Ezenkívül a tervezők a mai napokban teljesen szétterítik a JavaScript-et, így talán valaki megpróbál valami okoskodni a szöveggel, ezért késik. Ez nagyon helyspecifikus lenne: az általános tendencia, hogy a szöveget késleltessék az előbb leírt web betűtípusok problémája, azt hiszem.)

Kiegészítés:

Ez a válasz nagyon felértékelődött, bár nem sokat részleteztem, vagy talán mert ebből. Sok kérdés érkezett a kérdésszálban, ezért megpróbálok kicsit bővíteni […]

A jelenséget úgy tűnik, mint általában „nem formázott tartalmak villanását”, és különösen a „nem színezett szöveg villogását”. A „FOUC” és a „FOUT” keresése több információt ad.

A web betűkészletekkel kapcsolatban ajánlhatom Paul Irish írónak a FOUT-on történő közzétételét.

Megjegyezzük, hogy a különböző böngészők ezt másképp kezelik. A fentiek szerint írtam az Opera és a Chrome tesztelését, akik mindketten hasonlóan viselkedtek. Minden WebKit alapú (Chrome, Safari, stb.) Úgy dönt, hogy elkerüli a FOUT-ot nem webes betűtípus szövegének visszaállítása a betűtípus betöltése során a web betűtípus betöltése során. Még akkor is, ha ott van a webes betűtípus akarat renderelt késleltetés. Van egy csomó megjegyzés ebben a kérdésben, amely másként szól, és hogy nem megfelelő, hogy a gyorsítótárazott betűtípusok ilyen módon viselkednek, de pl. a fenti linkről:

Milyen esetekben kap egy FOUT

• Akarat: Távoli ttf / otf / woff letöltése és megjelenítése
• Akarat: Gyorsítótárazott ttf / otf / woff megjelenítése
• Akarat: Adat-tt ttf / otf / woff letöltése és megjelenítése
• Akarat: Gyorsítótárban tárolt adat-tf / otf / woff megjelenítése
• Nem fog: A már telepített és a hagyományos betűkészletben elnevezett betűtípus megjelenítése
• Nem fog: A telepített és a helyi () helyről nevezett betűtípus megjelenítése

Mivel a Chrome mindaddig vár, amíg a FOUT kockázat eltűnik a megjelenítés előtt, ez késleltetést eredményez. Amelyhez mértékben a hatás látható (különösen, ha gyorsítótárból tölti be) úgy tűnik, hogy többek között a rendelkezésre álló szöveg mennyiségétől és esetleg más tényezőktől függ, de a gyorsítótár nem távolítja el teljesen a hatást.

Az ír is frissítéseket tartalmaz a böngésző viselkedéséről 2011-04-14 óta a bejegyzés alján:

• Firefox (mint az FFb11 és az FF4 döntő) már nincs FOUT! Wooohoo! Http: //bugzil.la/499292 Alapvetően a szöveg láthatatlan 3 másodpercig, majd visszaadja a tartalék betűtípust. A webhirdetés valószínűleg ezen három másodperc alatt fog betölteni, bár… remélhetőleg…
• Az IE9 támogatja a WOFF-t és a TTF-et és az OTF-et (bár ehhez beágyazott bitset-dologra van szükség - többnyire vitatott, ha a WOFF-ot használja). AZONBAN!!! Az IE9 FOUT. :(
• A Webkit-nek van egy javítása, amely várakozásra vár, hogy 0,5 másodperc elteltével megjelenjen a tartalék szöveg. Ugyanaz a viselkedés, mint az FF, de a 3-as helyett 0,5-es.

Ha ez egy tervezőnek szánt kérdés, akkor az ilyen jellegű problémák kiküszöbölésére kerülhet sor webfontloader, de ez egy másik kérdés lenne. A pápai ír link ebben a kérdésben részletesebben ismertet.

Van valami, amit hozzá kell adni a magyarázathoz? Kikapcsolja a megjegyzéseket. Szeretne további válaszokat olvasni más tech-savvy Stack Exchange felhasználóktól? Nézze meg a teljes beszélgetés szálát itt.