Proč webové stránky neprodleně zobrazují svůj text?

Pokud jste náchylní sledovat podokno prohlížeče pomocí orla, možná jste si všimli, že stránky často načítají své obrázky a rozložení před načtením textu - přesně opačný vzorek načítání, který jsme zažili během devadesátých let. Co se děje?

dnešní otázka &Odpověď na zasedání se k nám dostala s laskavým svolením SuperUser - podřízenou výměnou Stack Exchange, skupině webů Q & A založených na komunitě.

Otázka

Reader SuperUser Laurent je velmi zvědavý, proč se zdá, že přesně stránky načítají elementy úplně jinak než jednou. Píše:

Všiml jsem si, že v poslední době mnoho webových stránek pomalu zobrazuje jejich text. Obvykle budou pozadí, obrázky a podobně načteny, ale žádný text. Po nějakém čase se text začíná objevovat tady a tam( ne vždy to vše současně).

V podstatě pracuje naopak, jako když kdysi byl text zobrazen, pak se obrázky a ostatní začaly načítat. Jaká nová technologie vytváří tento problém? Nějaký nápad?

Všimněte si, že jsem na pomalém připojení, což pravděpodobně zvýrazní problém.

Pro příklad - vše je načteno, ale trvá to ještě několik sekund, než se konečně zobrazí text.

Takže co dává?Laurent a mnozí z nás si pamatují čas, kdy se text načten nejprve a všechno ostatní - podivné animované GIF, dlaždicové pozadí a všechny ostatní artefakty procházení webu koncem devadesátých let - přišly později. Co způsobí aktuální situaci prvků návrhu nejdříve, text později?

Asistent odpovědi

SuperUser Daniel Andersson nabízí úžasně detailní odpověď, která se dostává přímo do dolní části tajemství proč se fonty načítat:

Jedním z důvodů je, že weboví designéři dnes chtějí používat webové písma( obvykle ve formátu WOFF), napřprostřednictvím webových písemGoogle.

Dříve byly pouze fonty, které byly na webu zobrazeny, pouze ty, které uživatel instaloval místně.Protože např.Uživatelé Mac a Windows nemuseli nutně mít stejné písma, návrháři instinktivně vždy definovali pravidla jako

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

kde, pokud první písmo nebylo nalezeno v systému, prohlížeč by hledal druhý a nakonec záložní písmo "sans-serif".

Nyní můžete zadat adresu URL písma jako pravidlo CSS, aby se prohlížeč dostal ke stažení písma:

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

a pak načíst písmo pro konkrétní prvek například:

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

Toto je velmi populární, pokud chcete používat vlastní písma, ale také vede k problému, že se žádný text nezobrazí, dokud nebude prostředek načten prohlížečem, což zahrnuje čas stahování, čas načítání písma a čas vykreslení.Očekávám, že se jedná o artefakt, který zažíváte.

Jako příklad: jeden z mých národních novin, Dagens Nyheter, používá webové fonty pro jejich titulky, ale ne jejich vodítka, takže když je toto místo načteno, obvykle vidím vodiče jako první a o půl vteřiny později jsou všechny prázdné prostory výšenabité titulky( to platí v případě Chrome a Opera alespoň. Nezkoušejte ostatní).

( Také designéři poskakují JavaScript absolutně všude v dnešních dnech, takže možná někdo se pokouší udělat něco šikovného s textem, což je důvod, proč je zpožděno. To by však bylo velmi specifické pro danou stránku: obecná tendence k tomu, aby byl text zpožděntato doba je webová písemná otázka popsaná výše.)

Doplněk:

Tato odpověď se stala velmi upvoted, ačkoli jsem nešel příliš podrobně, nebo možná protože tohle. V dotazu se objevilo mnoho komentářů, takže se pokouším trochu rozšířit [...]

Tento fenomén je zjevně známý jako "blesk z neoslepeného obsahu" obecně a "flash neštěstí textu" zvláště.Vyhledávání "FOUC" a "FOUT" poskytuje více informací.

Doporučuji web designer Paul Irish na FOUT v souvislosti s webovými písmy.

Dá se na paměti, že různé prohlížeče to zvládnou jinak. Napsal jsem výše, že jsem testoval Opera a Chrome, kteří se podobně chovali. Všechny weby založené na WebKit( Chrome, Safari atd.) Se rozhodnou vyhnout FOUT tím, že ne, vykresluje text písma webových stránek se spuštěným písmo během období načítání fontů na webu. I když je webový font uložen do mezipaměti, bude zpožděním rendrování .Existuje mnoho komentářů v této otázce vlákno říkat jinak a že je naprosto špatně, že mezipaměti písma se chovají takhle, ale např.z výše uvedeného odkazu:

V jakých případech dostanete FOUT

• Will: Stažení a zobrazení vzdáleného ttf /otf/ woff
• Will: Zobrazí cached ttf /otf/ woff
• Will: Stažení a zobrazení data-uri ttf /otf/ woff
• Will: Zobrazí data uložená v mezipaměti ttf /otf/ woff
• Neuvádí: Zobrazení písma, který je již nainstalován a pojmenován ve vašem tradičním zásobníku písem
• Neuloží: Zobrazení písma, který je nainstalován a pojmenován pomocí lokálního() location

Protože Chrome čeká, dokud nebude riziko FOUT před vykreslováním, je to zpoždění.K čemu rozsah efekt je vidět( zejména při načítání z mezipaměti) se zdá být závislý mimo jiné na množství textu, který potřebuje být vykreslen a možná i další faktory, ale ukládání do mezipaměti zcela nezmizí efekt.

Irish také obsahuje některé aktualizace týkající se chování prohlížeče od 2011-04-14 v dolní části příspěvku:

• Firefox ( od FFb11 a FF4 Final) už nemá FOUT! Wooohoo! Http: //bugzil.la/ 499292 V podstatě je text neviditelný po dobu 3 sekund a pak jej vrátí záložní písmo. Webfont bude pravděpodobně načítán během těchto tří vteřin, ačkoliv. .. doufejme. .
• IE9 podporuje WOFF a TTF a OTF( ačkoli to vyžaduje vkládání věci bitset - většinou neplatí, pokud používáte WOFF). HOWEVER! !!IE9 má FOUT.:(
• Webkit má patch čekání na přistání, aby ukázal nouzový text po 0,5 sekundách. To stejné chování jako FF, ale 0,5s namísto 3s

Pokud to byla otázka určená pro návrháře, mohli bychom jít do způsobů, jak se vyhnout těmto druhůmproblémů, jako je webfontloader, ale to by byla další otázka. Parlamentní odkaz na irský článek se podrobněji zabývá touto záležitostí

Musíte něco přidat k vysvětlení? Vyzvěte si komentáře. Uživatelé Stack Exchange si můžete prohlédnout zde