Resolusi DNS Ditambahkan | Alex MacArthur – Beragampengetahuan

Saya menyukai kepuasan menemukan hasil yang cepat dan kecil yang memaksimalkan kinerja front-end situs web. Mereka ditemukan baru-baru ini dengan menggali banyak petunjuk sumber daya dari browser modern.

Salah satu hal yang menarik minat saya: pengambilan awal DNS. itu tidak mendapat banyak perhatian seperti perintahnya preload dalam beberapa tahun terakhir, namun memiliki keuntungan menarik jika kondisinya tepat – yaitu jika situs web Anda mungkin mungkin Berinteraksi dengan domain pihak ketiga kapan saja selama kunjungan halaman. Memikirkan kondisi ini dapat memberi Anda hasil yang memuaskan dan membuat Anda lebih memahami resolusi DNS secara keseluruhan – sebuah komponen penting dan ada di mana-mana di web. Ini adalah waktu yang dihabiskan dengan baik. Mari kita lihat lagi.

Setiap kali terjadi pemadaman jaringan yang meluas, selalu ada kebenaran di balik ungkapan “selalu DNS”. Ini adalah teknologi dasar web namun diabaikan secara tidak sengaja, jadi sangat menyenangkan untuk menemukan masalah yang muncul. Namun, secara konseptual, ini bukanlah hal yang paling gila. DNS sering kali disederhanakan sebagai “buku telepon Internet”. Saya pikir ini adalah metafora yang bagus.

Mari kita menggambar versi proses yang konyol dan sederhana untuk browser yang bernavigasi ke picperf.io:

1. Pengguna membuat permintaan picperf.io di peramban. Kelihatannya jelas, namun domain tersebut sebenarnya hanyalah fasad. Server asal PicPerf berlokasi di alamat IP terkait dengan domain ini. yaitu Apa yang dibutuhkan browser untuk mengarahkan permintaan. Jadi, sebelum kita melanjutkan, kita harus mencarinya.
2. Proses pencarian dimulai dengan mengakses server DNS rekursif. Ini adalah perantara antara klien dan server yang memelihara asosiasi domain-ke-IP. Analogi lainnya adalah menganggap server DNS rekursif sebagai detektif Anda, yang bertugas menemukan jawaban atas sebuah misteri.
3. Subset dari server DNS berbeda yang digunakan untuk menemukan server “sumber kebenaran”. Berisi semua catatan (A, TXT, CNAMEDLL. ). Ini pertama-tama diselesaikan melalui TLD dan kemudian dilanjutkan server resmi.
4. Server DNS rekursif mengembalikan alamat IP ke browser. Detektif telah melakukan tugasnya.
5. Server asal PicPerf menerima permintaan dan memberikan respons.

Di sini, saya telah membuat diagram ini untuk membantu memvisualisasikannya.

apa TIDAK Omong-omong, ini mewakili jumlah caching dan kompleksitas lain yang terjadi sepanjang proses pencarian dari browser ke berbagai server. Ini adalah lubang kelinci yang tidak akan kami pedulikan saat ini.

Setelah catatan DNS ada dan dikonfigurasi dengan benar, tidak banyak yang perlu dipikirkan. Parsernya cerdas dan prosesnya sangat cepat. Namun situs web pada umumnya melakukan lebih dari sekadar meminta sumber daya dari domainnya sendiri. Seringkali ada banyak sekali domain pihak ketiga yang berperan, dan solusi ini bisa berkembang, terkadang lebih cepat dari yang Anda kira.

Saya menjelajahinya sendiri dengan menggunakan skrip Puppeteer yang memuat halaman, menggulir ke bawah, dan menambahkan semua waktu resolusi DNS untuk setiap aset yang dapat diperiksa. Berikut beberapa hasil yang saya dapatkan setelah mengirimkan cold request ke beberapa situs. Ingat, semua ini tidak ilmiah:

• ebay.com: 6 host berbeda, total waktu resolusi 117,47 ms.
• rd.com: 5 host berbeda, total waktu resolusi 108,89 ms.
• msn.com: 12 host berbeda, total waktu resolusi 306,56 ms.
• temu.com: 9 host berbeda, total waktu resolusi 108,25 ms

Memang benar, angka-angka agregat seperti ini tidak mengungkapkan tujuan atau waktu penyelesaiannya—hanya saja penyelesaian tersebut terjadi setelah halaman tersebut diakses. Namun ini berarti biaya agar situs web Anda dapat mengakses beberapa domain lebih besar dari nol. Mari kita pahami mengapa hal ini terjadi melalui sebuah contoh.

Saya memiliki gambar yang sama yang dimuat dari lima domain berbeda.

