Perbedaan antar browser biasanya berada pada engine, integrasi platform, fitur, kebijakan privasi, dan optimasi implementasi. Walaupun detail internal berbeda, semuanya tetap mengikuti standar web yang sama agar HTML, URL, request, dan API dapat bekerja secara interoperable. Developer Tools di browser dapat membantu melihat alur tersebut secara langsung. Tab Network menunjukkan request, status, ukuran, timing, dan cache, sedangkan Performance dapat memperlihatkan aktivitas main thread serta rendering. Alat ini berguna untuk membedakan apakah keterlambatan berasal dari DNS, koneksi, server, download resource, JavaScript, atau pekerjaan rendering di perangkat.
Browser Memecah URL Dan Menyiapkan Permintaan
URL dapat berisi scheme, hostname, port, path, query, dan fragment. Untuk URL HTTP atau HTTPS, browser menggunakan hostname untuk mencari alamat melalui DNS kemudian membangun koneksi ke server. HTTPS menambahkan negosiasi TLS sebelum data aplikasi dipertukarkan. Browser juga mempertimbangkan cache, cookie, policy keamanan, proxy, service worker, dan redirect sebelum resource akhir benar-benar diambil.
Browser dapat menggunakan connection reuse agar beberapa request menuju origin yang sama tidak selalu membuat koneksi baru. HTTP/2 dan HTTP/3 juga memungkinkan banyak pertukaran berjalan lebih efisien pada satu sesi. DNS cache, TLS session resumption, dan preconnect dapat mengurangi latency pada kunjungan berikutnya, tetapi manfaatnya bergantung pada policy browser dan website.
HTML, CSS, Dan Resource Lain Diproses Menjadi Struktur Halaman
HTML diparse menjadi DOM yang merepresentasikan struktur dokumen. CSS diproses menjadi aturan style yang digunakan untuk menentukan tampilan, sementara gambar, font, stylesheet, script, dan resource lain dapat memicu request tambahan. Browser menghitung style dan layout, kemudian melakukan paint serta compositing untuk menghasilkan pixel. Jika ukuran halaman besar atau resource saling menunggu, proses rendering dapat tertunda meskipun respons HTML awal sudah diterima.
Parsing dan rendering tidak selalu menunggu seluruh halaman selesai diunduh. Browser dapat mulai membangun DOM dan menampilkan bagian awal sambil resource lain masih datang. Namun stylesheet tertentu dapat menahan rendering dan script sinkron dapat menghentikan parser sampai eksekusi selesai. Karena itu, urutan resource di HTML dan cara script dimuat memengaruhi kapan pengguna pertama kali melihat konten.
JavaScript Dapat Mengubah Halaman Setelah Respons Awal
JavaScript dapat membaca DOM, mengubah elemen, memanggil API jaringan, menangani event, dan membangun antarmuka aplikasi. Script yang berat dapat menggunakan main thread terlalu lama dan membuat halaman terasa tidak responsif. Browser modern memakai beberapa process dan thread untuk isolasi, networking, rendering, dan tugas lain, tetapi tidak semua pekerjaan dapat diparalelkan. Karena itu, performa web merupakan kombinasi antara jaringan, code halaman, rendering, dan kemampuan perangkat.
Web application modern dapat memindahkan banyak pekerjaan ke client. Framework dapat membuat halaman dari data API, melakukan routing tanpa full reload, atau menjalankan worker di background. Pola ini membuat ukuran JavaScript dan biaya eksekusi menjadi faktor penting. Perangkat dengan CPU lambat dapat merasakan halaman berat meskipun koneksi jaringan sangat cepat.
Cache Dan Kebijakan Keamanan Mengubah Cara Resource Diakses
Cache memungkinkan browser menggunakan kembali resource yang masih valid agar tidak selalu mengunduh data yang sama. Same-origin policy membatasi script dari satu origin agar tidak bebas membaca data origin lain, sedangkan CORS memberi mekanisme terkontrol untuk akses lintas origin. Cookie, storage, CSP, sandbox, permission, dan extension juga memengaruhi perilaku. Mode private membatasi sebagian penyimpanan lokal, tetapi tidak membuat aktivitas anonim dari jaringan atau server tujuan.
Extension perlu diperhitungkan ketika satu website bermasalah hanya pada satu profile browser. Ad blocker, password manager, security extension, atau tool developer dapat mengubah header, memblokir request, menyuntikkan script, atau mengakses halaman sesuai permission. Menguji profile baru atau mode tanpa extension membantu memisahkan masalah website dari konfigurasi browser.
