Neden Web Sayfaları Hemen Metinlerini Göstermiyor?

Tarayıcı bölmesini bir kartal gözle izlemeye yatkınsanız, sayfalarını, 1990'larda karşılaştığımız tam tersi yükleme deseninin tam metnini yüklemeden önce görüntülerini ve düzenini yüklediğini fark etmiş olabilirsiniz. Neler oluyor?

Bugünün Soru ve Cevap oturumu bize topluluk tarafından yönlendirilen bir soru-cevap web sitesi grubu olan Stack Exchange'in bir alt birimi olan SuperUser'ın izniyle geliyor..

Soru

SuperUser okuyucu Laurent, sayfaların neden bir zamanlar olduğundan tamamen farklı elemanlar yüklediğini gösteriyor. O yazıyor:

Son zamanlarda pek çok web sitesinin metinlerini görüntülemek için yavaş olduğunu fark ettim. Genellikle, arka plan, resimler vb. Yüklenecek, ancak metin yok. Bir süre sonra metin burada ve orada görünmeye başlar (her zaman aynı anda değil).

Temel olarak, metin önce gösterildiğinde, daha sonra görüntüler ve geri kalanlar yüklenirken eskisi gibi çalışır. Hangi yeni teknoloji bu sorunu yaratıyor? Herhangi bir fikir?

Yavaş bir bağlantıda olduğumu ve muhtemelen sorunu vurguladığımı unutmayın.

Bir örnek için [yukarıda] 'ya bakın - her şey yüklü ancak metnin sonunda gösterilmesi birkaç saniye daha sürecek.

Peki ne verir? Laurent ve birçoğumuz, metnin ilk yüklendiği ve 90'ların sonlarında internette gezinti yapan diğer her şeyin yarattığı GIF'lerin, döşeme arka planlarının ve diğer tüm eserlerin daha sonra geldiği bir zamanı hatırlıyoruz. Önce tasarım öğelerinin mevcut durumuna ne sebep olur, sonra metin?

Cevap

SuperUser yazarı Daniel Andersson, neden yazı yükünün son gizeminin altına düştüğünü gösteren harika bir cevap veriyor:

Bunun bir nedeni, web tasarımcılarının bugünlerde web fontlarını (örneğin, WOFF formatında) kullanmaktan hoşlandıklarıdır; Google Web fontları aracılığıyla.

Önceden, bir sitede görüntülenebilen yazı tipleri, kullanıcının yerel olarak yüklediği metinlerdi. Ör. Mac ve Windows kullanıcıları mutlaka aynı yazı tiplerine sahip değillerdi; tasarımcılar içgüdüsel olarak her zaman kuralları tanımladılar.

font ailesi: Arial, Helvetica, sans-serif; 

ilk font sistemde bulunmasaydı, tarayıcı ikinciyi arardı ve en sonunda bir geri dönüş "sans-serif" fontu bulurdu..

Şimdi, biri bir font URL'sini tarayıcının bir fontu indirmesini sağlamak için CSS kuralı olarak verebilir:

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

ve sonra belirli bir öğenin yazı tipini ör:

font-family: 'Droid Serif', sans-serif; 

Bu, özel fontları kullanabilmek için çok popülerdir, ancak kaynak indirme işlemi, font yükleme süresi ve oluşturma süresini içeren tarayıcı tarafından yükleninceye kadar hiçbir metnin gösterilmemesine neden olur. Bunun yaşadığın eser olduğunu umuyorum.

Örnek olarak: Ulusal gazetelerimden biri Dagens Nyheter, başlıkları için web fontları kullanıyor, ancak potansiyel müşterileri için değil, bu yüzden bu site yüklendiğinde genellikle potansiyel müşterileri görüyorum ve yarım saniye sonra yukarıdaki boşluklar dolduruluyor. başlıkları olan (bu, Chrome ve Opera’da geçerlidir, en azından. Başkalarını denemedim).

