Зашто веб странице не приказују одмах свој текст?

Ако сте склони да гледате окно прегледача са оловним очима, можда сте приметили да странице често учитавају своје слике и распоред пре учитавања њиховог текста - тачно супротан образац учитавања који смо искусили током 1990-их. Шта се дешава?

Данашња сесија питања и одговора долази нам захваљујући СуперУсер-у - подјела Стацк Екцханге-а, груписане од стране заједнице веб-локација за питања и одговоре.

Питање

Читач суперкорисника Лаурент је веома знатижељан о томе зашто се тачно странице чине да учитавају елементе потпуно другачије него што су то некада радили. Пише:

Приметио сам да су недавно многи сајтови споро приказивали свој текст. Обично, позадина, слике и тако даље ће бити учитани, али нема текста. Након неког времена текст почиње да се појављује ту и тамо (не увек све то у исто време).

У основи ради супротно као и раније, када је текст први пут приказан, затим слике и остатак се накнадно учитавао. Која нова технологија ствара ово питање? Било који идеја?

Имајте на уму да сам на спорој вези, што вероватно наглашава проблем.

Погледајте [горе] за пример - све је учитано, али је потребно неколико секунди пре него што се текст коначно прикаже.

Па шта даје? Лаурент, и многи од нас, памте време када се текст први пут учитао, а све остало - анимирани ГИФ фајлови, позадине са плочицама, и сви остали артефакти касног веб прегледања 90-их дошли су касније. Шта прво узрокује тренутну ситуацију елемената дизајна, касније текст?

Одговор

Доприносилац СуперУсер-а Даниел Андерссон нуди чудесно детаљан одговор који се поставља на дно зашто-тхе-фонтс-лоад-ласт мистери:

Један од разлога је што веб дизајнери данас воле да користе веб фонтове (обично у ВОФФ формату), нпр. виаГоогле Веб фонтови.

Раније су једини фонтови који су могли да се прикажу на сајту били они које је корисник локално инсталирао. Будући да је нпр. Корисници Мац и Виндовс не морају нужно имати исте фонтове, дизајнери су инстинктивно увек дефинисали правила као

фамилија фонтова: Ариал, Хелветица, санс-сериф; 

где, ако први фонт није пронађен у систему, претраживач ће тражити други, а на крају и "санс-сериф" фонт.

Сада, можете дати УРЛ фонта као ЦСС правило да би прегледач преузели фонт, као такав:

@импорт урл (хттп://фонтс.гооглеапис.цом/цсс?фамили=Дроид+Сериф:400,700); 

а затим учитајте фонт за одређени елемент помоћу нпр .:

фонт-фамили: 'Дроид Сериф', санс-сериф; 

Ово је веома популарно за коришћење прилагођених фонтова, али такође доводи до проблема да се текст не приказује док се претраживач не учита, што укључује време преузимања, време учитавања фонта и време приказивања. Очекујем да је ово артефакт који доживљавате.

Као примјер: један од мојих националних новина, Дагенс Нихетер, користи веб-фонтове за наслове, али не и њихове наслове, тако да када се тај сајт учита, обично прво видим трагове, а пола секунде сва празна мјеста су попуњена. са насловима (ово важи барем за Цхроме и Опера. Нисам пробао друге).

(Такође, дизајнери посипају ЈаваСцрипт апсолутно свуда ових дана, па можда неко покушава да уради нешто паметно са текстом, због чега се одлаже. То би било веома специфично за сајт, међутим: општа тенденција да се текст одлаже је вероватно да је време за веб фонтове описано горе.)

Додатак:

Овај одговор је постао веома наглашен, иако нисам улазио у детаље, или можда јер овог. Било је много коментара у низу питања, па ћу покушати мало проширити […]

Феномен је очигледно познат као „бљесак непостојећег садржаја“ уопште, а посебно „бљесак неповезаног текста“. Тражење “ФОУЦ” и “ФОУТ” даје више информација.

Могу препоручити пост веб дизајнера Паула Ирисха на ФОУТ у вези са веб фонтовима.

Оно што се може приметити је да различити претраживачи решавају ово другачије. Горе сам написао да сам тестирао Опера и Цхроме, који су се обоје понашали слично. Сви базирани на ВебКит-у (Цхроме, Сафари, итд.) Бирају да избегавају ФОУТ не приказивање текста веб фонта са резервним фонтом током периода учитавања веб фонта. Чак и ако тамо је кеширан веб фонт ће бити одлагање рендерирања. Постоји много коментара у овој тематској теми који говоре другачије и да је погрешно да се кеширани фонтови понашају овако, али нпр. са горње везе:

У којим случајевима ћете добити ФОУТ

• Ће: Преузимање и приказивање удаљеног ттф / отф / вофф
• Ће: Приказује кеширано ттф / отф / вофф
• Ће: Преузимање и приказивање података-ури ттф / отф / вофф
• Ће: Приказује кеш дата-ури ттф / отф / вофф
• Неће: Приказивање фонта који је већ инсталиран и назван у вашем традиционалном скупу фонтова
• Неће: Приказивање фонта који је инсталиран и назван помоћу локалне () локације

Пошто Цхроме чека док ФОУТ ризик не нестане пре рендерирања, то даје кашњење. Којој обим ефекат је видљив (посебно када се учитава из кеша) изгледа да зависи, између осталог, од количине текста који треба да се прикаже и можда других фактора, али кеширање не уклања у потпуности ефекат.

Ирски такође има нека ажурирања у вези понашања прегледача од 2011-04-14 на дну поруке:

• Фирефок (од ФФб11 и ФФ4 Финал) више нема ФОУТ! Хттп: //бугзил.ла/499292 У суштини, текст је невидљив 3 секунде, а затим враћа резервни фонт. Вебфонт ће се вероватно оптеретити унутар те три секунде, иако… надамо се…
• ИЕ9 подржава ВОФФ и ТТФ и ОТФ (мада захтева уградњу битсет ствари - углавном моот ако користите ВОФФ). МЕЂУТИМ!!! ИЕ9 има ФОУТ. :(
• Вебкит има закрпу која чека да слети да би се приказао резервни текст након 0.5 секунди. Тако исто понашање као ФФ, али 0.5с умјесто 3с.

Ако је то било питање за дизајнере, могло би се прећи на начине да се избегну такве врсте проблема вебфонтлоадер, али то би било друго питање. Веза Паул Ирисх детаљније се бави овим питањем.

Имате ли нешто да додате објашњењу? Звучи у коментарима. Желите ли прочитати више одговора од других технолошки паметних Стацк Екцханге корисника? Погледајте цео дискусију овде.