Persyaratan: Saat meminta situs web, Anda perlu memuat banyak sumber daya, permintaan jaringan juga memengaruhi kecepatan rendering halaman web, ketika pengguna mengklik operasi untuk memuat beberapa sumber daya dapat memengaruhi pengalaman pengguna, sekarang perkembangan Internet yang pesat, bandwidth dan lalu lintas tidak lagi begitu mahal, bagaimana cara memuat sumber daya terlebih dahulu atau membuat tautan dengan server target terlebih dahulu?
Prakoneksi
Kata kunci preconnect untuk properti elemen adalah petunjuk ke browser bahwa pengguna mungkin memerlukan sumber daya dari sumber target sehingga browser dapat menggunakannyaTingkatkan pengalaman pengguna dengan memulai koneksi ke sumber ini secara preemptif。
preconnect memungkinkan browser untuk melakukan sejumlah tindakan sebelum permintaan HTTP secara resmi dikirim ke server, termasuk resolusi DNS, negosiasi TLS, jabat tangan TCP, yang menghilangkan latensi bolak-balik dan menghemat waktu bagi pengguna.
Preconnect adalah sarana pengoptimalan penting untuk mengurangi jalur bolak-balik dalam banyak permintaan - dalam beberapa kasus dengan latensi ratusan atau ribuan milidetik.
Berikut adalah contoh penggunaan preconnect untuk Google Fonts, di mana dengan menambahkan prompt preconnect ke fonts.gstatic.com, browser akan segera memulai permintaan yang akan dijalankan secara paralel dengan permintaan CSS. Dalam skenario ini, preconnect menghilangkan tiga RTT (Round-Trip Time) dari jalur kritis danMengurangi latensi lebih dari setengah detik。
Sintaksnya adalah sebagai berikut:
Dokumentasi:Login hyperlink terlihat.
DNS-prefetch menggunakan DNS prefetch
Kata kunci dns-prefetch dari atribut elemen adalah untuk memperingatkan browser kepada pengguna bahwa pengguna mungkin memerlukan sumber daya dari sumber target, sehingga browser dapat meningkatkan pengalaman pengguna dengan melakukan resolusi DNS secara preemptif untuk sumber tersebut.
Prefetching DNS memungkinkan browser berada di halaman saat pengguna menjelajahJalankan resolusi DNS di latar belakang。 Dengan cara ini, resolusi DNS selesai saat pengguna mengklik tautan, sehingga latensi dapat dikurangi. Prefetching DNS dari URL tertentu dapat dilakukan dengan menambahkan rel="dns-prefetch' ke properti tag link, kami sarankan untuk menangani font Google, Google Analytics, dan CDN.
"Permintaan DNS memiliki lalu lintas bandwidth yang sangat sedikit, tetapi latensi bisa tinggi, terutama pada perangkat seluler. DNS yang ditentukan oleh prefetching dapat secara signifikan mengurangi latensi dalam skenario tertentu, seperti saat pengguna mengklik link. Terkadang, bahkan penundaan satu detik dapat dikurangi - Jaringan Pengembang Mozilla"
Sintaksnya adalah sebagai berikut:
Dokumentasi:Login hyperlink terlihat.
Pramuat pramuat
Nilai pramuat properti elemen memungkinkan Anda mendeklarasikan permintaan pengambilan dalam HTML, menentukan sumber daya yang akan segera dibutuhkan halaman, dan Anda ingin mulai memuat di awal siklus hidup halaman, sebelum mekanisme rendering utama browser dimulai. Ini memastikan bahwa mereka tersedia lebih awal dan kecil kemungkinannya untuk memblokir rendering halaman, meningkatkan kinerja. Bahkan jika namanya berisi istilah beban, itu tidak memuat dan mengeksekusi skrip, tetapi hanya menjadwalkannya untuk mengunduh dan meng-cache dengan prioritas yang lebih tinggi.
Preload adalah standar web baru yang mengontrol bagaimana sumber daya tertentu dimuat, peningkatan ke prefetch subresource, yang tidak digunakan lagi pada Januari 2016. Perintah ini dapat <link> digunakan di , misalnya <link rel = "preload">. Secara umum, yang terbaik adalah menggunakan pramuat untuk memuat sumber daya terpenting Anda, seperti gambar, CSS, JavaScript, dan file font. Ini tidak boleh disamakan dengan pramuat browser, yang hanya memuat sumber daya yang dideklarasikan dalam HTML. Direktif pramuat benar-benar mengatasi batasan ini dan memungkinkan pramuat sumber daya yang ditentukan dalam CSS dan JavaScript, dan memungkinkan keputusan tentang kapan harus menerapkan setiap sumber daya.
Preload berbeda dari prefetch karena berfokus pada halaman saat ini dan memuat resource dengan prioritas tinggi, sedangkan Prefetch berfokus pada resource yang akan dimuat halaman berikutnya dan dimuat dengan prioritas rendah. Perhatikan juga bahwa pramuat tidak memblokir peristiwa onload jendela.
Banyak jenis konten yang berbeda dapat dimuat sebelumnya. Kemungkinan sebagai nilai properti adalah:
audio: File audio, biasanya digunakan untuk <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: Sumber daya yang akan disematkan <embed>dalam elemen.
fetch: Sumber daya yang akan diakses melalui permintaan pengambilan atau XHR, seperti file ArrayBuffer atau JSON.
font: 字体文件。
gambar: File gambar.
objek: Sumber daya yang akan disematkan <object>dalam elemen.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
pekerja: Pekerja web JavaScript atau pekerja bersama.
Video: file video, biasanya digunakan untuk <video>.
Sintaksnya adalah sebagai berikut:
Dokumentasi:Login hyperlink terlihat.
|
Diposting pada 26/09/2022 21.45.08
|
|
|
|
Diposting pada 28/09/2022 08.54.26
|
