Adakah JavaScript Perlu Mendahului CSS untuk Rendering Halaman Optimum?

Adakah CSS Sentiasa Mendahului JavaScript?

Soalan:
Pengesyoran dalam talian kerap menasihatkan meletakkan CSS sebelum JavaScript, menunjukkan bahawa urutan pemaparan memerlukan semua maklumat gaya yang diperlukan sebelum memaparkan halaman. Adakah pengesyoran ini masih sah?

Jawapan:

Untuk menyiasat dakwaan ini, pelbagai ujian telah dijalankan menggunakan skrip Ruby yang membenarkan kelewatan sewenang-wenangnya dalam pengambilan semula JavaScript dan CSS. Hasilnya mendedahkan bahawa prestasi penyemak imbas desktop moden sebenarnya bertambah baik apabila JavaScript termasuk diletakkan dahulu:

• CSS Pertama: Pemaparan halaman mengambil masa 1.5 saat.
• JavaScript Didahulukan: Pemaparan halaman mengambil masa 1.4 saat.

Hasil yang serupa diperhatikan dalam Chrome, Firefox dan Internet Explorer. Walau bagaimanapun, Opera tidak menunjukkan perbezaan dalam masa pemaparan.

Penjelasan:
Pelayar moden melaksanakan penghuraian spekulatif, di mana mereka mula mendapatkan dan melaksanakan skrip sebelum mereka menemui tag. Disebabkan ini, penyemak imbas menunggu JavaScript untuk memuatkan dan melaksanakan sebelum memuat turun CSS, menafikan sebarang faedah termasuk CSS terlebih dahulu.

Kesimpulan:
Berdasarkan keputusan ujian, ia adalah optimum untuk memasukkan helaian gaya luaran selepas skrip luaran dalam tag, terutamanya untuk pelayar desktop dengan lebih 85% bahagian pasaran. Perintah ini memastikan muat turun selari dan meningkatkan prestasi untuk majoriti pengguna.

Pengecualian:
Perhatikan bahawa kesimpulan di atas digunakan untuk penyemak imbas desktop dan mungkin tidak berlaku untuk penyemak imbas mudah alih, seperti sesetengah tidak menyokong penghuraian spekulatif pada masa ini. Oleh itu, tetap berhemat untuk menguji dan mempertimbangkan kesan prestasi pada khalayak khusus anda.

Atas ialah kandungan terperinci Adakah JavaScript Perlu Mendahului CSS untuk Rendering Halaman Optimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!