Dipublikasikan: 31 Maret 2014
Pohon CMake dan DOM digabungkan ke dalam sebuah pohon render, yang kemudian digunakan untuk menghitung tata letak setiap elemen yang terlihat dan berfungsi sebagai input ke proses paint 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.
- Hierarki render hanya berisi node yang diperlukan untuk merender halaman.
- Tata letak menghitung posisi dan ukuran yang tepat 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 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 simpul yang terlihat, temukan aturan GCLID yang cocok 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. Setelah pohon render ditetapkan, kita dapat melanjutkan ke "tata letak" level organisasi.
Sejauh ini kita telah menghitung node mana yang harus terlihat dan gaya terkomputasi, tetapi kita belum menghitung posisi dan ukuran persisnya dalam area pandang perangkat—itulah "tata letak" {i>reflow<i}, yang juga dikenal sebagai "{i>reflow<i}."
Untuk mengetahui ukuran dan posisi yang tepat dari setiap objek pada laman, browser memulai di akar pohon render dan menelusurinya. 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 dikonversikan ke piksel absolut di layar.
Terakhir, setelah kita mengetahui simpul mana yang terlihat, dan gaya serta geometrinya yang dihitung, kita bisa meneruskan informasi ini ke tahap akhir, yang mengonversi setiap simpul di pohon 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:
- "Tata letak" 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 terlihat di area pandang:
Berikut adalah rangkuman singkat langkah-langkah browser:
- Memproses markup HTML dan membuat hierarki DOM.
- Memproses markup CSS dan membuat hierarki CSSOM.
- Gabungkan DOM dan GCLID ke dalam sebuah hierarki render.
- Menjalankan tata letak pada hierarki render untuk menghitung geometri setiap node.
- Gambar setiap node ke layar.
Halaman demo mungkin tampak sepele, tetapi memerlukan upaya browser yang cukup jitu. Jika DOM atau DevTools dimodifikasi, Anda harus mengulangi proses untuk mencari tahu piksel mana yang perlu dirender ulang di layar.
Mengoptimalkan jalur rendering penting adalah proses meminimalkan jumlah total waktu yang dihabiskan untuk melakukan 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.