<img src="https://picperf.io/img/4CAF9H/rat.jpg?1" />
<img src="https://images.macarthur.me/img/4CAF9H/rat.jpg?2" />
<img src="https://images.typeitjs.com/img/4CAF9H/rat.jpg?3" />
<img src="https://images.jamcomments.com/img/4CAF9H/rat.jpg?4" />
<img src="https://images.plausiblebootstrapper.com/img/4CAF9H/rat.jpg?5" />

Saat halaman dimuat, kumpulan gambar ini terlihat seperti ini:

Setiap warna mewakili tahapan berbeda dalam siklus hidup permintaan. Biru muda (kedua dari kiri) mewakili fase resolusi DNS. Masing-masing domain ini berbeda halaman domain, jadi masing-masing harus melalui proses ini.

Untuk permintaan baru seperti ini, tidak banyak yang dapat atau perlu kami lakukan untuk mengurangi waktu pencarian. Pemindai pramuat browser telah mengidentifikasi sumber daya ini ketika memilah dokumen, sehingga dapat memulai permintaan dengan sangat cepat. Namun, untuk sumber daya yang ditemukan terlambat atau dimuat dengan lambat, situasinya menjadi lebih rumit.

Mari kita ubah halamannya sedikit. Daripada memuat semua gambar ini sekaligus, kami akan dengan malas menambahkannya ke halaman setelah beberapa detik menggunakan JavaScript. Namun belum tentu semuanya. Kami akan melempar koin untuk menentukan apakah koin tersebut akan dirender dari host tersebut:

const hosts = [
  "picperf.io",
  "images.macarthur.me",
  "images.jamcomments.com",
  "images.plausiblebootstrapper.com",
  "images.typeitjs.com",
];

function loadImage(host) {
  
  if (Math.random() < 0.5) return;
  
  const img = new Image();
  img.src = `https://${host}/img/4CAF9H/rat.jpg?${Math.random()}`;
  document.body.appendChild(img);
}

setTimeout(() => hosts.map(loadImage), 1000);

Misalkan pelemparan koin mewakili beberapa perilaku tak menentu di halaman. Bisa berupa input pengguna, kondisi jaringan, atau banyak hal lainnya. Fokusnya ada pada halaman mungkin Komunikasi dengan tuan rumah tidak dijamin.

Kali ini, pemindai browser yang dimuat sebelumnya tidak dapat langsung memperbaiki masalah apa pun. Setiap resolusi DNS memerlukan waktu menunggu untuk memulai permintaan berikutnya. Anda dapat melihat di jendela yang dipilih:

Karena setiap tuan rumah punya peluang Bisa Saat halaman mana pun dimuat, kita bisa mendapatkan langkah awal yang ekonomis dalam menyelesaikan data DNS-nya (ini bukan proses yang mahal, jadi tidak ada ruginya). kami akan lulus dns-prefetch Kiat sumber daya. Tip untuk setiap area berbeda yang mungkin berinteraksi dengan kita:

<head>
  <link rel="dns-prefetch" href="https://picperf.io" />
  <link rel="dns-prefetch" href="https://images.macarthur.me" />
  <link rel="dns-prefetch" href="https://images.jamcomments.com" />
  <link rel="dns-prefetch" href="https://images.plausiblebootstrapper.com" />
  <link rel="dns-prefetch" href="https://images.typeitjs.com" />
</head>

Sekarang, lihat air terjun kami – tahap “pencarian DNS” sebenarnya telah dihilangkan.

Saat browser diminta untuk meminta dan memuat gambar, browser telah mengunci dan memuat alamat IP masing-masing. Tidak ada hasil yang mengubah hidup di sini, tapi rasanya menyenangkan memiliki air terjun yang lebih ramping.

Itu bukan fokus di sini, tapi ada baiknya meluangkan waktu sejenak untuk melihat dua tips sumber daya lainnya yang sering digunakan dalam percakapan yang sama tentang prefetching DNS: preconnect Dan preload. (ini prefetch Mungkin juga terlintas dalam pikiran bahwa masih ada kesenjangan dalam dukungan browser, dan disarankan untuk menggunakan API aturan spekulatif. )

Masing-masing dari ketiga tips ini melangkah lebih jauh dalam siklus hidup permintaan:

• dns-prefetch:Selesaikan DNS dan serahkan sisanya ke browser.
• preconnect: Membuat koneksi lengkap ke server (resolusi DNS, jabat tangan TCP, dan negosiasi TLS) dan menyerahkan sisanya ke browser.
• preload: Melakukan perolehan sumber daya secara lengkap dari awal hingga akhir.

Masing-masing memiliki biaya yang berbeda, jadi pilihan di antara keduanya sangat bergantung pada Seberapa besar kemungkinan Anda memerlukan sumber daya yang ditemukan kemudian. Biasanya, cara Anda mengambil keputusan ini:

