Dagens Spørsmål & Svar-sesjon kommer til oss med høflighet av SuperUser-en underavdeling av Stack Exchange, en fellesskapsdrevet gruppering av Q & A-nettsteder.
Spørsmålet
SuperUser leser Laurent er veldig nysgjerrig på hvorfor nøyaktig sider synes å laste elementer helt annerledes enn de gjorde en gang om gangen. Han skriver:
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.
Så hva gir? Laurent, og mange av oss, husker en tid da teksten lastet først og alt annet - grynlig animerte GIF-tegninger, flislagt bakgrunner, og alle de andre gjenstandene som ble brukt på slutten av 90-tallet nettleser - kom senere. Hva forårsaker den nåværende situasjonen for designelementer først, tekst senere?
Svaret
SuperUser-bidragsyter Daniel Andersson tilbyr et fantastisk detaljert svar som kommer rett til bunnen av hvorfor-fonter-last-siste mysterium:
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;
hvor, hvis den første skriften ikke ble funnet på systemet, ville nettleseren se etter den andre, og til slutt en tilbakebetaling "sans-serif" skrift.
Nå kan man gi en font-URL som en CSS-regel for å få nettleseren til å laste ned en skrift, som sådan:
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
og last deretter inn skrifttypen for et bestemt element ved for eksempel:
font-family: 'Droid Serif',sans-serif;
Dette er veldig populært for å kunne bruke egendefinerte skrifttyper, men det fører også til at det ikke vises noen tekst før ressursen er lastet av nettleseren, som inkluderer nedlastingstiden, skriftens lastetid og gjenopprettingstiden. Jeg forventer at dette er artefaktet du opplever.
Som et eksempel: En av mine nasjonale aviser, Dagens Nyheter, bruker webfonter til overskriftene, men ikke deres ledere, så når den siden er lastet, ser jeg vanligvis lederne først, og et halvt sekund senere blir alle tomme mellomrom befolket med overskrifter (dette gjelder i hvert fall Chrome og Opera. Ikke prøvd andre).
(Også designere sprinkle JavaScript helt overalt i disse dager, så kanskje noen prøver å gjøre noe smart med teksten, og derfor er det forsinket. Det ville være veldig stedsspesifikt, men: Den generelle tendensen til at tekst blir forsinket i disse ganger er problemet med webfonter beskrevet ovenfor, tror jeg.)
Addisjon:
Dette svaret ble veldig oppvokst, selv om jeg ikke gikk inn i mye detalj, eller kanskjefordi av denne. Det har vært mange kommentarer i spørsmåletråden, så jeg skal prøve å utvide litt […]
Fenomenet er tilsynelatende kjent som "flash of unstyled content" generelt, og "flash of unstyled text" spesielt. Søker etter "FOUC" og "FOUT" gir mer info.
Jeg kan anbefale webdesigner Paul Irlands post på feil i forbindelse med webfonter.
Det man kan merke seg er at forskjellige nettlesere håndterer dette annerledes. Jeg skrev over at jeg hadde testet Opera og Chrome, som begge oppførte seg på samme måte. Alle WebKit-baserte (Chrome, Safari, etc.) velger å unngå feil vedikke gjengivelse av webteksttekst med en tilbakebetalingstype under webfonteringsperioden. Selv om Nettfonten er cached dervil vær en gjengivelse forsinkelse. Det er mange kommentarer i denne spørsmåletråden som sier noe annet, og at det er flatt ut feil at bufret skriftene oppfører seg slik, men f.eks. fra lenken ovenfor:
I hvilke tilfeller får du en feil
- Vil: Laster ned og viser en ekstern ttf / otf / woff
- Vil: Viser en bufret ttf / otf / woff
- Vil: Nedlasting og visning av data-uri ttf / otf / woff
- Vil: Viser en bufret data-uri ttf / otf / woff
- Vil ikke: Viser en skrift som allerede er installert og oppkalt i den tradisjonelle skrifttypestakken
- Vil ikke: Viser en skrift som er installert og oppkalt ved hjelp av lokal () -stedet
Siden Chrome venter til FOUT-risikoen er borte før gjengivelsen, gir dette en forsinkelse. Til hvilkenutstrekning effekten er synlig (spesielt når du laster fra cache) synes å være avhengig av blant annet mengden tekst som må gjengis og kanskje andre faktorer, men caching fjerner ikke effekten helt.
Irsk har også noen oppdateringer om nettleserens adferd fra 2011-04-14 nederst i posten:
- Firefox (som av FFb11 og FF4 Final) har ikke lenger en feil! Wooohoo! Http: //bugzil.la/499292 I utgangspunktet er teksten usynlig i 3 sekunder, og så bringer den tilbake tilbakebetegnelsen. Webfont vil trolig laste inn de tre sekundene skjønt … forhåpentligvis..
- IE9 støtter WOFF og TTF og OTF (selv om det krever en innebygd bitsett ting-for det meste moot hvis du bruker WOFF). DERIMOT!!! IE9 har en feil.:(
- Webkit har en patch som venter på å lande for å vise tilbakebetalingstekst etter 0,5 sekunder. Så samme oppførsel som FF, men 0.5s i stedet for 3s.
Hvis dette var et spørsmål rettet mot designere, kunne man gå inn på måter å unngå slike problemer som
webfontloader
men det ville være et annet spørsmål. Den Paul irske lenken går nærmere i denne saken.
Har du noe å legge til forklaringen? Lyde av i kommentarene. Vil du lese flere svar fra andre tech-savvy Stack Exchange-brukere? Sjekk ut hele diskusjonstråden her.
