Bagaimana HTML, CSS, dan JavaScript Diubah di Web Browser

Pertama pada saat pengguna mengetik URL dan menekan tombol enter, maka browser akan menerima dan membaca byte mentah dari data, dan bukan karakter sebenarnya dari kode yang telah kita tulis.

Browser harus mengubah byte mentah dari data HTML menjadi DOM terlebih dahulu sebelum proses selanjutnya dapat dijalankan.

Selanjtunya, byte mentah dari data diubah menjadi karakter, karakter selanjutnya diurai menjadi sesuatu yang disebut token, token kemudian diubah menjadi node, node kemudian ditautkan dalam struktur data pohon yang dikenal sebagai DOM

Proses yang sama juga terjadi untuk byte CSS yang perlu diubah menjadi CSSOM.

Browser kemudian menggabungkan DOM dan CSSOM menjadi sesuatu yang disebut Render Tree. Render Tree berisi informasi tentang semua konten DOM yang terlihat di halaman dan semua informasi CSSOM yang diperlukan untuk node yang berbeda.

Dengan adanya JavaScript, setiap kali browser menemukan tag skrip, konstruksi DOM akan dijeda. Seluruh proses konstruksi DOM dihentikan hingga skrip selesai dijalankan.

Keseluruhan proses ini disebut jalur rendering kritis (CRP) yang merupakan urutan langkah-langkah yang dilalui browser untuk mengubah HTML, CSS, dan JavaScript menjadi piksel di layar.

REFERENCES

https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10/