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

Jos olet todennäköisesti katsomassa selaimen ruudukkoa silmä-silmällä, saatat huomata, että sivut lataavat usein kuvia ja ulkoasua ennen tekstin lataamista - tarkka vastakkainen kuormituskuvio, jonka olemme kokeneet 1990-luvulla. Mitä tapahtuu?

Päivän kysymys &Vastausistunto tulee meille kohteliaasti SuperUser-osastoon Stack Exchange, yhteisöllinen ryhmittely Q & A verkkosivuilla.

Kysymys

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

Olen huomannut, että äskettäin monet sivustot ovat hidas näyttämään tekstin. 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 toimii periaatteessa päinvastoin kuin aiemmin, kun teksti näytettiin ensimmäiseksi, sitten kuvat ja loput lastaus myöhemmin. 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ää vielä 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äätyy oikein pohjaan, miksi-the-fonts-load-last mystery:

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

Aikaisemmin vain sivustolla näkyvät fontit olivat käyttäjän asentamia paikallisia fontteja. Koska esim. Mac- ja Windows-käyttäjillä ei välttämättä ollut samoja fontteja, suunnittelijat instinktisesti määrittelivät aina säännöt

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

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

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

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

ja lataa sitten 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 aiheuttaa myös ongelman, 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ää web-kirjasimia otsikoihinsa, mutta ei niiden johdot, joten kun sivusto on ladattu, näen yleensä johdot ensin ja puolen sekunnin kuluttua kaikki yllä olevat tyhjät tilat ovattäynnä otsikoita( tämä koskee ainakin Chromea ja Operaa, eivät ole kokeillut muita).

( Suunnittelijat myös sprinkle 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, vaikka: yleinen taipumus tekstiin viivästyynämä ajat ovat edellä kuvattua web-fonttien ongelmaa.)

Lisäys:

Tämä vastaus tuli hyvin ylivalottuneeksi, vaikka en mennyt paljon yksityiskohtiin tai kenties 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 text".Haku "FOUC" ja "FOUT" antaa enemmän tietoa.

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

Voidaan huomata, että eri selaimet käsittelevät tätä eri tavalla. Kirjoitin edellä, että olin testannut Oopperan ja Chromen, jotka molemmat käyttäytyivät samalla tavoin. Kaikki WebKit-pohjaiset( Chrome, Safari jne.) Haluavat välttää FOUT: n : n eikä : n avulla. Vaikka -verkkopohjainen kirjasin on välimuistissa, on renderoidun viive .Tässä kysymyksessä on paljon kommentteja, jotka sanovat muutoin ja että on väärässä, että välimuistiin tallennetut fontit toimivat näin, mutta esimerkiksiyllä olevasta linkistä:

Missä tapauksissa saat FOUT

• Will: Kauko-ohjaimen lataaminen ja näyttäminen /otf/ woff
• Will: Välimuistin ttf näyttäminen /otf/ woff
• Will: Data-uri ttf /otf/ lataaminen ja näyttäminen woff
• Asettaa: Näytetään välimuistiin tallennetut tiedot urit ttf /otf/ woff
• Ei: Asettamasi fontti, joka on jo asennettu ja nimetty perinteisessä kirjasintyypissä
• Ei: Paikallisella() sijainti

Koska Chrome odottaa, kunnes FOUT-riski on poistunut ennen renderointia, tämä antaa viivytyksen. Missä -ulottuvuus -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 ( FFb11 ja FF4 Final) : lla ei enää ole FOUT! Wooohoo! Http: //bugzil.la/ 499292 Periaatteessa teksti näkyy 3 sekunnin ajan, ja sitten se palauttaa varmuuskopion. Webfont tulee todennäköisesti lataamaan niissä kolmessa sekunnissa, vaikka. .. toivottavasti. .
• IE9 tukee WOFF: ia ja TTF: ää ja OTF: ää( vaikka se vaatii sisäänrakennuksen bittiä - enimmäkseen luultavasti, jos käytät WOFF: ää). kuitenkin! IE9: lla on FOUT.:(
• Webkitilla on korjaustiedosto, joka odottaa laskeutua näyttämään varatun tekstin 0,5 sekunnin kuluttua, joten sama käyttäytyminen kuin FF, mutta 0.5s sijasta 3s.

Jos tämä oli suunnittelijoille suunnattu kysymys,ongelma, kuten webfontloader, mutta se olisi toinen kysymys. Paulilainen irlantilainen linkki menee tarkemmin tässä asiassa

Onko jotain lisätä selitykseen? Ääni pois kommentit Haluatko lukea lisää vastauksia muilta tech-Tuntematonta Stack Exchange-käyttäjää?