Miksi Web-sivut eivät heti näytä tekstinsä?

Jos olet sopeutunut selkäreunasta kotkan silmällä, saatat huomata, että sivut lataavat usein kuvia ja ulkoasua ennen tekstin lataamista - tarkka vastakkainen kuormituskuvio, jonka olemme kokeneet 1990-luvulla. Mitä tapahtuu?

Tämän päivän kysymys- ja vastausistunto tulee meihin SuperUserin hyväksi - Stack Exchangein alaosasto, joka on yhteisöllinen Q & A-sivustojen ryhmittely.

Kysymys

SuperUser-lukija Laurent on hyvin utelias, miksi juuri sivuilla näyttävät lataavan elementtejä täysin eri tavalla kuin kerran. Hän kirjoittaa:

Olen huomannut, että hiljattain monet sivustot ovat hitaita näyttämään tekstinsä. Yleensä tausta, kuvat ja niin edelleen ladataan, mutta tekstiä ei ole. Jonkin ajan kuluttua teksti alkaa näkyä täällä ja siellä (ei aina kaikkia samanaikaisesti).

Se pohjimmiltaan toimii päinvastoin kuin aiemmin, kun teksti näytettiin ensimmäisenä, niin kuvat ja loput latautuivat jälkikäteen. Mikä uusi tekniikka luo tämän ongelman? Onko mitään ajatusta?

Huomaa, että olen hidas yhteys, mikä todennäköisesti korostaa ongelmaa.

Katso [edellä] esimerkki - kaikki on ladattu, mutta kestää muutaman sekunnin ennen kuin teksti näkyy lopulta.

Joten mitä antaa? Laurent ja monet meistä muistivat aika, jolloin teksti ladattiin ensimmäisenä ja kaikki muut animaatiot GIF-levyt, laatoitettu taustat ja kaikki muut 90-luvun lopun web-selaamisen esineet tulivat myöhemmin. Mikä aiheuttaa nykyisen suunnittelutietojen tilan, tekstin myöhemmin?

Vastaus

SuperUser-avustaja Daniel Andersson tarjoaa ihanan yksityiskohtaisen vastauksen, joka pääsee oikein miksi-the-fonts-load-last mystery:

Yksi syy on, että web-suunnittelijat nykyään haluavat käyttää Web-fontteja (yleensä WOFF-muodossa), esim. kauttaGoogle Web -fontit.

Aikaisemmin vain sivustolla näkyvät fontit olivat niitä, jotka käyttäjä oli asentanut paikallisesti. Koska esim. Mac- ja Windows-käyttäjillä ei välttämättä ollut samoja fontteja, suunnittelijat vaistomaisesti määrittelivät aina säännöt

fonttiperhe: Arial, Helvetica, sans-serif; 

jossa, jos ensimmäistä kirjasinta ei löytynyt järjestelmästä, selain etsiisi toista, ja lopulta varasisäistä "sans-serif" -fonttia.

Nyt voidaan antaa fontin URL-osoite CSS-sääntöksi, jotta selaimen lataa fontti sellaiseksi:

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

ja lataa fontti tietylle elementille esimerkiksi:

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

Tämä on erittäin suosittu, jotta pystyy käyttämään mukautettuja kirjasimia, mutta se johtaa myös siihen ongelmaan, että tekstiä ei näytetä, ennen kuin selain on ladannut resurssin, johon sisältyy latausaika, fontin latausaika ja renderointi. Odotan, että tämä on artefakti, jota olet kokenut.

Esimerkkinä: yksi kansallisista sanomalehdistäni, Dagens Nyheter, käyttää verkkosivujen fontteja otsikoihinsa, mutta ei niiden johdot, joten kun sivusto on ladattu, näen yleensä johdot ensin ja puolen sekunnin kuluttua kaikki tyhjät tilat ovat asuttuja otsikoilla (tämä koskee ainakin Chromea ja Operaa, eivät ole kokeillut muita).

