|
|
Persyaratan: Saat meminta situs Web perlu memuat banyak sumber daya, permintaan jaringan juga memengaruhi kecepatan rendering halaman web, ketika pengguna mengklik operasi dan kemudian pergi untuk memuat beberapa sumber daya dapat memengaruhi pengalaman pengguna, saat ini perkembangan pesat Internet, bandwidth dan lalu lintas sudah lama tidak terlalu mahal, bagaimana cara memuat sumber daya terlebih dahulu atau di muka server target untuk membuat tautan ke sana?
Putuskan sambungan sebelumnya
Kata kunci preconnect dalam atribut elemen adalah petunjuk bagi browser bahwa pengguna mungkin memerlukan sumber daya dari sumber target, sehingga browser dapat meningkatkan pengalaman pengguna dengan melakukan pra-pemuatan terlebih dahulu ke sumber tersebut.
Preconnect memungkinkan browser untuk melakukan sejumlah tindakan sebelum permintaan HTTP secara resmi dikirim ke server, termasuk resolusi DNS, negosiasi TLS, dan jabat tangan TCP, yang menghilangkan penundaan pulang pergi dan menghemat waktu pengguna.
Preconnect adalah alat pengoptimalan penting yang dapat mengurangi jalur bolak-balik dalam banyak permintaan - dalam beberapa kasus mengurangi latensi hingga ratusan atau ribuan milidetik.
Berikut ini contoh penggunaan preconnect untuk Google Fonts. Dengan menambahkan petunjuk preconnect ke fonts.gstatic.com, browser akan segera memulai permintaan, yang dieksekusi secara paralel dengan permintaan CSS. Dalam skenario ini, preconnect menghilangkan tiga RTT (Round-Trip Time) dari jalur kritis dan mengurangi latensi lebih dari setengah detik.
Sintaksnya adalah sebagai berikut:
Dokumentasi: https: //developer.mozilla.org/en ... nk_types/preconnect
DNS-prefetch Menggunakan dns prefetch
Kata kunci dns-prefetch dalam atribut elemen adalah cara untuk memperingatkan browser bahwa pengguna mungkin memerlukan sumber daya dari sumber target, sehingga browser dapat meningkatkan pengalaman pengguna dengan melakukan resolusi DNS terlebih dahulu untuk sumber tersebut.
Prefetching DNS memungkinkan browser menjalankan resolusi DNS di latar belakang saat pengguna menjelajahi halaman. Hal ini mengurangi latensi dengan memungkinkan resolusi DNS selesai pada saat pengguna mengeklik tautan. Prapengambilan DNS dapat dilakukan pada URL tertentu dengan menambahkan rel="dns-prefetch' pada atribut tag tautan, yang kami rekomendasikan untuk font Google, Google Analytics, dan CDN.
"Permintaan DNS merupakan lalu lintas yang sangat rendah dalam hal bandwidth, tetapi latensi bisa tinggi, terutama pada perangkat seluler. Dengan melakukan prefetch DNS yang ditentukan, Anda dapat secara signifikan mengurangi latensi dalam skenario tertentu, seperti saat pengguna mengklik sebuah tautan. Dalam beberapa kasus, latensi dapat dikurangi hanya dalam satu detik -- Mozilla Developer Network".
Sintaksnya adalah sebagai berikut:
Dokumentasi: https: //developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
Preload
Nilai preload pada atribut elemen memungkinkan Anda mendeklarasikan permintaan pengambilan dalam HTML yang menentukan sumber daya yang akan segera dibutuhkan halaman, dan Anda ingin mulai memuat di awal siklus hidup halaman, sebelum mekanisme perenderan utama peramban dimulai. Hal ini memastikan bahwa sumber daya tersebut tersedia lebih awal dan kecil kemungkinannya untuk menyumbat perenderan halaman, sehingga meningkatkan kinerja. Meskipun namanya mengandung istilah load, ia tidak akan memuat dan menjalankan skrip, tetapi hanya menjadwalkannya untuk diunduh dan di-cache pada prioritas yang lebih tinggi.
Preload adalah standar Web baru untuk mengontrol bagaimana sumber daya tertentu dimuat, dan ini adalah versi terbaru dari prefetch subresource yang sudah tidak digunakan lagi pada bulan Januari 2016. Arahan ini dapat digunakan dalam <link>, seperti <link rel="preload">. Secara umum, yang terbaik adalah menggunakan preload untuk memuat sumber daya Anda yang paling penting, seperti gambar, CSS, JavaScript, dan file font. Hal ini tidak sama dengan preload browser, yang hanya memuat sumber daya yang dideklarasikan dalam HTML. preload directive sebenarnya mengatasi keterbatasan ini dan memungkinkan pemuatan sumber daya yang didefinisikan dalam CSS dan JavaScript, dan memungkinkan untuk menentukan kapan menerapkan setiap sumber daya.
Preload berbeda dengan prefetch karena preload berfokus pada halaman saat ini dan memuat sumber daya dengan prioritas tinggi, sedangkan prefetch berfokus pada sumber daya yang akan dimuat pada halaman berikutnya dan memuatnya dengan prioritas rendah. Perhatikan juga bahwa pramuat tidak memblokir peristiwa pemuatan jendela.
Ada banyak jenis konten yang dapat dimuat sebelumnya. Nilai yang mungkin untuk atribut as adalah:
audio: file audio, biasanya digunakan untuk <audio>.
document: dokumen HTML yang dimaksudkan untuk menjadi <frame> atau disematkan <iframe>.
embed: sumber daya yang akan disematkan dalam elemen <embed>.
fetch: sumber daya yang akan diakses melalui permintaan fetch atau XHR, seperti ArrayBuffer atau file JSON.
font: berkas font.
image: berkas gambar.
objek: sumber daya yang akan disematkan di dalam elemen <objek>.
script: berkas JavaScript.
style: lembar gaya CSS.
track: berkas WebVTT.
worker: Pekerja web JavaScript atau pekerja bersama.
video: File video, biasanya digunakan dalam <video>.
Sintaksnya adalah sebagai berikut:
Dokumentasi: https: //developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
|
Sebelumnya: [WebView2] (2) WinForm memperkenalkan WebView2 untuk menampilkan konten WebBerikutnya：【WebView2】 （C） Komunikasi dua arah aplikasi Web dan WinForm
|
| ( 鲁ICP备14021824号-2)|Peta Situs
T