Html `prefetch` dan` preload` untuk petunjuk sumber

Prefetch digunakan untuk sumber preload yang mungkin diperlukan pada masa akan datang, seperti fail HTML atau JS yang diminta di halaman, dengan keutamaan yang rendah; Preload digunakan untuk memuat sumber yang sangat diperlukan pada halaman semasa, seperti CSS utama, fon, dan lain -lain, dengan keutamaan yang tinggi. Kedua -duanya tidak boleh dicampur, dan perhatian harus dibayar kepada kawalan kuantiti dan keserasian. Gunakan secara munasabah boleh meningkatkan prestasi pemuatan.

Dalam pengoptimuman beban penyemak imbas, prefetch dan preload adalah dua kaedah petunjuk sumber yang biasa disebutkan. Mereka semua boleh membantu meningkatkan prestasi halaman, tetapi penggunaan dan senario yang terpakai adalah berbeza. Jika anda hanya samar -samar tahu bahawa "mereka semua dimuatkan lebih awal daripada masa", ia mungkin tidak sepenuhnya memainkan nilai mereka.

1. prefetch : sumber preload yang mungkin diperlukan pada masa akan datang

prefetch bermaksud "prefetch", yang memberitahu penyemak imbas bahawa sumber ini boleh digunakan pada masa akan datang dan boleh dimuatkan apabila ia bebas.

• Ia sering digunakan untuk permintaan silang halaman. Sebagai contoh, jika pengguna sedang melawat halaman utama, anda meramalkan bahawa dia akan mengklik pada halaman terperinci tertentu seterusnya, dan anda boleh prefetch sumber utama halaman itu.
• Penyemak imbas akan memuatkan sumber -sumber ini hanya selepas halaman utama dimuatkan dan apabila ia percuma.
• Keutamaan pemuatan adalah rendah dan tidak akan menjejaskan pemuatan sumber teras halaman semasa.

Contoh Penggunaan:

 <link rel = "prefetch" href = "next-page.html" as = "document">

Kegunaan biasa termasuk:

• Pramuat halaman HTML untuk halaman seterusnya
• Pramuat fail JS atau CSS yang pengguna kemungkinan besar akan mengakses

Nota: Jangan menyalahgunakannya, terlalu banyak prefetch boleh melambatkan pengalaman keseluruhan, terutama pada mudah alih.

2. preload : Muatkan sumber yang sangat diperlukan pada halaman semasa dengan segera

preload adalah kaedah pemuatan yang lebih proaktif, sesuai untuk sumber yang akan digunakan dengan segera pada halaman semasa.

• Ia mempunyai keutamaan yang tinggi dan penyemak imbas mula memuatkan sumber -sumber ini seawal mungkin apabila menghuraikan HTML.
• Ia mesti digunakan dengan as sebagai penyemak imbas jenis sumber ini agar dapat mengendalikan keutamaan beban dan dasar keselamatan kandungan.

Contoh Penggunaan:

 <link rel = "preload" href = "style.css" as = "style" onload = "this.rel = &#39;stylesheet&#39;">

Beberapa senario biasa:

• Memuatkan CSS/JS Kunci terlebih dahulu
• Muatkan fail fon terlebih dahulu (seperti .woff2 )
• Memuatkan skrip atau gambar yang dimuatkan secara asynchronously terlebih dahulu

Petua: Menggabungkan harta onload secara automatik boleh memohon sumber selepas memuatkan. Sebagai contoh, contoh di atas ditetapkan ke lembaran gaya selepas memuatkan CSS untuk mengelakkan penyekatan menyekat.

3. Gunakan cadangan dan langkah berjaga -jaga

• Jangan campurkan prefetch dan preload : Satu sesuai untuk masa depan dan yang lain sesuai untuk masa kini. Sekiranya anda melakukannya dengan tidak betul, ia boleh menyebabkan perintah pemuatan sumber menjadi keliru.
• Bilangan kawalan : Terutama preload, terlalu banyak akan menduduki jalur lebar dan menjejaskan kelajuan skrin pertama.
• Bantuan Alat Ujian : Gunakan panel rangkaian Chrome Devtools untuk melihat sama ada sumber dimuatkan seperti yang diharapkan dan sama ada keutamaannya adalah betul.
• Nota Keserasian : Walaupun pelayar arus perdana menyokong tag ini, pelayar yang lebih tua mungkin mengabaikannya.

Secara keseluruhan, prefetch lebih seperti "rancangan sandaran" dan preload adalah "perkara yang perlu diminta segera". Gunakan munasabah untuk membuat beban halaman lebih cepat dan lebih lancar. Pada dasarnya semua itu, tidak rumit tetapi mudah untuk mengabaikan butiran.

Atas ialah kandungan terperinci Html `prefetch` dan` preload` untuk petunjuk sumber. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!