Prečo webové stránky ihneď nezobrazia svoj text?

Ak ste náchylní na sledovanie okna prehliadača pomocou orla, možno ste si všimli, že stránky často načítavajú svoje obrázky a rozloženie pred načítaním textu - presne opačný vzorec zaťaženia, ktorý sme zažili počas deväťdesiatych rokov 20. storočia. Čo sa deje?

Dnešná relácia otázok a odpovedí sa k nám pridelí zdvorilosťou SuperUser - podskupiny Stack Exchange, zoskupenia webových stránok typu Q & A.

Otázka

Reader SuperUser Laurent je veľmi zvedavý, prečo sa zdá, že stránky presne načítajú prvky úplne inak než raz. On píše:

Všimol som si, že nedávno mnoho webových stránok pomaly zobrazuje svoj text. Zvyčajne sa načítajú pozadie, obrázky a podobne, ale žiadny text. Po nejakom čase sa text začína objavovať sem a tam (nie vždy to všetko súčasne).

V podstate pracuje naopak, ako to bolo v minulosti, keď bol text najskôr zobrazený, potom sa obrazy a zvyšok načítavali. Aká nová technológia vytvára tento problém? Akékoľvek nápady?

Upozorňujeme, že som na pomalom pripojení, čo pravdepodobne zvýrazňuje problém.

Pozri [vyššie] príklad - všetko sa načíta, ale trvá to ešte niekoľko sekúnd, kým sa text konečne zobrazí.

Takže čo dáva? Laurent a mnohí z nás si pamätajú, že čas, kedy bol najskôr načítaný text a všetko ostatné - skryté animované GIFy, dlaždené pozadia a všetky ostatné artefakty prehliadania webových stránok koncom 90. rokov - neskôr. Čo spôsobuje aktuálnu situáciu dizajnových prvkov, text neskôr?

Odpoveď

Sponzor SuperUser Daniel Andersson ponúka úžasne podrobnú odpoveď, ktorá sa dostala priamo do spodnej časti záhadu "prečo-na-fonty-zaťaženie":

Jedným z dôvodov je, že web dizajnéri v dnešnej dobe chcú používať webové písma (zvyčajne vo formáte WOFF), napr. prostredníctvom webových písiem Google.

Predtým boli jediné písma, ktoré sa mohli zobraziť na stránkach, tie, ktoré používateľ lokálne nainštaloval. Pretože napr. Používatelia počítačov Mac a Windows nemuseli mať nevyhnutne tie isté písma, dizajnéri inštinktívne vždy definovali pravidlá ako
font-family: Arial, Helvetica, sans-serif; 
kde, ak prvé písmo nebolo nájdené v systéme, prehliadač by hľadať druhý a nakoniec núdzové písmo "sans-serif".

Teraz je možné uviesť adresu URL písma ako pravidlo CSS, aby sa prehliadač dostal k stiahnutiu písma:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700); 
a potom načítať písmo pre konkrétny prvok napríklad:
font-family: "Droid Serif", sans-serif; 
To je veľmi populárne na to, aby bolo možné používať vlastné písma, ale vedie to aj k problému, že sa nezobrazí žiadny text, kým nebude obsah prehliadača načítaný, čo zahŕňa čas sťahovania, čas načítania písma a čas vykresľovania. Očakávam, že to je artefakt, ktorý zažívate.

