Tarayıcı bölmesini bir kartal gözüyle izlemeye yatkınsanız, sayfaların genellikle görüntülerini ve düzenlerini metinlerini yüklemeden önce yüklediğini fark etmiş olabilirsiniz - 1990'larda yaşadığımız tam tersi yükleme düzeni. Neler oluyor?
Bugünün Soru-Cevap oturumu bize, topluluk odaklı bir Soru-Cevap web siteleri grubu olan Stack Exchange'in bir alt bölümü olan SuperUser'ın izniyle geliyor.
Soru
SuperUser okuyucu Laurent, sayfaların tam olarak neden öğeleri bir zamanlar olduğundan tamamen farklı şekilde yüklediğini çok merak ediyor. O yazıyor:
Son zamanlarda birçok web sitesinin metinlerini yavaşça görüntülediğini fark ettim. Genellikle arka plan, resimler vb. Yüklenecek, ancak metin olmayacak. Bir süre sonra metin burada burada görünmeye başlar (her zaman hepsi aynı anda değil).
Metin önce görüntülendiğinde, daha sonra görüntüler ve geri kalanı daha sonra yüklendiğinde, eskiden olduğu gibi temelde tam tersi çalışır. Bu sorunu yaratan yeni teknoloji nedir? Herhangi bir fikir?
Yavaş bir bağlantıda olduğumu ve muhtemelen sorunu daha da vurguladığını unutmayın.
Örnek olarak [above]'ye bakın - her şey yüklendi, ancak metnin nihayet görüntülenmesi birkaç saniye daha sürüyor.
Peki ne verir? Laurent ve çoğumuz, metnin ilk yüklendiği ve diğer her şeyin - süslü animasyonlu GIF'ler, döşemeli arka planlar ve 90'ların sonundaki web taramasının diğer tüm eserlerinin - daha sonra geldiği bir zamanı hatırlıyoruz. Önce tasarım öğelerinin mevcut durumuna ne sebep olur, metin sonra?
Cevap
SuperUser katılımcısı Daniel Andersson, yazı tiplerinin neden son yüklendiği gizeminin hemen altına inen harika ayrıntılı bir cevap sunuyor:
Bunun bir nedeni, günümüzde web tasarımcılarının web yazı tiplerini kullanmayı sevmesidir (genellikle WOFF format), ör. vasıtasıyla Google Web yazı tipleri .
Önceden, bir sitede görüntülenebilen tek yazı tipi, kullanıcının yerel olarak yüklediği yazı tipleriydi. Örn. Mac ve Windows kullanıcılarının aynı yazı tiplerine sahip olması gerekmez, tasarımcılar içgüdüsel olarak her zaman
yazı tipi ailesi: Arial, Helvetica, sans-serif;sistemde ilk yazı tipi bulunamazsa, tarayıcı ikinciyi ve son olarak bir yedek "sans-serif" yazı tipini arayacaktır.
Şimdi, tarayıcının bir yazı tipini indirmesini sağlamak için CSS kuralı olarak bir yazı tipi URL'si verilebilir, örneğin:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);ve sonra belirli bir öğe için yazı tipini, örneğin:
yazı tipi ailesi: 'Droid Serif', sans-serif;Bu, özel yazı tiplerini kullanabilmek için çok popülerdir, ancak aynı zamanda, kaynak tarayıcı tarafından yüklenene kadar, indirme süresi, yazı tipi yükleme süresi ve oluşturma süresini içeren hiçbir metnin görüntülenmemesi sorununa da yol açar. Bunun deneyimlediğiniz eser olduğunu umuyorum.
Örnek olarak: ulusal gazetelerimden biri, Bugünün Haberleri , başlıkları için web yazı tiplerini kullanın, ancak potansiyel müşterileri kullanmayın; bu nedenle, bu site yüklendiğinde genellikle önce potansiyel müşterileri görüyorum ve yarım saniye sonra yukarıdaki tüm boş alanlar başlıklarla doldurulur (bu, Chrome ve Opera'da geçerlidir. en azından. Başkalarını denemedim).
(Ayrıca, tasarımcılar bugünlerde JavaScript'i kesinlikle her yere serpiştiriyorlar, bu yüzden belki birisi metinle zekice bir şeyler yapmaya çalışıyor, bu yüzden gecikiyor. Bu çok siteye özgü bir durum olsa da, metnin bunlarda geciktirilmesine yönelik genel eğilim Sanırım yukarıda açıklanan web yazı tipleri sorunu.)
İlave:
Çok fazla detaya girmedim ya da belki de Çünkü bunun. Soru dizisinde çok sayıda yorum yapıldı, bu yüzden […]'ü biraz genişletmeye çalışacağım
Bu fenomen, görünüşe göre genel olarak "biçimlendirilmemiş içeriğin parıltısı" ve özellikle "stilize edilmemiş metnin parlaması" olarak bilinir. “FOUC” ve “FOUT” araması daha fazla bilgi verir.
Tavsiye edebilirim web tasarımcısı Paul Irish’in web yazı tipleriyle bağlantılı olarak FOUT hakkındaki yayını .
Dikkat edilmesi gereken şey, farklı tarayıcıların bunu farklı şekilde ele almasıdır. Yukarıda, her ikisi de benzer şekilde davranan Opera ve Chrome'u test ettiğimi yazdım. Tüm WebKit tabanlı olanlar (Chrome, Safari, vb.) FOUT'tan kaçınmayı seçer. değil web fontu yükleme süresi boyunca web font metnini bir yedek fontla oluşturma. Bile web yazı tipi önbelleğe alınır, orada niyet render gecikmesi olmak . Bu soru başlığında aksini söyleyen pek çok yorum var ve önbelleğe alınan yazı tiplerinin bu şekilde davranmasının tamamen yanlış olduğu, ancak ör. yukarıdaki bağlantıdan:
Hangi durumlarda bir FOUT alacaksınız
- Niyet: Uzak bir ttf / otf / woff indirme ve görüntüleme
- Niyet: Önbelleğe alınmış bir ttf / otf / woff görüntüleme
- Niyet: Bir data-uri ttf / otf / woff indirme ve görüntüleme
- Niyet: Önbelleğe alınmış bir veriyi görüntüleme-uri ttf / otf / woff
- Olmayacak: Geleneksel yazı tipi yığınınızda zaten yüklenmiş ve adlandırılmış bir yazı tipini görüntüleme
- Olmayacak: Yerel () konumu kullanılarak yüklenmiş ve adlandırılmış bir yazı tipini görüntüleme
Chrome, oluşturmadan önce DÖRT riskinin ortadan kalkmasını beklediğinden, bu bir gecikme verir. Neye kapsam etki görünürdür (özellikle önbellekten yüklerken), diğer şeylerin yanı sıra işlenmesi gereken metin miktarına ve belki başka faktörlere bağlı gibi görünmektedir, ancak önbelleğe alma, etkiyi tamamen ortadan kaldırmaz.
İrlandalı ayrıca, yazının altında 2011-04-14 itibariyle tarayıcı davranışıyla ilgili bazı güncellemeler de sunuyor:
- Firefox (FFb11 ve FF4 Finali itibariyle) artık bir FOUT'a sahip değil! Wooohoo! http://bugzil.la/499292 Temel olarak metin 3 saniye boyunca görünmez ve ardından yedek yazı tipini geri getirir. Web yazı tipi muhtemelen bu üç saniye içinde yüklenecektir ... umarım ..
- IE9, WOFF ve TTF ve OTF'yi destekler (buna rağmen bir gömme biti şey ayarla - WOFF kullanıyorsanız çoğunlukla tartışmalı). ANCAK!!! IE9'da bir FOUT vardır. :(
- Webkit'te inmeyi bekleyen yama Yedek metni 0,5 saniye sonra göstermek için. Yani FF ile aynı davranış, ancak 3s yerine 0.5s.
Bu, tasarımcılara yönelik bir soru olsaydı, bu tür sorunlardan kaçınmanın yollarına gidebilirdi.
web yazı tipi yükleyici, ama bu başka bir soru olurdu. Paul İrlandalı bağlantısı bu konuda daha fazla ayrıntıya giriyor.
Açıklamaya eklemek istediğiniz bir şey var mı? Yorumlarda sesi kapatın. Diğer teknoloji meraklısı Stack Exchange kullanıcılarından daha fazla yanıt okumak ister misiniz? Tartışma dizisinin tamamına buradan göz atın .
