Mengapa Tidak Laman Web Segera Memaparkan Teks Mereka?

Sekiranya anda cenderung untuk menonton anak tetingkap penyemak imbas dengan mata helang, anda mungkin menyedari bahawa halaman sering memuat imej dan susun atur mereka sebelum memuatkan teks mereka-corak pemuatan yang bertentangan dengan yang kami alami pada tahun 1990-an. Apa yang sedang berlaku?

Sesi Soalan & Jawapan hari ini datang kepada kami dengan ihsan SuperUser-bahagian pembahagian Stack Exchange, kumpulan yang diketuai oleh komuniti laman web Q & A.

Soalan

Pembaca SuperUser Laurent sangat penasaran tentang mengapa laman web sepertinya memuat elemen yang sama sekali berbeza daripada yang mereka buat sekali. Dia menulis:

Saya perhatikan bahawa laman web baru-baru ini banyak perlahan untuk memaparkan teks mereka. Biasanya, latar belakang, imej dan sebagainya akan dimuatkan, tetapi tiada teks. Selepas beberapa lama teks mula muncul di sana sini (tidak semestinya semuanya pada masa yang sama).

Ia pada dasarnya berfungsi sebaliknya seperti yang digunakan, apabila teks dipaparkan dahulu, maka imej dan sisanya dimuatkan kemudian. Apakah teknologi baru yang membuat isu ini? Sebarang idea?

Perhatikan bahawa saya berada dalam sambungan yang perlahan, yang mungkin menonjolkan masalah.

Lihat [di atas] untuk contoh - semua dimuatkan tetapi memerlukan beberapa saat sebelum teks dipaparkan.

Jadi apa yang memberi? Laurent, dan ramai di antara kita, ingatlah ketika teks itu dimuatkan dahulu dan segala-galanya-animasi GIF, latar belakang ubin, dan semua artifak lain dari pelayaran web lewat lewat 90-an kemudian. Apa yang menyebabkan keadaan elemen reka bentuk semasa pertama, teks kemudian?

Jawapan

Penyumbang SuperUser Daniel Andersson menawarkan jawapan yang sangat terperinci yang mendapat hak ke bahagian bawah misteri mengapa-fon-beban-terakhir:

Salah satu sebabnya adalah bahawa pereka web pada masa kini suka menggunakan font web (biasanya dalam format WOFF), mis. melalui fon Web Google.

Sebelum ini, satu-satunya fon yang dapat dipaparkan di laman web adalah pengguna yang dipasang di dalam negara. Oleh kerana contohnya. Pengguna Mac dan Windows tidak semestinya mempunyai fon yang sama, pereka bentuk secara naluriah sentiasa mentakrifkan peraturan sebagai
font-family: Arial, Helvetica, sans-serif; 
di mana, jika fon pertama tidak dijumpai pada sistem, penyemak imbas akan mencari yang kedua, dan akhirnya fon "sans-serif".

Sekarang, seseorang boleh memberikan URL font sebagai peraturan CSS untuk mendapatkan penyemak imbas untuk memuat turun fon, oleh itu:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700); 
dan kemudian memuatkan font untuk elemen tertentu dengan menggunakan contoh:
font-family: 'Droid Serif', sans-serif; 
Ini sangat popular untuk dapat menggunakan fon langganan, tetapi ia juga membawa kepada masalah yang tidak dipaparkan teks sehingga sumber daya telah dimuatkan oleh penyemak imbas, yang termasuk masa muat turun, masa muat fon dan waktu yang diberikan. Saya menjangkakan bahawa ini adalah artifak yang anda alami.

Sebagai contoh: salah satu akhbar nasional saya, Dagens Nyheter, menggunakan fon web untuk tajuk utama mereka, tetapi bukan petunjuk mereka, jadi apabila laman web tersebut dimuatkan, saya biasanya melihat petunjuk pertama, dan setengah saat kemudian semua ruang kosong di atas dihuni dengan tajuk utama (ini adalah benar pada Chrome dan Opera, sekurang-kurangnya. Belum mencuba orang lain).

