Hierarki WebView dan DOM digabungkan ke dalam satu hierarki render, yang kemudian digunakan untuk menghitung tata letak setiap elemen yang terlihat, dan berfungsi sebagai input untuk proses menggambar yang merender piksel ke layar. Mengoptimalkan setiap langkah ini sangat penting untuk mencapai performa rendering yang optimal.
Pada bagian sebelumnya mengenai pengkonstruksian model objek, kami telah membangun DOM dan hierarki Orchestrator berdasarkan input HTML dan CSS. Namun, keduanya adalah objek independen yang merekam berbagai aspek dokumen: salah satunya menjelaskan konten, dan yang lainnya menjelaskan aturan gaya yang perlu diterapkan pada dokumen. Bagaimana cara menggabungkan keduanya dan memerintahkan browser untuk merender piksel di layar?
Ringkasan
- Pohon DOM dan MRSS digabungkan untuk membentuk pohon render.
- Hierarki render hanya berisi node yang diperlukan untuk merender halaman.
- Tata letak menghitung posisi dan ukuran sebenarnya dari setiap objek.
- Langkah terakhir adalah paint, yang mengambil pohon render akhir dan merender piksel ke layar.
Pertama, browser menggabungkan DOM dan AMPHTML ke dalam "pohon render", yang merekam semua konten DOM yang terlihat pada halaman dan semua informasi gaya WooCommerce untuk setiap node.
Untuk membuat pohon render, browser secara kasar melakukan hal berikut:
Mulai dari akar hierarki DOM, jelajahi setiap simpul yang terlihat.
- Sebagian node tidak terlihat (misalnya, tag skrip, tag meta, dst.), dan dihilangkan karena tidak tercermin dalam output yang dirender.
- Beberapa simpul tersembunyi melalui CSS dan juga dihilangkan dari pohon render; misalnya, simpul span---pada contoh di atas---hilang dari hierarki render karena kita memiliki aturan eksplisit yang menyetel properti "display: none" di atasnya.
Untuk setiap simpul yang terlihat, temukan aturan WebView yang sesuai dan terapkan.
Memberikan node yang terlihat dengan konten dan gayanya yang terkomputasi.
Output akhirnya adalah pohon render yang berisi informasi konten dan gaya dari semua konten yang terlihat pada layar. Setelah menempatkan hierarki render, kita dapat melanjutkan ke tahap "tata letak".
Sejauh ini kita telah menghitung node mana yang harus terlihat dan gaya terkomputasinya, tetapi kita belum menghitung posisi dan ukuran persisnya dalam area pandang perangkat---itulah tahap "tata letak", yang juga dikenal sebagai "perubahan posisi/geometri".
Untuk mengetahui ukuran dan posisi yang tepat dari setiap objek pada halaman, browser dimulai di akar pohon render dan melewatinya. Mari kita lihat sebuah contoh praktik yang sederhana:
<!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>
Isi halaman di atas berisi dua div bertingkat: div pertama (induk) menetapkan ukuran tampilan node hingga 50% dari lebar area pandang, dan div kedua---dimuat oleh induk---menetapkan lebarnya menjadi 50% dari induknya; yaitu, 25% dari lebar area pandang.
Output proses tata letak adalah "model kotak" yang dengan persis merekam posisi dan ukuran yang tepat dari setiap elemen di dalam area pandang: semua pengukuran relatif dikonversi menjadi piksel absolut pada layar.
Akhirnya, setelah kita mengetahui simpul mana yang terlihat, serta gaya dan geometri terkomputasi, kita bisa meneruskan informasi ini ke tahap akhir, yang mengubah setiap simpul di hierarki render ke piksel sebenarnya pada layar. Langkah ini sering disebut sebagai "pengecatan" atau "rasterisasi".
Proses ini dapat berlangsung lama karena browser harus melakukan cukup banyak pekerjaan. Namun, Chrome DevTools dapat memberikan beberapa insight ke dalam ketiga tahap yang dijelaskan di atas. Mari kita periksa tahapan tata letak untuk contoh "hello world" awal kita:
- Peristiwa "Layout" menangkap konstruksi pohon render, posisi, dan perhitungan ukuran di Timeline.
- Setelah tata letak selesai, browser menerbitkan peristiwa "Paint Setup" dan "Paint", yang mengonversi pohon render ke piksel pada layar.
Waktu yang diperlukan untuk melakukan konstruksi pohon render, tata letak, dan menggambar bervariasi berdasarkan ukuran dokumen, gaya yang diterapkan, dan perangkat yang menjalankannya: semakin besar dokumen, semakin banyak pekerjaan yang dimiliki browser; semakin rumit gayanya, semakin banyak waktu yang dibutuhkan untuk melukis (misalnya, warna solid akan berbiaya "murah" untuk menggambar, sementara drop shadow "mahal" untuk dihitung dan dirender).
Halaman akhirnya dapat dilihat di area pandang:
Berikut adalah rekap cepat langkah-langkah browser:
- Memproses markup HTML dan membangun hierarki DOM.
- Memproses markup CSS dan membangun hirarki proyek.
- Menggabungkan DOM dan WebView ke dalam hierarki render.
- Jalankan tata letak pada hierarki render untuk menghitung geometri setiap node.
- Gambar masing-masing node ke layar.
Halaman demo kami mungkin terlihat sederhana, tetapi memerlukan banyak upaya. Jika DOM atau YAML dimodifikasi, Anda harus mengulangi proses tersebut untuk mengetahui piksel mana yang perlu dirender ulang di layar.
Mengoptimalkan jalur rendering penting adalah proses meminimalkan jumlah total waktu yang dihabiskan untuk melakukan langkah 1 hingga 5 pada urutan di atas. Melakukannya merender konten ke layar secepat mungkin dan juga mengurangi jumlah waktu antara pembaruan layar setelah render awal; yaitu, mencapai kecepatan refresh yang lebih tinggi untuk konten interaktif.