Neden Web Sayfaları Hemen Metnini Göstermiyor?

Tarayıcı bölmesini bir kartal gözüyle izlemeye yatkınsanız, sayfaların metinlerini yüklemeden önce sık sık görüntülerini ve düzenini yüklediğini fark etmiş olabilirsiniz - 1990'lı yıllarda yaşadığımız tam ters yükleme şekli. Neler oluyor?

Bugünkü Soru &Yanıt oturumu bize Q & A web sitelerinin topluluk temelli bir gruplandırması olan Stack Exchange'in bir alt bölümü olan SuperUser nezaketen geliyor.

Soru

SüperKullanıcı okuyucu Laurent, tam olarak sayfaların neden bir zamanlar bir zamanlar yaptığından daha farklı öğeler yüklediğini çok merak ediyor. Yazıyor:

Son dönemde birçok web sitesinin metnini görüntülemekte yavaş olduğunu fark ettim. Genellikle arka plan, görüntüler vb. Yüklenecek, ancak metin yüklenmeyecek. Bir süre sonra metin burada ve orada ortaya çıkmaya başlıyor( her zaman hepsi aynı anda değil).

Temel olarak, metnin önce gösterildiğinde eskisi gibi zıttı çalışır, daha sonra görüntüler ve kalan metin daha sonra yükleniyordu. Bu konuyu hangi yeni teknoloji oluşturuyor? Herhangi bir fikir?

Sorunu muhtemelen vurgulayan yavaş bir bağlantıdayım unutmayın.

Bir örnek için [yukarıdaki] 'e bakın - her şey yüklenir ancak metin nihayet görüntülenene kadar birkaç saniye sürer.

Peki ne veriyor? Laurent ve çoğumuz, metnin ilk yüklendiği bir zamanı ve her şeyin( garrish animasyonlu GIF'leri, kiremitli arka planlar ve 90'lı yılların sonlarına doğru web'de gezinen diğer eserler) daha sonra geldiğini unutmayın.İlk tasarım öğelerinin mevcut durumuna, metin daha sonra ne neden olur?

Cevap

SüperKullanımcı katkıda bulunan Daniel Andersson, neden-font-son-yük-son gizem: hemen altına alan olağanüstü ayrıntılı bir cevap sunuyor

Bir nedeni, web tasarımcılarının günümüzde web yazı tiplerini( genellikle WOFF formatında) kullanmaktan hoşlanıyor olması), ÖrneğinthroughGoogle Web yazı tipleri.

Daha önce bir sitede görüntülenebilen tek font, kullanıcının yerel olarak yüklediği fontlardır.Örn. Mac ve Windows kullanıcılarının aynı yazı tiplerine sahip olmaları gerekmez; tasarımcılar içgüdüsel olarak daima kuralları

font-family olarak tanımlarlar: Arial, Helvetica, sans-serif;

Burada, sistemde ilk yazı tipi bulunamazsa, tarayıcı ikinci ve son olarak "sans-serif" yazı tipini arar.

Şimdi, bir yazı tipi URL'sini, bir fontu indirmek için tarayıcıya almak için bir CSS kuralı olarak verebilirsiniz:

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

ve ardından belirli bir öğe için fontu örneğin:

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

Bu, özel yazı tiplerini kullanabilmek için çok popülerdir, ancak kaynak yükleme zamanı, yazı tipi yükleme süresi ve oluşturma zamanı da dahil tarayıcı tarafından yüklenene kadar hiçbir metin görüntülenmemesine neden olur. Bunun yaşadığınız eser olduğunu düşünüyorum.

Örnek olarak: Ulusal gazetelerimden biri olan Dagens Nyheter, başlıkları için web yazı tiplerini kullanıyor ancak başlıca çizgileri için web yazı tipleri kullanmıyor, bu yüzden bu site yüklendiğinde öncelikle önce kabloları görüyorum ve yarım saniye sonra tüm boş alanlar(en azından Chrome ve Opera'da geçerlidir, başkalarını denemedim).

( Ayrıca, tasarımcılar günümüzde neredeyse her yerde JavaScript sergiliyor; bu nedenle belki birisi metnin akıllıca bir şey yapmaya çalışıyor; bu nedenle gecikmeli.) Bununla birlikte, siteye özgü genelleme eğilimi var: metin gecikmeli genel eğilimibu kez yukarıda tarif edilen web yazı tipleri meselesidir, sanırım.)

