Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint
Lihat apa yang dilakukan browser terhadap byte HTML dan CSS: membangun DOM, CSSOM, menghitung tata letak, dan menggambar piksel.
Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Dari Byte Menjadi Piksel
Saat browser menerima byte HTML dari server, proses yang terdiri dari beberapa langkah mengubahnya menjadi piksel yang Anda lihat di layar. Mengetahui alur ini membantu Anda mengoptimalkan kinerja dan memahami penyebab gangguan visual.
Langkah 1 — Mengurai HTML: Membangun DOM
Pengurai HTML milik browser membaca aliran byte dan membangun Model Objek Dokumen (DOM) — pohon simpul yang mewakili setiap elemen HTML, simpul teks, dan komentar dalam dokumen.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Langkah 2 — Mengurai CSS: Membangun CSSOM
Secara bersamaan, byte CSS diurai menjadi Model Objek CSS (CSSOM) — pohon aturan gaya. CSS menghambat perenderan: browser tidak akan menggambar piksel hingga menghitung gaya untuk konten yang terlihat.
Langkah 3 — Pohon Perenderan
Browser menggabungkan DOM dan CSSOM menjadi Pohon Perenderan. Hanya simpul yang terlihat yang disertakan — elemen dengan display:none tidak disertakan. Setiap simpul dalam pohon perenderan menyimpan gaya terhitung yang akan digunakan untuk menggambarnya.
Langkah 4 — Tata Letak (Reflow)
Tata letak menghitung posisi dan ukuran tepat setiap simpul dalam pohon perenderan menggunakan model kotak dan lebar area pandang. Proses ini juga disebut reflow. Tata letak membutuhkan banyak sumber daya; hindari memicunya berulang kali dalam JavaScript.
Langkah 5 — Pengecatan
Pengecatan mengubah tata letak menjadi piksel nyata di layar. Browser menggambar latar belakang, batas, teks, dan gambar lapis demi lapis. Beberapa elemen membuat lapisan penggabungan sendiri untuk perenderan yang dipercepat GPU.
Langkah 6 — Penggabungan
Penggabung milik browser menggabungkan lapisan yang telah dicat menjadi bingkai akhir dan mengirimkannya ke layar. Menggunakan transform dan opacity untuk animasi memungkinkan penggabung menjalankannya di GPU, sehingga tata letak dan pengecatan dapat dilewati sepenuhnya.
Apa yang Menghambat Perenderan?
CSS di dalam <head> menghambat perenderan. JavaScript secara bawaan menghambat penguraian dan perenderan. Gunakan defer pada tag skrip untuk mengurai JS setelah HTML tanpa menghambat perenderan.
<script src="app.js" defer></script>Jalur Perenderan Kritis
Jalur Perenderan Kritis adalah rangkaian proses sejak menerima byte HTML hingga menampilkan piksel pertama. Mengoptimalkannya berarti meminimalkan jumlah dan ukuran sumber daya yang menghambat perenderan serta menunda JS dan CSS yang tidak kritis.
Reflow vs Pengecatan Ulang
Mengubah properti tata letak (width, margin, position) memicu reflow + pengecatan ulang. Mengubah properti yang hanya memengaruhi tampilan (color, background) hanya memicu pengecatan ulang. Mengubah transform/opacity hanya memicu penggabungan. Pilih operasi yang paling hemat sumber daya.
DevTools: Melihat Linimasa Pengecatan
Di Chrome DevTools, buka panel Performance, rekam pemuatan halaman, lalu periksa diagram alurnya. Anda akan melihat peristiwa Painting berwarna hijau dan dapat mengidentifikasi elemen mana yang menyebabkan tata letak yang membutuhkan banyak sumber daya.
Periksa Cepat
Langkah mana yang menghitung ukuran dan posisi tepat setiap elemen di halaman?
Ringkasan: Alur Perenderan
HTML → DOM → CSSOM → Pohon Perenderan → Tata Letak → Pengecatan → Penggabungan. Setiap langkah memasok langkah berikutnya. Mengoptimalkan jalur perenderan kritis berarti mempersingkat alur ini agar konten pertama yang terlihat muncul secepat mungkin.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint” gratis?
Ya — teks lengkap “Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint”?
Lihat apa yang dilakukan browser terhadap byte HTML dan CSS: membangun DOM, CSSOM, menghitung tata letak, dan menggambar piksel. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- DNS dan HTTP Browser: Siklus Hidup Permintaan
- HTML, CSS, dan JavaScript: Tugas Setiap Lapisan
- Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint
- Alat Pengembang: Membuka dan Menggunakan DevTools