Ako príklad: jeden z mojich národných novín, Dagens Nyheter, používa webové písma pre ich titulky, ale nie ich vedie, takže keď je táto webová stránka načítaná, zvyčajne vidím vodiče ako prvý a o pol sekundy neskôr všetky prázdne priestory sú naplnené s titulkami (to platí v prehliadači Chrome a Opera aspoň..

(Tiež dizajnéri posypať JavaScript absolútne všade v týchto dňoch, takže možno niekto sa snaží robiť niečo chytré s textom, čo je dôvod, prečo je oneskorené.To by bolo veľmi miestne špecifické, hoci: všeobecná tendencia, aby text oneskorený v týchto Times je otázka webového písma popísaná vyššie, verím.)

Doplnenie:

Táto odpoveď sa stala veľmi upvoted, aj keď som nešiel do detailov, alebo možno pretože z toho. Tam bolo veľa komentárov v otázke vlákno, a tak sa pokúsim rozšíriť trochu [...]

Tento fenomén je zjavne známy ako "blesk z neštandovaného obsahu" vo všeobecnosti a "blesk z neštandardného textu". Hľadanie výrazov "FOUC" a "FOUT" poskytuje viac informácií.

Môžem odporučiť príspevok webdesignera Paul Irish na FOUT v súvislosti s webovými písmenami.

Možno poznamenať, že rôzne prehliadače to zvládajú inak. Napísal (-a) som, že som skúšal Opera a Chrome, ktorí sa obaja správali podobne. Všetky programy založené na WebKit (Chrome, Safari atď.) Sa rozhodnú vyhnúť sa programu FOUT nie vykresľovanie textu písma na webe s náhradným písmom počas obdobia načítania fontov na webe. Aj keď webové písmo je uložené vo vyrovnávacej pamäti vôľa byť oneskorením vykreslenia. Existuje veľa pripomienok v tejto otázke vlákna hovoria inak a že je ploché zle, že písma uložené v cache sa správajú takto, ale napr. z vyššie uvedeného odkazu:

V akých prípadoch dostanete FOUT

will: Sťahovanie a zobrazenie vzdialeného ttf / otf / woff

will: Zobrazenie vyrovnávacej pamäte ttf / otf / woff v pamäti

will: Sťahovanie a zobrazovanie údajov ttf / otf / woff

will: Zobrazenie vyrovnávacej pamäte ctf / otf / woff

Nebude: Zobrazenie písma, ktoré je už nainštalované a pomenované v klasickom stĺpci písma

Nebude: Zobrazenie písma, ktoré je nainštalované a pomenované pomocou lokálneho () umiestnenia

Vzhľadom na to, že Chrome čaká, kým sa pred vykresľovaním stratí riziko FOUT, to spôsobí oneskorenie. Ku ktorému rozsah efekt je viditeľný (najmä pri načítaní z vyrovnávacej pamäte), zdá sa, závisí okrem iného na množstve textu, ktorý treba vykresliť a možno aj na iných faktoroch, ale ukladanie do vyrovnávacej pamäte úplne neodstráni účinok.

Írsky tiež obsahuje niektoré aktualizácie týkajúce sa správania sa prehliadača od 2011-04-14 v dolnej časti príspevku:

Firefox (od FFb11 a FF4 Final) už nemá FOUT! Wooohoo! Http: //bugzil.la/499292 V podstate je text neviditeľný po dobu 3 sekúnd a potom vráti záložný font. Webfont sa pravdepodobne načíta počas týchto troch sekúnd, hoci ... dúfajme ...

IE9 podporuje WOFF a TTF a OTF (aj keď to vyžaduje vkladanie bitset vec - väčšinou neplatí, ak používate WOFF). ALE !!! IE9 má FOUT. :(

Webkit má náplasť čakajúca na pristátie, aby zobrazila núdzový text po 0,5 sekundách. Rovnaké správanie ako FF, ale 0,5s namiesto 3s.

Ak by to bola otázka určená pre dizajnérov, mohlo by sa stať, ako sa vyhnúť týmto typom problémov, akými sú webfontloader, ale to by bola ďalšia otázka. Odkaz na Pavla írskeho odkazuje na túto otázku.

Máte niečo doplniť vysvetlenie? Vyjadrite sa v komentároch. Chcete sa dozvedieť viac odpovedí od iných používateľov technickej úrovne Stack Exchange? Pozrite sa na celý diskusný príspevok tu.