Kodėl interneto puslapiai nedelsdami nerodo jų teksto?

Jei esate linkę žiūrėti naršyklės langą su erelio akimi, galbūt pastebėjote, kad puslapiai dažnai įkelia savo vaizdus ir išdėstymą prieš įkeldami savo tekstą - tiksliai priešingą apkrovos modelį, kurį patyrėme dešimtajame dešimtmetyje. Kas vyksta?

Šiandienos „Klausimų ir atsakymų“ sesija mums suteikiama pagal „SuperUser“ - „Stack Exchange“ padalinį, bendruomenės sukurtą „Q&A“ svetainių grupavimą.

Klausimas

„SuperUser“ skaitytojas „Laurent“ labai smalsu, kodėl tiksliai puslapiai atrodo visiškai kitaip nei bet kada. Jis rašo:

Pastebėjau, kad neseniai daugelis svetainių lėtai rodo savo tekstą. Paprastai fonas, vaizdai ir pan. Bus įkeliami, bet teksto nėra. Po kurio laiko tekstas prasideda čia ir ten (ne visada visa tai tuo pačiu metu).

Jis iš esmės veikia priešingai, kai jis buvo naudojamas, kai tekstas buvo rodomas pirmiausia, tada vaizdai ir likusi dalis buvo įkeliami po to. Kokia nauja technologija sukuria šią problemą? Bet kokia idėja?

Atkreipkite dėmesį, kad esu lėtas ryšys, kuris greičiausiai išryškina problemą.

Pavyzdžiui, žr. [Aukščiau] - viskas įkelta, tačiau užtrunka dar kelias sekundes, kol tekstas bus galutinai rodomas.

Taigi, kas suteikia? Laurentas ir daugelis iš mūsų prisimena laiką, kai tekstas buvo įkeltas pirmą kartą, ir viskas, kas buvo kitokia - gif animaciniai GIF, plytelių fonai, ir visi kiti devintojo dešimtmečio pabaigos interneto naršymo artefaktai atėjo vėliau. Kas sukelia dabartinę dizaino elementų padėtį, vėliau tekstą?

Atsakymas

„SuperUser“ autorius Danielis Anderssonas siūlo nuostabų išsamų atsakymą, kuris gauna teisę į tai, kodėl-šriftai-apkrova-paskutinis paslaptis:

Viena iš priežasčių yra tai, kad interneto dizaineriai dabar mėgsta naudoti žiniatinklio šriftus (paprastai WOFF formatu), pvz. per „Google“ žiniatinklio šriftus.

Anksčiau vieninteliai šriftai, kuriuos galėjo rodyti svetainėje, buvo tie, kuriuos naudotojas buvo įdiegęs vietoje. Nuo pvz. „Mac“ ir „Windows“ naudotojai nebūtinai turėjo tuos pačius šriftus, dizaineriai instinktyviai visada apibrėžė taisykles

šrifto šeima: Arial, Helvetica, sans-serif; 

kur, jei sistemoje nerastas pirmasis šriftas, naršyklė ieškos antrojo, o galiausiai - atsarginio „sans-serif“ šrifto.

Dabar galite pateikti šrifto URL kaip CSS taisyklę, kad naršyklė galėtų atsisiųsti šriftą:

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

ir tada įkelkite konkretaus elemento šriftą, pvz .:

font-family: „Droid Serif“, sans-serif; 

Tai labai populiarus, kad galėtumėte naudoti priskirtus šriftus, tačiau taip pat kyla problema, kad tekstas nerodomas tol, kol naršyklė įkels resursą, kuris apima atsisiuntimo laiką, šrifto įkėlimo laiką ir pateikimo laiką. Tikiuosi, kad tai yra artefaktas, kurį patiriate.

Pavyzdžiui, vienas iš mano nacionalinių laikraščių, „Dagens Nyheter“, naudoja savo šriftus antraštėms, bet ne jų vadovams, taigi, kai ši svetainė yra įkeltas, dažniausiai pirmą kartą matau pirmuosius, o pusę sekundės visos viršutinės tuščios vietos yra užpildytos su antraštėmis (bent jau „Chrome“ ir „Opera“). Nebandykite kitų).