Toplama:

Bu yanıt yüzünden çok ayrıntıya girmedim veya belki de çünkü çok canlanmış.Soru dizisinde birçok yorum var, bu yüzden biraz genişletmeyi deneyeceğim [...]

Bu fenomen görünüşte genel olarak "unstyled içerik flaşı" ve "unstyled metin flaşı" olarak biliniyor."FOUC" ve "FOUT" araması daha fazla bilgi verir.

Web tasarımcı Paul Irish'in web yazı tipleriyle bağlantılı FOUT konusundaki önerilerini tavsiye edebilirim.

Not yazanlar farklı tarayıcıların bunu farklı şekilde ele alıyor olmasıdır. Yukarıda benzer şekilde davrandım Opera ve Chrome'u test etmiş olduğumu yazmıştım. Tüm WebKit tabanlı olanlar( Chrome, Safari, vb.) tarafından FOUT'dan kaçınmayı seçtiler web yazı tipi metni, web yazı tipi yükleme süresi boyunca bir geri arama yazı tipi ile oluşturuyor. web fontu önbelleğe alınsa bile, bir işleme gecikmesi olacaktır. Bu soru dizisinde aksini söyleyen birçok yorum var ve önbelleğe alınmış yazı tiplerinin bu şekilde davranıldığını yanlış yorumluyoruz, ancak ör.

Hangi durumlarda bir FOUT

• alacaksınız Will: Uzaktan bir ttf /otf/ woff
• indirip görüntüleme Will: Önbellekli bir ttf görüntüleme /otf/ wData
• Will: Bir veri-uri ttf indirme ve görüntüleme /otf/ woff
• Will: Önbelleklenmiş bir veri görüntüleme /otf/ woff
• Yapılmayacak: Geleneksel yazı tipi yığına önceden yüklenmiş ve adlandırılmış bir font görüntüleme
• Yapmayacak: local() kullanarak yüklenen ve adlandırılan bir fontu görüntüleme,location

Chrome, işleme başlamadan önce FOUT riski yok olana kadar bekler, bu bir gecikme sağlar. kapsamı için efekti görülebilir( özellikle önbellekten yüklenirken), diğer şeylerin yanında görüntülenmesi gereken metin miktarı ve belki de başka faktörler bağlıdır, ancak önbellekleme etkisi tamamen kaldırmaz.

İrlandalı ayrıca, postanın alt kısmında 2011-04-14 itibariyle tarayıcı davranışıyla ilgili bazı güncellemeler var:

• Firefox ( FFb11 ve FF4 Sonu itibariyle) artık FOUT yok! Wooohoo! Http: //bugzil.la/ 499292 Temelde metin 3 saniye boyunca görünmez ve ardından geri dönüş yazı tipini geri getiriyor. Webfont muhtemelen bu üç saniyede olsa yükleyecektir. .. Umarım. .
• IE9, WOFF ve TFF ve OTF'yi destekler( ancak WOFF kullanırsanız bir bitetleme şeyinin-çoğunlukla tartışma gerektirir). ANCAK!IE9'da bir FOUT var. :(
• Webkit'te 0.5 saniye sonra geri dönüş metnini göstermek için arazi bekleyen bir düzeltme eki var. Ama FF ile aynı davranış ancak 3s yerine 0.5s

Bu tasarımcılar için bir soru olsaydı, bu türden kaçınma yollarına gidebilirizwebfontloader gibi sorunlarla ilgili bir sorun olabilir, ancak bu başka bir soru olacaktır Paul İrlandalı bağlantı bu konuyla ilgili daha ayrıntılı olarak bilgi verir

Açıklamaya eklemek için bir şeyler var mı? Yorumlardaki sesi kapatın Diğer teknolojilerden daha fazla cevap okumak ister misiniz?savvy Stack Exchange kullanıcıları, tam tartışma dizinine göz atın