Hvis du er tilbøyelig til å se på nettleseruten med et ørneøye, har du kanskje lagt merke til at sider ofte laster inn bilder og layout før de laster inn teksten - det stikk motsatte lastemønsteret vi opplevde i løpet av 1990-tallet. Hva skjer?
Dagens spørsmål og svar-økt kommer til oss med tillatelse fra SuperUser - en underavdeling av Stack Exchange, en samfunnsdrevet gruppe av spørsmål og svar-nettsteder.
Spørsmålet
SuperUser-leser Laurent er veldig nysgjerrig på hvorfor nettopp sider ser ut til å laste elementer helt annerledes enn de gjorde en gang i tiden. Han skriver:
Jeg har lagt merke til at det nylig er mange nettsteder som sakte viser tekst. Vanligvis lastes bakgrunnen, bildene og så videre, men ingen tekst. Etter en stund begynner teksten å vises her og der (ikke alltid alt samtidig).
Det fungerer i utgangspunktet det motsatte som før, når teksten ble vist først, så ble bildene og resten lastet inn etterpå. Hvilken ny teknologi skaper dette problemet? Noen ide?
Merk at jeg har en langsom forbindelse, noe som sannsynligvis fremhever problemet.
Se [above] for et eksempel - alt er lastet, men det tar noen sekunder til før teksten endelig vises.
Så hva gir? Laurent, og mange av oss, husker en tid da teksten ble lastet inn først og alt annet - garnerte animerte GIF-er, flislagt bakgrunn og alle de andre gjenstandene fra nettlesing på slutten av 90-tallet - 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 helt til bunns i hvorfor-fonter-last-siste-mysteriet:
En årsak er at webdesignere i dag liker å bruke nettfonter (vanligvis i WOFF format), f.eks. gjennom Google Web-skrifttyper .
Tidligere var de eneste skriftene som kunne vises på et nettsted de som brukeren hadde installert lokalt. Siden f.eks. Mac- og Windows-brukere hadde ikke nødvendigvis de samme skriftene, designere definerte alltid instinktivt regler som
font-familie: Arial, Helvetica, sans-serif;der, hvis den første fonten ikke ble funnet på systemet, ville nettleseren se etter den andre, og til slutt en reserve "sans-serif" font.
Nå kan man gi en skrift-URL som en CSS-regel for å få nettleseren til å laste ned en skrift, som sådan:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);og last deretter inn skriften for et bestemt element ved for eksempel:
font-familie: 'Droid Serif', sans-serif;Dette er veldig populært for å kunne bruke egendefinerte skrifttyper, men det fører også til problemet at ingen tekst vises før ressursen er lastet inn av nettleseren, som inkluderer nedlastingstid, skriftens lastetid og gjengivelsestid. Jeg forventer at dette er gjenstanden du opplever.
Som et eksempel: en av mine nasjonale aviser, Dagens Nyheter , bruk webfonter for overskriftene, men ikke deres potensielle kunder, så når dette nettstedet er lastet inn, ser jeg vanligvis lederne først, og et halvt sekund senere er alle de tomme feltene over fylt med overskrifter (dette gjelder i Chrome og Opera, kl. minst. Har ikke prøvd andre).
(Dessuten spruter designere JavaScript absolutt overalt i disse dager, så kanskje noen prøver å gjøre noe smart med teksten, og det er derfor den blir forsinket. Det vil være veldig nettstedsspesifikt, skjønt: den generelle tendensen til at tekst blir forsinket i disse ganger er problemet med nettfonter beskrevet ovenfor, tror jeg.)
Addisjon:
Dette svaret ble veldig oppstemt, selv om jeg ikke gikk i detalj, eller kanskje fordi av denne. Det har vært mange kommentarer i spørsmålstråden, så jeg prøver å utvide litt […]
Fenomenet er tilsynelatende kjent som "flash av ustylert innhold" generelt, og "flash av ustylert tekst" spesielt. Å søke etter “FOUC” og “FOUT” gir mer info.
Jeg kan anbefale webdesigner Paul Irishs innlegg på FOUT i forbindelse med nettfonter .
Det man kan merke seg er at forskjellige nettlesere håndterer dette forskjellig. Jeg skrev ovenfor at jeg hadde testet Opera og Chrome, som begge oppførte seg likt. Alle WebKit-baserte (Chrome, Safari osv.) Velger å unngå FOUT by ikke gjengi tekst på nett skrift med en reserve skrift i løpet av perioden for innlasting av nett skrift. Selv om nettfonten er hurtigbufret, der vil være en forsinkelse for gjengivelse . Det er mange kommentarer i denne spørsmålstråden som sier noe annet og at det er flat ut galt at hurtigbufrede skrifter oppfører seg slik, men f.eks. fra lenken ovenfor:
I hvilke tilfeller vil du få en FOUT
- Vil: Laste ned og vise en ekstern ttf / otf / woff
- Vil: Viser en bufret ttf / otf / woff
- Vil: Laste ned og vise en data-uri ttf / otf / woff
- Vil: Viser en hurtigbufret data-uri ttf / otf / woff
- Vil ikke: Viser en skrift som allerede er installert og navngitt i din tradisjonelle skriftstabel
- Vil ikke: Viser en skrift som er installert og navngitt ved hjelp av den lokale () plasseringen
Siden Chrome venter til de fire risikoen er borte før gjengivelse, gir dette en forsinkelse. Til hvilken utstrekning effekten er synlig (spesielt når du laster fra cache) ser ut til å være avhengig av blant annet mengden tekst som må gjengis og kanskje andre faktorer, men caching fjerner ikke effekten.
Irish har også noen oppdateringer om nettleserens oppførsel fra 2011–04–14 nederst i innlegget:
- Firefox (fra og med FFb11 og FF4 Final) har ikke lenger FOUT! Wooohoo! http://bugzil.la/499292 I utgangspunktet er teksten usynlig i 3 sekunder, og så bringer den tilbake fonten. Webfonten vil sannsynligvis lastes i løpet av de tre sekundene skjønt ... forhåpentligvis ..
- IE9 støtter WOFF og TTF og OTF (selv om det krever det en innebygd bit sett ting - for det meste hvis du bruker WOFF). DERIMOT!!! IE9 har en FOUT. :(
- Webkit har en lapp som venter på å lande for å vise reservetekst 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 f.eks
webfontloader, men det ville være et annet spørsmål. Den Paul irske lenken går nærmere inn på denne saken.
Har du noe å legge til forklaringen? Hør av i kommentarene. Vil du lese flere svar fra andre teknologikyndige Stack Exchange-brukere? Sjekk ut hele diskusjonstråden her .