(Juga, pereka menyiram JavaScript di mana-mana sahaja di hari ini, jadi mungkin seseorang sedang berusaha melakukan sesuatu yang bijak dengan teks, sebab itulah ia tertangguh. Itu akan menjadi sangat khusus, walaupun: kecenderungan umum untuk teks ditangguhkan kali adalah isu fon web yang diterangkan di atas, saya percaya.)

Tambahan:

Jawapan ini menjadi sangat upvoted, walaupun saya tidak terperinci, atau mungkin kerana daripada ini. Terdapat banyak komen dalam thread soalan, jadi saya akan cuba untuk mengembangkan sedikit [...]

Fenomena itu nampaknya dikenali sebagai "kilat kandungan yang tidak dicerna" pada umumnya, dan "kilat teks yang tidak dicerap" khususnya. Mencari "FOUC" dan "FOUT" memberikan maklumat lanjut.

Saya boleh mencadangkan jawatan web designer Paul Irish pada FOUT berkaitan dengan fon web.

Apa yang boleh diperhatikan ialah pelayar yang berbeza mengendalikannya secara berbeza. Saya menulis di atas bahawa saya telah menguji Opera dan Chrome, yang kedua-duanya berkelakuan sama. Semua yang berasaskan WebKit (Chrome, Safari, dan lain-lain) memilih untuk mengelakkan FOUT oleh tidak memberikan teks fon web dengan font sandaran semasa tempoh muat fon web. Walaupun font web dicache, di sana akan menjadi penangguhan menyebabkan. Terdapat banyak komen dalam thread soalan ini mengatakan sebaliknya dan bahawa ia adalah salah salah bahawa fon cache disimpan seperti ini, tetapi mis. dari pautan di atas:

Dalam apa kes akan anda dapatkan FOUT

Akan: Memuat turun dan memaparkan ttf / otf / woff jauh

Akan: Memaparkan ttf / otf / woff cache

Akan: Memuat turun dan memaparkan data-jenis ttf / otf / woff

Akan: Menampilkan data cached -ttf / otf / woff cache

Tidak akan: Menampilkan fon yang telah dipasang dan dinamakan dalam stack font tradisional anda

Tidak akan: Menampilkan fon yang dipasang dan dinamakan menggunakan lokasi setempat ()

Memandangkan Chrome menunggu sehingga risiko FOUT hilang sebelum membuat rundingan, ini memberikan kelewatan. Untuk yang mana tahap kesannya kelihatan (terutamanya ketika memuatkan dari cache) nampaknya bergantung kepada antara perkara lain jumlah teks yang perlu diberikan dan mungkin faktor lain, tetapi caching tidak sepenuhnya menghapuskan kesannya.

Ireland juga mempunyai beberapa kemas kini mengenai tingkah laku pelayar pada 2011-04-14 di bahagian bawah jawatan:

Firefox (seperti Final FFb11 dan FF4) tidak lagi mempunyai FOUT! Wooohoo! Http: //bugzil.la/499292 Pada dasarnya teks tidak kelihatan selama 3 saat, dan kemudian ia membawa kembali font sandaran. Webfont mungkin akan memuat dalam tempoh tiga saat walaupun ... mudah-mudahan ...

IE9 menyokong WOFF dan TTF dan OTF (walaupun ia memerlukan sesuatu bitset embedding - kebanyakannya ditolak jika anda menggunakan WOFF). BAGAIMANA !!! IE9 mempunyai FOUT. :(

Webkit mempunyai patch yang menunggu untuk mendarat untuk menunjukkan teks sandaran selepas 0.5 saat. Tingkah laku yang sama seperti FF tetapi 0.5s dan bukannya 3s.

Sekiranya ini adalah soalan yang bertujuan untuk pereka, seseorang boleh pergi ke cara untuk mengelakkan masalah seperti seperti webfontloader, tetapi itu akan menjadi satu lagi soalan. Pautan Paul Irish memaparkan lebih lanjut mengenai perkara ini.

Mempunyai sesuatu untuk menambah penjelasannya? Bunyi dalam komen. Ingin membaca lebih banyak jawapan dari pengguna Stack Exchange yang berteknologi tinggi? Lihat thread perbincangan penuh di sini.