Dipublikasikan: 31 Maret 2014
Sebelum browser dapat merender halaman, browser harus membuat hierarki DOM dan CSSOM. Akibatnya, kita harus memastikan bahwa kita mengirimkan HTML dan CSS ke browser secepat mungkin.
Ringkasan
- Byte → karakter → token → node → model objek.
- Markup HTML ditransformasikan menjadi Document Object Model (DOM); markup CSS ditransformasikan menjadi CSS Object Model (CSSOM).
- DOM dan CSSOM adalah struktur data yang independen.
- Panel Performa Chrome DevTools memungkinkan kita merekam dan memeriksa biaya konstruksi dan pemrosesan DOM dan CSSOM.
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>
Mulailah dengan kasus yang paling sederhana: halaman HTML biasa dengan beberapa teks dan satu gambar. Bagaimana browser memproses halaman ini?
- Konversi: Browser membaca byte mentah dari 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 kurung siku. Setiap token memiliki arti khusus dan seperangkat aturan sendiri. - Lexing: Token yang dikeluarkan diubah menjadi "objek", yang menentukan properti dan aturannya.
- Konstruksi DOM: Terakhir, karena markup HTML menentukan hubungan di antara tag yang berbeda (beberapa tag berada di dalam tag lain) objek yang dibuat ditautkan dalam struktur data pohon yang juga menangkap hubungan induk-turunan yang ditentukan dalam markup asli: HTML adalah induk dari objek body, body adalah induk dari paragraph, hingga seluruh representasi dokumen dibuat.
Output akhir dari seluruh proses ini adalah Document Object Model (DOM) laman sederhana kami, yang digunakan browser untuk semua pemrosesan halaman.
Setiap kali browser memproses markup HTML, browser harus melewati semua langkah yang ditentukan sebelumnya: mengonversi byte menjadi karakter, mengidentifikasi token, mengonversi token menjadi simpul, dan membuat hierarki DOM. Seluruh proses ini bisa 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 dihabiskan untuk melakukan langkah ini—dalam contoh sebelumnya, butuh waktu sekitar 5 md untuk mengonversi sebagian HTML menjadi hierarki DOM. Untuk halaman yang lebih besar, proses ini mungkin menghabiskan waktu lebih lama. Saat membuat animasi yang lancar, hal ini dapat menjadi bottleneck jika browser harus memproses HTML dalam jumlah besar.
Hierarki DOM merekam properti dan hubungan dari markup dokumen, tetapi tidak memberi tahu kita bagaimana elemen akan terlihat saat dirender. Itu adalah tanggung jawab CSSOM.
Model Objek CSS (CSSOM)
Saat browser mengonstruksikan DOM dari halaman dasar kita, browser menemukan elemen <link> di <head> dokumen yang mereferensikan stylesheet CSS eksternal: style.css. Mengantisipasi bahwa ia membutuhkan sumber daya ini untuk merender
halaman, ia akan segera mengirimkan permintaan untuk resource ini, yang akan kembali
dengan konten berikut:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Kita bisa mendeklarasikan gaya secara langsung dalam markup HTML (inline), tetapi menjaga CSS tetap independen dari HTML memungkinkan kita memperlakukan konten dan desain sebagai masalah terpisah: desainer dapat mengerjakan CSS, pengembang dapat fokus pada HTML, serta masalah lainnya.
Seperti dengan HTML, kita perlu mengubah aturan CSS yang diterima menjadi sesuatu yang dapat dipahami dan dikerjakan oleh browser. Dengan demikian, kita mengulang kembali proses HTML, tetapi untuk CSS, bukan HTML:
Byte CSS dikonversi menjadi karakter, lalu token, lalu node, dan akhirnya ditautkan ke dalam struktur hierarki yang dikenal sebagai "CSS Object Model" (CSSOM):
Mengapa CSSOM memiliki struktur hierarki? Saat menghitung kumpulan gaya akhir untuk objek apa pun di halaman, browser memulai dengan aturan paling umum yang berlaku untuk node tersebut (misalnya, jika merupakan turunan dari elemen isi, semua gaya isi akan diterapkan), lalu secara berulang menyaring gaya yang dihitung dengan menerapkan aturan yang lebih spesifik; yaitu, aturan "cascade down".
Agar lebih konkret, pertimbangkan hierarki GCLID yang dijelaskan sebelumnya. Teks apa pun
yang ada dalam tag <span> yang ditempatkan dalam elemen isi, memiliki
ukuran font 16 piksel dan memiliki teks merah—perintah font-size berjenjang
turun dari body ke span. Namun, jika span adalah turunan dari tag paragraf (p), kontennya tidak akan ditampilkan.
Serta, perhatikan bahwa hierarki yang dijelaskan sebelumnya bukanlah hirarki GCLID lengkap dan hanya menampilkan gaya yang kita putuskan untuk diganti di lembar gaya. Setiap browser menyediakan kumpulan gaya default yang juga dikenal sebagai "gaya agen pengguna"—itulah ketika kami tidak menyediakan salah satu gaya kami sendiri—dan gaya kami menggantikannya secara default.
Untuk mengetahui berapa lama waktu pemrosesan CSS, Anda dapat mencatat linimasa dalam DevTools dan cari "ReCalculate Style" tidak seperti penguraian DOM, tidak menampilkan "Parse CSS" yang terpisah entri, dan menangkap penguraian dan konstruksi hierarki GCLID, serta perhitungan rekursif dari gaya terkomputasi dalam peristiwa yang satu ini.
Stylesheet sederhana kita ini membutuhkan waktu pemrosesan ~0,6 md dan memengaruhi delapan elemen pada halaman—tidak banyak, tetapi sekali lagi, tidak bebas. Namun, di mana dari delapan elemen tersebut? GCLID dan DOM adalah struktur data yang independen! Ternyata, browser menyembunyikan satu langkah penting. Selanjutnya, pohon render akan dibahas, yang menautkan DOM dan CSSOM.