(Be to, dizaineriai šiais laikais apšlaksto „JavaScript“ absoliučiai visur, todėl gal kas nors bando kažką protingai atlikti su tekstu, todėl jis vėluoja. Tai būtų labai specifinė vietove: bendra tendencija, kad tekstai vėluoja manau, kad anksčiau aprašytas žiniatinklio šriftų klausimas yra.

Papildymas:

Šis atsakymas labai padidėjo, nors aš ne visai smarkiai išsiaiškinčiau, ar galbūt nes apie tai. Klausimų temoje buvo daug pastabų, todėl bandysiu šiek tiek išplėsti […]

Akivaizdu, kad šis reiškinys yra apskritai vadinamas „neaktyvaus turinio blykste“ ir ypač „neaktyvaus teksto blykste“. „FOUC“ ir „FOUT“ paieška suteikia daugiau informacijos.

Su interneto šriftais galiu rekomenduoti žiniatinklio dizainerio Pauliaus Airo postą „FOUT“.

Galima pastebėti, kad skirtingos naršyklės tai apdoroja skirtingai. Aš parašiau aukščiau, kad aš išbandžiau „Opera“ ir „Chrome“, kurie abu elgėsi panašiai. Visi „WebKit“ pagrindai („Chrome“, „Safari“ ir kt.) Nusprendžia vengti „FOUT“ ne žiniatinklio šrifto teksto pateikimas atsarginiu šriftu žiniatinklio šrifto pakrovimo laikotarpiu. Net jei ten yra žiniatinklio šriftas valia būti atvaizdavimo vėlavimas. Šiame klausime yra daug pastabų, kurie nurodo kitaip, ir kad yra neteisinga, kad talpykloje esantys šriftai elgiasi taip, bet pvz. iš minėtos nuorodos:

Kokiais atvejais gausite FOUT

• Ar: Nuotolinio ttf / otf / woff atsisiuntimas ir rodymas
• Ar: Rodoma talpykla ttf / otf / woff
• Ar: Duomenų ir ttf / otf / woff atsisiuntimas ir rodymas
• Ar: Išsaugotų talpykloje saugomų duomenų uri ttf / otf / woff rodymas
• Nedarys: Rodyti jau įdiegtą šriftą, pavadintą tradiciniame šriftų rinkinyje
• Nedarys: Rodyti įdiegtą šriftą, pavadintą vietine () vietove

Kadangi „Chrome“ laukia, kol pasibaigs FOUT rizika, tai suteikia vėlavimą. Prie kurio mastu poveikis yra matomas (ypač kai įkėlimas iš talpyklos), be kita ko, priklauso nuo teksto kiekio, kurį reikia pateikti, ir galbūt kitų veiksnių, tačiau talpinimas nepašalina efekto.

Airių kalba taip pat turi keletą atnaujinimų, susijusių su naršyklės elgesiu nuo 2011-04-14 įrašo apačioje:

• „Firefox“ (kaip FFb11 ir FF4 finalai) nebėra FOUT! Wooohoo! Http: //bugzil.la/499292 Iš esmės tekstas yra nematomas 3 sekundes, o tada atneša atsarginį šriftą. Žiniatinklio tinklapis greičiausiai bus įkeltas per šias tris sekundes, nors ... tikiuosi ...
• IE9 palaiko WOFF ir TTF ir OTF (nors tai reikalauja, kad įterptų blast dalykas - daugiausia ginčytinas, jei naudojate WOFF). Tačiau! IE9 turi FOUT. :(
• „Webkit“ turi pleistrą, kuris laukia, kol bus rodomas atsarginis tekstas po 0,5 sekundės. Toks pat elgesys kaip FF, bet 0,5s vietoj 3s.

Jei tai buvo klausimas, skirtas dizaineriams, galima pereiti prie būdų, kaip išvengti tokių problemų, pvz „webfontloader“, bet tai būtų dar vienas klausimas. Pauliaus Airijos nuoroda šiuo klausimu išsamesnė.

Ar ką nors papildyti paaiškinimu? Garsas išjungtas komentaruose. Norite perskaityti daugiau atsakymų iš kitų „tech-savvy Stack Exchange“ vartotojų? Čia rasite visą diskusijų temą.