Sebelum dapat merender halaman, browser perlu membuat hierarki DOM dan CSSOM. Oleh karena itu, kita perlu memastikan bahwa HTML dan CSS telah dikirimkan ke browser secepat mungkin.
Ringkasan
- Byte → karakter → token → node → model objek.
- Markup HTML ditransformasikan menjadi Document Object Model (DOM); markup CSS diubah menjadi CSS Object Model (CSSOM).
- DOM dan WorkManager adalah struktur data yang independen.
- Dengan panel Performance Chrome DevTools, kita dapat merekam dan memeriksa konstruksi dan biaya pemrosesan DOM dan WebView.
Document Object Model (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Mari kita mulai dengan kasus yang paling sederhana: halaman HTML biasa dengan beberapa teks dan satu gambar. Bagaimana browser memproses halaman ini?
- Konversi: Browser membaca byte mentah HTML dari disk atau jaringan, dan menerjemahkannya menjadi karakter individual berdasarkan encoding file yang ditentukan (misalnya, UTF-8).
- Pembuatan token: Browser mengonversi string karakter menjadi token yang berbeda—seperti yang ditentukan oleh standar HTML5 W3C misalnya, "<html>", "<body>"—dan string lainnya dalam tanda kurung sudut. Setiap token memiliki arti khusus dan kumpulan aturannya sendiri.
- Lexing: Token yang dimunculkan dikonversi menjadi "objek", yang menentukan properti dan aturannya.
- Konstruksi DOM: Terakhir, karena markup HTML menentukan hubungan antara tag yang berbeda (beberapa tag dimuat dalam tag lain), objek yang dibuat ditautkan dalam struktur data hierarki yang juga menangkap hubungan induk-turunan yang ditentukan dalam markup asli: objek HTML adalah induk dari objek body, body adalah induk dari objek paragraf, dan seterusnya.
Output akhir dari seluruh proses ini adalah Document Object Model (DOM) dari halaman sederhana kita, yang digunakan browser untuk semua pemrosesan halaman lebih lanjut.
Setiap kali memproses markup HTML, browser akan menjalani semua langkah di atas: mengonversi byte menjadi karakter, mengidentifikasi token, mengonversi token menjadi node, dan membangun hierarki DOM. Seluruh proses ini memakan waktu, terutama jika kita memiliki banyak HTML untuk diproses.
Jika Anda membuka Chrome DevTools dan merekam linimasa saat halaman dimuat, Anda dapat melihat waktu sebenarnya yang diperlukan untuk melakukan langkah ini. Pada contoh di atas, perlu waktu sekitar 5 md untuk mengonversi bagian HTML ke dalam hierarki DOM. Untuk halaman yang lebih besar, proses ini mungkin memerlukan waktu yang jauh lebih lama. Saat membuat animasi yang halus, hal ini dapat dengan mudah menjadi bottleneck jika browser harus memproses HTML dalam jumlah besar.
Hierarki DOM merekam properti dan hubungan markup dokumen, tetapi tidak memberi tahu kita tampilan elemen saat dirender. Itu adalah tanggung jawab WebView.
Model Objek CSS (CSSOM)
Saat membuat DOM halaman sederhana kita, browser menemukan tag link di bagian head dokumen yang merujuk pada stylesheet CSS eksternal: style.css
. Dengan mengantisipasi bahwa resource ini diperlukan untuk merender
halaman, browser akan segera mengirimkan permintaan untuk resource ini, yang kembali
dengan konten berikut:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Kita dapat mendeklarasikan gaya kita secara langsung dalam markup HTML (inline), tetapi menjaga CSS tetap independen dari HTML memungkinkan kita untuk memperlakukan konten dan desain sebagai perhatian yang terpisah: desainer dapat mengerjakan CSS, developer dapat berfokus pada HTML, dan seterusnya.
Seperti halnya HTML, kita perlu mengonversi aturan CSS yang diterima menjadi sesuatu yang dapat dipahami dan digunakan browser. Oleh karena itu, kita mengulangi proses HTML, tapi untuk CSS bukan HTML:
Byte CSS dikonversi menjadi karakter, lalu token, kemudian node, dan terakhir ditautkan ke dalam struktur hierarki yang dikenal sebagai "CSS Object Model" (CSSOM):
Mengapa WebView memiliki struktur pohon? Saat menghitung kumpulan gaya akhir untuk setiap objek pada halaman, browser memulai dengan aturan paling umum yang berlaku untuk node tersebut (misalnya, jika merupakan turunan dari elemen tubuh, kemudian semua gaya bodi akan berlaku), kemudian secara rekursif menyaring gaya yang dihitung dengan menerapkan aturan yang lebih spesifik; yaitu, aturan tersebut "berjenjang ke bawah".
Agar lebih konkret, pertimbangkan hirarki jawaban di atas. Setiap teks yang terkandung dalam tag <span>
yang ditempatkan dalam elemen isi, memiliki ukuran font 16 piksel dan memiliki teks merah—perintah font-size
menurun ke bawah dari body
ke span
. Namun, jika tag span
adalah turunan dari tag paragraf (p
), kontennya tidak akan ditampilkan.
Selain itu, perlu diperhatikan bahwa pohon di atas bukanlah pohon YAML lengkap dan hanya menampilkan gaya yang telah kita putuskan untuk diganti di stylesheet kita. Setiap browser menyediakan rangkaian gaya default yang juga dikenal sebagai "gaya agen pengguna"—itulah yang kita lihat jika kita tidak menyediakan gaya kita sendiri—dan gaya kita hanya menggantikan default ini.
Untuk mengetahui lamanya waktu pemrosesan CSS, Anda dapat merekam linimasa di DevTools dan mencari peristiwa "Recalculate Style": tidak seperti penguraian DOM, linimasa tidak menampilkan entri "Parse CSS" terpisah, dan justru menangkap penguraian dan konstruksi hierarki Orchestrator, ditambah penghitungan rekursif gaya terkomputasi dalam satu peristiwa ini.
Stylesheet sederhana kami membutuhkan waktu pemrosesan sekitar 0,6 md dan memengaruhi delapan elemen di halaman—tidak banyak, tetapi sekali lagi, tidak bebas. Namun, dari mana asal kedelapan elemen itu? Engage dan DOM adalah struktur data yang independen! Ternyata, browser menyembunyikan langkah penting. Selanjutnya, mari kita bahas hierarki render yang menautkan DOM dan WebView bersama.