Dipublikasikan: 31 Maret 2014
Pohon CSSOM dan DOM digabungkan ke dalam satu pohon render, yang selanjutnya digunakan untuk menghitung tata letak setiap elemen yang terlihat dan berfungsi sebagai input ke proses menggambar yang merender piksel ke layar. Mengoptimalkan setiap langkah ini penting untuk mencapai performa rendering yang optimal.
Dalam bagian sebelumnya mengenai pengkonstruksian model objek, kami membangun DOM dan pohon CSSOM berdasarkan input HTML dan CSS. Namun, keduanya merupakan objek independen yang merekam berbagai aspek dokumen: satu menjelaskan konten, dan yang lainnya menjelaskan aturan gaya yang perlu diterapkan ke dokumen. Bagaimana kita menggabungkan keduanya dan memerintahkan browser untuk merender piksel pada layar?
Ringkasan
- Pohon DOM dan CSSOM digabungkan untuk membentuk pohon render.
- Pohon render hanya berisi node yang diperlukan untuk merender halaman.
- Tata letak menghitung posisi dan ukuran sebenarnya dari setiap objek.
- Langkah terakhir adalah menggambar, yang menggunakan hierarki render akhir dan merender piksel ke layar.
Pertama, browser menggabungkan DOM dan CSSOM menjadi satu "pohon render", yang merekam semua materi DOM yang terlihat pada halaman dan semua informasi gaya CSSOM untuk setiap node.
Untuk membuat hierarki render, browser secara kasar melakukan hal berikut:
Memulai dari root hierarki DOM, tempuh setiap node yang terlihat.
- Beberapa node sama sekali tidak terlihat (misalnya, tag skrip, tag meta, dst.), serta ditiadakan karena tidak tercermin dalam output yang dirender.
- Beberapa node disembunyikan menggunakan CSS dan juga dihilangkan dari hierarki render; misalnya, node span—dalam contoh di atas—tidak ada dalam hierarki render karena kita memiliki aturan eksplisit yang menetapkan properti "display: none" di dalamnya.
Untuk setiap node yang terlihat, temukan aturan CSSOM yang sesuai dan terapkan.
Memunculkan node yang terlihat dengan konten dan gaya terkomputasinya.
Output akhirnya adalah sebuah hierarki render yang berisi materi serta informasi gaya dari semua materi yang terlihat pada layar. Dengan telah ditetapkannya hierarki render, kita dapat melanjutkan ke tahap "tata letak".
Sejauh ini kita telah menghitung node mana yang harus terlihat dan gaya terkomputasi, tetapi kita belum menghitung posisi dan ukuran persisnya di dalam area pandang perangkat—yaitu tahap "tata letak", juga dikenal sebagai "perubahan posisi/geometri".
Untuk menghitung ukuran dan posisi persisnya dari setiap objek pada halaman, browser akan memulai di akar pohon render dan menjalankannya. Perhatikan contoh ini:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
<body> dari contoh sebelumnya berisi dua <div> bertingkat: <div> pertama (induk) menetapkan ukuran tampilan node ke 50% dari lebar area pandang, dan <div> kedua—yang dimuat oleh induk—menetapkan width-nya menjadi 50% dari induknya; yaitu, 25% dari lebar area pandang.
Output dari proses tata letak adalah "model kotak", yang dengan presisi merekam posisi dan ukuran yang tepat dari setiap elemen dalam area pandang: semua pengukuran relatif dikonversi ke piksel absolut di layar.
Terakhir, setelah kini kita mengetahui simpul mana yang terlihat, gaya perhitungannya, dan geometri, akhirnya kita bisa meneruskan informasi ini ke tahap terakhir yang akan mengonversikan setiap simpul dalam hierarki render ke piksel sebenarnya pada layar. Langkah ini sering disebut sebagai "melukis" atau "rasterisasi".
Proses ini dapat memerlukan waktu beberapa saat karena browser harus melakukan cukup banyak pekerjaan. Namun, Chrome DevTools dapat memberikan beberapa insight ke dalam ketiga tahapan yang dijelaskan sebelumnya. Periksa tahap tata letak untuk contoh "hello world" awal kita:
- Peristiwa "Layout" menangkap konstruksi pohon render, posisi, dan perhitungan ukuran di Linimasa.
- Setelah tata letak selesai, browser akan menerbitkan peristiwa "Paint Setup" dan "Paint", yang mengonversi hierarki render menjadi piksel di layar.
Waktu yang diperlukan untuk melakukan konstruksi, tata letak, dan gambar pohon render bervariasi berdasarkan ukuran dokumen, gaya yang diterapkan, dan perangkat tempat dokumen tersebut berjalan: semakin besar dokumen, semakin banyak pekerjaan yang harus dilakukan browser; semakin rumit gaya, semakin banyak waktu yang diperlukan untuk menggambar (misalnya, warna solid "murah" untuk digambar, sedangkan bayangan jatuh "mahal" untuk dikomputasi dan dirender).
Halaman ini akhirnya bisa dilihat di tampilan yang terlihat:
Berikut adalah ringkasan singkat langkah-langkah browser:
- Memproses markup HTML dan membuat hierarki DOM.
- Memproses markup CSS dan membuat hierarki CSSOM.
- Menggabungkan DOM dan CSSOM menjadi satu pohon render.
- Menjalankan tata letak pada hierarki render untuk menghitung geometri setiap node.
- Gambarkan setiap node ke layar.
Halaman demo mungkin tampak sederhana, tetapi memerlukan cukup banyak pekerjaan di bagian browser. Jika DOM atau CSSOM dimodifikasi, Anda harus mengulangi proses untuk mencari tahu piksel yang perlu dirender di layar.
Mengoptimalkan jalur rendering penting adalah proses meminimalkan jumlah total waktu yang dihabiskan dalam langkah 1 sampai 5 pada urutan di atas. Hal itu memungkinkan kita untuk merender materi ke layar sesegera mungkin dan juga mengurangi jumlah waktu antara pembaruan layar setelah render awal - yaitu mencapai laju penyegaran untuk materi interaktif.