Pokud máte sklon sledovat podokno prohlížeče orlím okem, možná jste si všimli, že stránky často načítají své obrázky a rozvržení před načtením textu - přesně opačný vzor načítání, jaký jsme zažili v 90. letech. Co se děje?
Dnešní relace Otázky a odpovědi k nám přichází s laskavým svolením SuperUser - členění Stack Exchange, komunitního seskupení webů otázek a odpovědí.
Otázka
Čtenář SuperUser Laurent je velmi zvědavý, proč se zdá, že přesně stránky načítají prvky úplně jinak, než tomu bylo dříve. Napsal:
Všiml jsem si, že v poslední době se na mnoha webech zobrazuje text pomalu. Obvykle se načte pozadí, obrázky atd., Ale žádný text. Po nějaké době se text začne objevovat sem a tam (ne vždy najednou).
V zásadě to funguje opačně, jako tomu bylo dříve, když se nejprve zobrazil text, poté se obrázky a zbytek načítaly později. Jaká nová technologie vytváří tento problém? Nějaký nápad?
Všimněte si, že používám pomalé připojení, což pravděpodobně problém zdůrazňuje.
Příklad viz [above] - vše je načteno, ale trvá několik dalších sekund, než se text konečně zobrazí.
Co tedy dává? Laurent a mnozí z nás si pamatují dobu, kdy se nejprve načetl text a všechno ostatní - zdobily animované soubory GIF, pozadí dlaždic a všechny ostatní artefakty z procházení webu z konce 90. let - přišly později. Co způsobuje současnou situaci prvků návrhu nejprve, později textu?
Odpověď
Přispěvatel SuperUser Daniel Andersson nabízí úžasně podrobnou odpověď, která se dostane až na konec tajemství proč-písma-načíst-poslední:
Jedním z důvodů je, že weboví designéři dnes rádi používají webová písma (obvykle v WOFF formát), např. přes Webová písma Google .
Dříve bylo možné na webu zobrazit pouze písma, která měl uživatel lokálně nainstalovaný. Protože např. Uživatelé počítačů Mac a Windows nemuseli nutně mít stejná písma, návrháři instinktivně vždy definovali pravidla jako
rodina fontů: Arial, Helvetica, sans-serif;kde, pokud by první písmo nebylo v systému nalezeno, prohlížeč by hledal druhé a nakonec záložní písmo „sans-serif“.
Nyní lze jako pravidlo CSS zadat adresu URL písma, aby prohlížeč mohl stáhnout písmo, například:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);a poté načtěte písmo pro konkrétní prvek, například:
rodina fontů: 'Droid Serif', sans-serif;To je velmi populární pro možnost používat vlastní písma, ale také to vede k problému, že se nezobrazí žádný text, dokud prohlížeč nenačte prostředek, který zahrnuje čas stahování, čas načítání písma a čas vykreslení. Očekávám, že toto je artefakt, který zažíváte.
Jako příklad: jeden z mých národních novin, Dnešní zprávy , pro nadpisy používejte webová písma, ale ne jejich potenciální zákazníky, takže když je tento web načten, obvykle nejprve vidím potenciální zákazníky a o půl sekundy později jsou všechna výše uvedená prázdná místa vyplněna nadpisy (to platí pro Chrome a Opera, na alespoň nezkoušel ostatní).
(Také designéři dnes pokropí JavaScript naprosto všude, takže se možná někdo pokouší s textem udělat něco chytrého, a proto je zpožděný. To by však bylo velmi specifické pro daný web: obecná tendence ke zpoždění textu times je problém s webovými písmy popsaný výše, myslím.)
Přidání:
Tato odpověď byla velmi hlasována, ačkoli jsem nešel do podrobností, nebo snad protože z toho. Ve vlákně otázek bylo mnoho komentářů, takže se pokusím trochu rozšířit […]
Tento jev je zjevně známý jako „záblesk nestylovaného obsahu“ obecně, a „záblesk nestylovaného textu“ zvláště. Hledání výrazů „FOUC“ a „FOUT“ poskytuje více informací.
Mohu doporučit příspěvek webového designéra Paula irského na FOUT v souvislosti s webovými písmy .
Je možné si uvědomit, že různé prohlížeče to řeší odlišně. Výše jsem napsal, že jsem testoval Opera a Chrome, kteří se chovali podobně. Všechny založené na WebKit (Chrome, Safari atd.) Se rozhodnou FOUT by vyhnout ne vykreslování textu webového písma záložním písmem během doby načítání webového písma. I kdyby webové písmo je uloženo v mezipaměti vůle být zpožděním vykreslení . V tomto vlákně otázek je spousta komentářů, které říkají jinak a že je špatně, že se písma v mezipaměti chovají takto, ale např. z výše uvedeného odkazu:
V jakých případech dostanete FOUT
- Vůle: Stahování a zobrazování vzdáleného ttf / otf / woff
- Vůle: Zobrazuje se mezipaměť ttf / otf / woff
- Vůle: Stahování a zobrazování datových souborů ttf / otf / woff
- Vůle: Zobrazuje se v mezipaměti data-uri ttf / otf / woff
- Nebude: Zobrazení písma, které je již nainstalováno a pojmenováno v tradičním zásobníku písem
- Nebude: Zobrazení písma, které je nainstalováno a pojmenováno pomocí umístění local ()
Vzhledem k tomu, že Chrome před vykreslením počká, dokud nezmizí ČTYŘI riziko, způsobí to zpoždění. Ke kterému rozsah efekt je viditelný (zejména při načítání z mezipaměti) se zdá být závislý mimo jiné na množství textu, které je třeba vykreslit, a možná i na dalších faktorech, ale ukládání do mezipaměti efekt zcela neodstraní.
Irish má také několik aktualizací týkajících se chování prohlížeče od 2011-04-14 v dolní části příspěvku:
- Firefox (od finále FFb11 a FF4) již nemá FOUT! Páni! http://bugzil.la/499292 Text je v podstatě neviditelný po dobu 3 sekund a poté vrací záložní písmo. Webfont se pravděpodobně načte během těchto tří sekund ... snad ...
- IE9 podporuje WOFF a TTF a OTF (i když to vyžaduje vkládací bit nastavit věc - většinou diskutabilní, pokud používáte WOFF). NICMÉNĚ!!! IE9 má FOUT. :(
- Webkit má náplast čekající na přistání zobrazit záložní text po 0,5 sekundách. Stejné chování jako FF, ale 0,5 s místo 3 s.
Pokud by to byla otázka zaměřená na designéry, dalo by se jít způsoby, jak se vyhnout těmto problémům, jako je
webfontloader, ale to by byla další otázka. Paul Irish odkaz jde v této věci do dalších podrobností.
Máte co dodat k vysvětlení? Zvuk v komentářích. Chcete si přečíst více odpovědí od ostatních technicky zdatných uživatelů Stack Exchange? Podívejte se na celé diskusní vlákno zde .
