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:
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.
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:
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;
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(https://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, kuten
webfontloader
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ä.
