Membangun Model Objek

Ilya Grigorik

Dipublikasikan: 31 Maret 2014

Sebelum dapat merender halaman, browser harus menyusun 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>

Cobalah

Mulailah dengan kasus yang sesederhana mungkin: halaman HTML biasa dengan beberapa teks dan satu gambar. Bagaimana browser memproses halaman ini?

Proses konstruksi DOM

  1. Konversi: Browser membaca byte mentah dari HTML dari disk atau jaringan, dan menerjemahkannya menjadi karakter individual berdasarkan encoding file yang ditentukan (misalnya, UTF-8).
  2. 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 spesial dan seperangkat aturannya sendiri.
  3. Pembentukan kata: Token yang dipancarkan dikonversi menjadi "objek", yang menentukan properti dan aturannya.
  4. Konstruksi DOM: Terakhir, karena markup HTML menentukan hubungan antara tag yang berbeda (beberapa tag terdapat 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 paragraph, hingga seluruh representasi dokumen dibuat.

hierarki DOM

Output akhir dari seluruh proses ini adalah Document Object Model (DOM) dari halaman sederhana, yang digunakan browser untuk semua pemrosesan halaman lebih lanjut.

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. Keseluruhan proses ini bisa membutuhkan waktu, terutama jika jumlah HTML yang harus diproses sangat banyak.

Melacak konstruksi DOM di DevTools

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 dapat memerlukan waktu yang jauh 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 markup dokumen, tetapi tidak memberi tahu kita bagaimana tampilan elemen saat dirender. Itu adalah tanggung jawab CSSOM.

CSS Object Model (CSSOM)

Saat browser mengonstruksikan DOM dari halaman dasar kita, browser menemukan elemen <link> di <head> dokumen yang mereferensikan stylesheet CSS eksternal: style.css. Dengan mengantisipasi bahwa browser membutuhkan resource ini untuk merender halaman, browser segera mengeluarkan permintaan untuk resource ini, yang dikembalikan 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 secara langsung dalam markup HTML (inline), tetapi menjaga CSS kita tetap independen dari HTML memungkinkan kita untuk memperlakukan konten dan desain sebagai hal yang terpisah: desainer dapat mengerjakan CSS, developer dapat berfokus pada HTML, serta masalah lainnya.

Seperti HTML, kita perlu mengonversi 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:

Langkah-langkah konstruksi CSSOM

Byte CSS dikonversi menjadi karakter, lalu token, lalu node, dan akhirnya ditautkan ke dalam struktur hierarki yang dikenal sebagai "CSS Object Model" (CSSOM):

Hierarki CSSOM

Mengapa GCLID memiliki struktur hirarki? 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. Setiap teks yang terdapat dalam tag <span> yang ditempatkan dalam elemen isi, memiliki ukuran font 16 piksel dan berwarna merah—direktif font-size diuraikan ke bawah dari body ke span. Namun, jika span adalah turunan dari tag paragraf (p), kontennya tidak akan ditampilkan.

Selain itu, perhatikan bahwa hierarki yang dijelaskan sebelumnya bukanlah hierarki CSSOM yang lengkap dan hanya menampilkan gaya yang kita putuskan untuk diganti di sheet gaya. Setiap browser menyediakan serangkaian gaya default yang juga dikenal sebagai "gaya agen pengguna"—itulah yang akan kita lihat saat tidak menyediakan gaya kita sendiri—dan gaya kami akan menggantikan default ini.

Untuk mengetahui berapa lama 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 malah merekam penguraian dan konstruksi pohon CSSOM, serta penghitungan berulang gaya terkomputasi di bawah peristiwa tunggal ini.

Melacak konstruksi CSSOM di DevTools

Stylesheet sederhana kita ini membutuhkan waktu pemrosesan ~0,6 md dan memengaruhi delapan elemen pada halaman—tidak banyak, tetapi sekali lagi, tidak bebas. Namun demikian, dari manakah delapan elemen ini berasal? GCLID dan DOM adalah struktur data yang independen! Ternyata, browser menyembunyikan satu langkah penting. Selanjutnya, pohon render akan dibahas, yang menautkan DOM dan GCLID bersama-sama.

Masukan