(Ayrıca, tasarımcılar bugünlerde her yere JavaScript'i serpiştiriyorlar, bu yüzden belki birileri metinle zekice bir şeyler yapmaya çalışıyor, bu yüzden gecikiyor. inanıyorum web fontları meselesi yukarıda açıklanan zamandır, inanıyorum.)

İlave:

Çok fazla ayrıntıya girmedim ama belki de bu cevap çok kızdı Çünkü Bunun Soru başlığında birçok yorum yapıldı, bu yüzden biraz genişletmeye çalışacağım […]

Bu fenomen genel olarak “stilize edilmemiş içeriğin flaşı” ve özellikle “stilize edilmemiş metnin flaşı” olarak bilinir. “FOUC” ve “FOUT” kelimelerini aramak daha fazla bilgi verir..

Web tasarımcısı Paul Irish'in FOUT'daki yayınını web fontlarıyla bağlantılı olarak önerebilirim.

Not edebileceği şey, farklı tarayıcıların bunu farklı şekilde ele alması. Yukarıda, her ikisinde de aynı şekilde davranan Opera ve Chrome'u test ettiğimi yazdım. Tüm WebKit tabanlı olanlar (Chrome, Safari vb.) FOUT by değil web font yükleme periyodu sırasında web font metninin geri dönüş fontu ile işlenmesi. Bile web fontu önbellekte saklanır irade render gecikmesi olmak. Bu soru başlığında başka türlü söylenen çok fazla yorum var ve önbelleğe alınmış yazı tiplerinin bu şekilde davranmasının yanlış olduğu açık. Yukarıdaki linkten:

Hangi durumlarda bir FOUT alacaksınız

• İrade: Uzaktan ttf / otf / woff indirme ve görüntüleme
• İrade: Önbelleğe alınmış bir ttf / otf / woff gösterilmesi
• İrade: Bir veri uri ttf / otf / woff indirme ve görüntüleme
• İrade: Önbelleğe alınmış verilerin görüntülenmesi-uri ttf / otf / woff
• Olmayacak: Geleneksel font yığınıza önceden yüklenmiş ve adlandırılmış bir fontu görüntüleme
• Olmayacak: Local () konumu kullanılarak yüklenmiş ve adlandırılmış bir fontu görüntüleme

Chrome, FOUT riski oluşturma işleminden önce kaybolana kadar beklediğinden, bu bir gecikme sağlar. Neye derece Bu etki görülebilir (özellikle önbellekten yükleme yaparken), diğer şeylerin yanı sıra, yapılması gereken metin miktarına ve belki de diğer faktörlere bağlı görünüyor, ancak önbellekleme, etkiyi tamamen ortadan kaldırmıyor.

İrlanda’da, yazının altında 2011-04-14 tarihinden itibaren tarayıcı davranışlarıyla ilgili bazı güncellemeler de var:

• Firefox (FFb11 ve FF4 Finalinden itibaren) artık bir FOUT'a sahip değil! Wooohoo! Http: //bugzil.la/499292 Temel olarak metin 3 saniye görünmez ve sonra geri dönüş fontunu geri getirir. Webfont muhtemelen bu üç saniye içinde yüklenecek…… umarım…
• IE9, WOFF ve TTF ve OTF'yi destekliyor (gömülü bir bit kümesi gerektirse de, çoğunlukla WOFF kullanıyorsanız, çoğu. ANCAK!!! IE9 bir DÜNYAYA sahip. :(
• Webkit'in 0,5 saniye sonra geri dönüş metni göstermesi için inmeyi bekleyen bir yama var. Yani FF ile aynı davranış ancak 3s yerine 0.5s.

Bu, tasarımcılara yönelik bir soru olsaydı, kişi bu tür sorunlardan kaçınmanın yollarına gidebilirdi. webfontloader, ama bu başka bir soru olurdu. Paul Irish bağlantısı bu konuda daha fazla ayrıntıya giriyor.

Açıklamaya eklemek için bir şey var mı? Yorumlarda ses kesiliyor. Diğer teknoloji meraklısı Stack Exchange kullanıcılarından daha fazla cevap okumak ister misiniz? Burada tüm tartışma konusuna göz atın.