(Myös suunnittelijat sprinklöivät JavaScriptin ehdottomasti kaikkialla näinä päivinä, joten ehkä joku yrittää tehdä jotain fiksuista tekstiä, minkä vuoksi se viivästyy. Tämä olisi hyvin sivustokohtaista: kuitenkin tekstin yleinen taipumus viivästyä näissä uskoakseni on yllä kuvattu web-fonttien ongelma.)

Lisäys:

Tämä vastaus tuli hyvin ylimieliseltä, vaikka en mennyt paljon yksityiskohtiin tai ehkäkoska tästä. Kysymyslangasta on tehty paljon kommentteja, joten yritän laajentaa hieman [...]

Ilmiö tunnetaan ilmeisesti nimellä "flash of unstyled content" yleensä ja erityisesti "flash of unstyled teksti". Haku "FOUC" ja "FOUT" antaa enemmän tietoa.

Voin suositella Web-suunnittelija Paul Irishin julkaisua FOUTin web-fonttien yhteydessä.

Voidaan huomata, että eri selaimet käsittelevät tätä eri tavalla. Kirjoitin edellä, että olin testannut Opera ja Chrome, jotka molemmat käyttäytyivät samalla tavoin. Kaikki WebKit-pohjaiset (Chrome, Safari jne.) Välttävät FOUT: nei web-fonttityyppisen tekstin antaminen varakäyntityökalulla web-fontin latausaikana.Vaikka Web-kirjasinta välimuistiin, siellätahtoa olla viivästys. Tässä kysymyksessä on paljon kommentteja, jotka sanovat muutoin ja että on väärässä, että välimuistiin tallennetut fontit toimivat näin, mutta esimerkiksi yllä olevasta linkistä:

Missä tapauksissa saat FOUTin

• Tahtoa: Kaukosäätimen ttf / otf / woff lataaminen ja näyttäminen
• Tahtoa: Näytetään välimuistiin tallennettu ttf / otf / woff
• Tahtoa: Tiedoston lataaminen ja näyttäminen ë ttf / otf / woff
• Tahtoa: Tallennetun tiedon näyttäminen uri ttf / otf / woff
• Ei: Näyttää fontin, joka on jo asennettu ja nimetty perinteisessä kirjasintyypissä
• Ei: Näyttää fontin, joka on asennettu ja nimetty paikallisen () sijainnin avulla

Koska Chrome odottaa, kunnes FOUT-riski on poistunut ennen renderointia, tämä antaa viivytyksen. Johonlaajuus vaikutus on näkyvissä (varsinkin kun latautuu välimuistista) näyttää olevan riippuvainen muun muassa tekstin määrästä, joka on tehtävä ja mahdollisesti muista tekijöistä, mutta välimuisti ei poista kokonaan vaikutusta.

Irlannissa on myös joitain päivityksiä selaimen käyttäytymisestä vuodesta 2011-04-14 postin alareunassa:

• Firefox (kuten FFb11 ja FF4 Final)ei enää ole FOUT! Wooohoo! Http: //bugzil.la/499292 Pohjimmiltaan teksti on näkymätön 3 sekunnin ajan, ja sitten se palauttaa varmuuskopion.Webfont todennäköisesti ladataan kolmen sekunnin sisällä, vaikka toivottavasti ...
• IE9 tukee WOFF: ää ja TTF: ää ja OTF: ää (vaikkakin se vaatii upotuksen bittiä, useimmiten luultavasti, jos käytät WOFF: ää).KUITENKIN!!! IE9: lla on FOUT. :(
• Webkitillä on korjaustiedosto, joka odottaa laskeutumista ja näyttää varatun tekstin 0,5 sekunnin kuluttua. Samaa käyttäytymistä kuin FF, mutta 0.5s sijasta 3s.

Jos kysymys olisi suunniteltu suunnittelijoille, voisi olla tapoja välttää tällaisia ​​ongelmia, kutenwebfontloader, mutta se olisi toinen kysymys. Paul Irish linkki menee tarkemmin tähän asiaan.

Onko jokin asia lisättävä selitykseen? Kuulkaa kommentit. Haluatko lukea lisää vastauksia muilta tech-tajuilta Stack Exchange-käyttäjiltä? Katso koko keskusteluketju täältä.