Tänane küsimuste ja vastuste seanss jõuab meile viisakalt SuperUserini - Stack Exchange'i ja kogukonnapõhiste Q & A veebisaitide rühmitusse.
Küsimus
SuperUseri lugeja Laurent on väga uudishimulik, miks täpselt lehed näevad elemente täiesti erinevalt, kui nad korraga korraga tegid. Ta kirjutab:
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.
Mis siis annab? Laurent ja paljud meist meenutavad aega, mil esimene tekst laaditi, ja hiljem ka kõik 90-ndate aastate lõpus veebibrauserit puudutavad muud animeeritud GIF-failid, plaaditud taustad ja kõik muud. Mis põhjustab esialgse disainielementide praegust olukorda, teksti hiljem?
Vastus
SuperUseri kaastöötaja Daniel Andersson pakub suurepäraselt üksikasjalikku vastust, mis läheb paremini musta fontide koormus-viimse mõistatuseni allapoole:
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;
kus, kui esimeses fontis süsteemis ei leitud, otsiks brauser teisest ja lõpuks tagasilöögifunktsiooni "sans-serif".
Nüüd saab fondi URL-i anda CSS-reeglina, et brauser fonti allalaaditaks:
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
ja laadige kindlale elemendile font, nt:
font-family: 'Droid Serif',sans-serif;
See on väga populaarne, et saaksime kasutada kohandatud fonte, kuid see toob kaasa ka probleemi, et brauseris ei laadita ühtegi teksti, mis sisaldab allalaadimisaega, fondi laadimise aega ja viimistlusaega. Ma loodan, et see on artefakt, mida te kogete.
Näiteks: üks minu rahvuslikest ajalehtedest, Dagens Nyheter, kasutavad oma pealkirjade jaoks veebifonte, kuid mitte nende juhte, nii et kui see sait on laetud, siis näen tavaliselt, et need esimest korda ja pool sekundiga on kõik tühjad ruumid ülalpool asustatud koos pealkirjadega (see kehtib vähemalt Chrome'i ja Opera puhul, pole teisi proovinud).
(Ka disainerid puistavad JavaScript täiesti kõikjal nendel päevadel, nii et võib-olla keegi üritab tekstiga midagi nutikat teha, mistõttu see lükkub edasi. See oleks väga kohaspetsiifiline: üldine tendents seda teksti edasi lükata korda on eespool kirjeldatud veebifondide probleem, ma usun.)
Lisaks:
See vastus sai väga positiivseks, kuigi ma ei läinud palju üksikasjadesse ega ehkkisest sellest. Küsimuste teemal on olnud palju kommentaare, seega proovin veidi […]
Seda nähtust tuntakse ilmselt üldiselt "katkendliku sisu välgu" ja eriti "katmata teksti välgu". "FOUC" ja "FOUT" otsimine annab rohkem teavet.
Võin soovitada web designer Paul Iiri postitust FOUT-i seoses veebifontidega.
Mida saab märkida, on see, et erinevad brauserid käsitlevad seda erinevalt. Kirjutasin eespool, et olen katsetanud Opera ja Chrome, kes mõlemad käitusid sarnaselt. Kõik WebKiti-põhised (Chrome, Safari jne) valivad FOUT-i vältimiseksmitte veebrifiltri laadimisperioodi ajal veebrifidri teksti muutmine tagasiulatuva fontga. Isegi kui veebifond on vahemällu sealtahe olla viivitus uuesti. Sellel teemal on palju märkusi, mis ütlevad teisiti, ja et pole kindel, et puhverdatud fonte käituvad niimoodi, kuid näiteks ülaltoodud lingist:
Millistel juhtudel saate FOUT
- Kas: Kaugjuhtimispuldi ttf / otf / woffi allalaadimine ja kuvamine
- Kas: Vahemällu salvestatud ttf / otf / woffi kuvamine
- Kas: Andmete laadimine ja kuvamine ttf / otf / woff
- Kas: Vahemällu salvestatud andmete kuvamine ttf / otf / woff
- Ei tee: Fondi kuvamine, mis on juba installitud ja mille nimi on teie traditsioonilises kirjakavas
- Ei tee: Installitud ja nimega fondi kuvamine kohaliku () asukoha abil
Kuna Chrome ootab enne FPRi riski kadumist enne renderdamist, annab see viivituse. Milleulatuses mõju on nähtav (eriti laadimisel vahemalt), tundub olevat sõltuv muuhulgas sellest, kui palju teksti tuleb muuta, ja võib-olla ka muid tegureid, kuid vahemällu salvestamine ei kõrvalda täielikult efekti.
Iirimaal on ajakohastatud brauseri käitumist alates 2011. aasta aprillist 14-14 postituse allservas:
- Firefox (alates FFb11 ja FF4 lõplikust) pole enam FOUT! Wooohoo! Http: //bugzil.la/499292 Põhimõtteliselt on tekst 3 sekundi jooksul nähtamatu, ja siis tagastab ta tagastatava fondi. Veebifondi tõenäoliselt laaditakse nende kolme sekundi jooksul, kuid … loodetavasti..
- IE9 toetab WOFF-i, TTF-i ja OTF-i (kuigi see nõuab sisestatava bitseti asju - enamasti õiglane, kui kasutate WOFF-i). KUID!!! IE9 on FOUT.:(
- Webkitil on plaaster, mis ootab maandumist, et näidata tagasiulatuvat teksti 0,5 sekundi pärast. Nii sama käitumine nagu FF, kuid 0,5s asemel 3s.
Kui see oleks disaineritele suunatud küsimus, võiksime lahendada selliseid probleeme nagu
webfontloader
kuid see oleks teine küsimus. Paul Iiri seos läheb sellel teemal üksikasjalikumalt.
Kas teil on seletamiseks midagi lisada? Helistage kommentaarides. Kas soovite lugeda rohkem vastuseid teistelt tech-savvy Stack Exchange'i kasutajatelt? Tutvu täieliku arutelu teemaga siit.