• meraih dns-prefetch Jika kebetulan Anda membutuhkan sumber daya dari domain eksternal, atau situs Anda bergantung pada sumber daya dari berbagai host pihak ketiga. Tip ini berbiaya rendah dan memberi Anda keuntungan mendapatkan permintaan bila diperlukan.
• meraih preconnect Jika Anda tahu pengguna akan mengunduh dengan cepat Sumber daya dari domain. Membuka koneksi terlebih dahulu akan membantu browser mencapai titik ketika perlu meminta sesuatu. Hanya saja, jangan terbawa suasana. Ini adalah perbandingan dns-prefetchdan hal ini tidak perlu dilakukan untuk sumber daya yang berada dalam cakupan pemindai pramuat browser (yaitu, direferensikan langsung dalam HTML).
• meraih preload Anda berurusan dengan sumber daya spesifik dan berprioritas tinggi yang pasti akan diunduh suatu saat nanti dalam siklus hidup halaman. Font yang direferensikan dalam CSS adalah contoh yang disukai di sini.

Aturan-aturan ini tidak kaku dan cepat, jadi berikan ruang bagi jutaan faktor dan situasi yang berbeda. Namun jika digunakan dengan benar, mereka bisa memberi Anda dorongan yang besar.

memiliki rasa preconnect Dan preload

Mengingat semua ini, mari kita jelajahi lebih jauh. Asumsikan kita tahu bahwa semua gambar dalam contoh akan diunduh harus. Dalam hal ini, buatlah koneksi penuh dengan preconnect adalah ide yang bagus. Berikut adalah beberapa gambaran kecil tentang bagaimana hal ini membantu kita keluar dari masalah. Mari tambahkan petunjuk untuk setiap domain berbeda:

<link rel="preconnect" href="https://images.macarthur.me" />
<link rel="preconnect" href="https://images.jamcomments.com" />
<link rel="preconnect" href="https://images.plausiblebootstrapper.com" />
<link rel="preconnect" href="https://images.typeitjs.com" />

Perintah ini akan memberikan petunjuk pada browser untuk membuat koneksi penuh ke sumber tanpa melakukan pengunduhan. Ini menghilangkan langkah-langkah DNS, TCP dan TLS, dan air terjun kami mencerminkan hal ini:

Faktanya, bagian DNS, koneksi awal, dan SSL tidak terdaftar:

Anda mungkin dapat memperkirakan apa yang akan terjadi jika kami menghentikan perintah yang lebih agresif preload. Kali ini, kami akan memanggil setiap gambar secara spesifik:

<link rel="preload"
      as="image"
      href="https://picperf.io/img/4CAF9H/rat.jpg" />
<link rel="preload"
      as="image"
      href="https://images.macarthur.me/img/4CAF9H/rat.jpg" />
<link rel="preload"
      as="image"
      href="https://images.jamcomments.com/img/4CAF9H/rat.jpg" />
<link rel="preload"
      as="image"
      href="https://images.plausiblebootstrapper.com/img/4CAF9H/rat.jpg" />
<link rel="preload"
      as="image"
      href="https://images.typeitjs.com/img/4CAF9H/rat.jpg" 
/>

Sekarang ada tidak ada penundaan sambil mengambil gambarnya. Mereka diunduh dalam milidetik setelah pemuatan halaman dan hanya ditampilkan ke halaman bila diperlukan:

Satu hal lagi yang perlu diperhatikan preload: Tentukan tepat URL itu penting. Jika karakter sekecil apa pun dalam parameter string kueri berbeda, browser akan memperlakukannya sebagai sumber daya berbeda, sehingga menyebabkan sumber daya yang sama diunduh ulang. Hati-hati dengan pistol itu.

Baik pengambilan awal DNS maupun petunjuk sumber daya lainnya tidak akan mengubah kinerja laman Anda secara drastis – keduanya lebih seperti pisau bedah daripada gergaji mesin. Terlepas dari itu, ketika ada peluang untuk memperoleh keuntungan kecil namun nyata, ada baiknya Anda memilikinya di ujung jari Anda. Selain itu, bila digunakan bersama dengan beberapa alat lain untuk menyempurnakan kinerja, Anda mungkin mendapatkan keuntungan yang lebih besar dari yang Anda harapkan. Pengaruh dapat semakin besar dari sana, menghasilkan tingkat konversi yang luar biasa, kekayaan besar, dan ketenaran global atas pengaruh Anda dalam dunia kinerja situs web front-end. Anda bahkan mungkin bisa meyakinkan Menteri Keuangan untuk bersedia membayar tagihan Anda.

Hanya bermimpi di sini.