Lewati ke konten utama
menjadi.dev
Chapter 2.3 Fundamental Web Pemula

Rendering Pipeline: Dari Kode ke Pixel

Cara browser merender halaman: DOM, CSSOM, Render Tree, Layout, Paint

Tujuan Pembelajaran

  • Memahami 5 langkah rendering pipeline browser
  • Mengerti kenapa CSS dan JS bisa memperlambat rendering

Analogi

Diagram 

      Rendering Pipeline = Pabrik Pembuat Poster:

1. HTML → DOM        (Siapkan bahan mentah)
2. CSS  → CSSOM      (Siapkan cat dan warna)
3. DOM + CSSOM → Render Tree (Gambar sketsa)
4. Layout            (Tentukan ukuran dan posisi)
5. Paint             (Warnai dan finishing)
6. Composite         (Gabungkan semua layer)

Browser seperti pabrik poster — memproses HTML dan CSS menjadi pixel di layar

Penjelasan Konsep

Kalau website cuma menampilkan informasi tanpa bisa menerima input dari user, itu seperti TV — kamu cuma bisa lihat tapi nggak bisa berinteraksi. Form HTML adalah cara paling fundamental untuk membuat website menjadi interaktif. Form memungkinkan user mengisi data, memberikan feedback, mendaftar akun, melakukan pembelian, mencari konten, dan jutaan interaksi lainnya. Tanpa form, web hanyalah buku elektronik — statis dan satu arah.

Analoginya kayak formulir di bank atau kantor.

Kamu datang ke bank untuk buka rekening.

Petugas kasih formulir yang harus diisi — nama, alamat, nomor KTP, tanda tangan. Formulir ini punya struktur: label yang menjelaskan apa yang harus diisi, kolom kosong untuk menulis, dan tombol submit untuk menyerahkan. Form HTML bekerja dengan cara yang persis sama.

Tag <form>: Wadah Formulir

Tag <form> adalah elemen pembungkus seluruh form. Ada dua attribute yang sangat penting:

  • action: URL tempat data akan dikirim (contoh: /register atau https://api.example.com/users)
  • method: Metode HTTP yang dipakai — GET atau POST.

GET untuk pencarian/filter (data di URL), POST untuk data sensitif seperti password (data di body).

Tag <input>: Macam-macam Kolom Isian

Input adalah tag serbaguna untuk menerima data user. Jenis input ditentukan oleh attribute type:

  • type="text" — Teks bebas, satu baris. Untuk nama, username, alamat singkat.
  • type="email" — Khusus email. Browser otomatis validasi format email (@ dan domain).
  • type="password" — Teks tersembunyi (muncul titik-titik).

Untuk password dan PIN.

  • type="number" — Hanya menerima angka. Bisa ditambah min, max, step.
  • type="tel" — Khusus nomor telepon. Di HP akan muncul keypad numerik.
  • type="date" — Picker tanggal. Browser tampilkan kalender.
  • type="checkbox" — Kotak centang (bisa pilih banyak).

Untuk setuju syarat, pilih topping.

  • type="radio" — Tombol pilihan (hanya bisa pilih satu). Untuk jenis kelamin, metode pembayaran.
  • type="file" — Upload file. Bisa dibatasi tipe file dengan accept.
  • type="hidden" — Input tersembunyi dari user tapi tetap dikirim ke server.
  • type="submit" — Tombol kirim form.
  • type="reset" — Tombol mengosongkan form.

Tag <label>: Petunjuk yang Bisa Diklik

Label menjelaskan apa yang harus diisi di input. Attribute for menghubungkan label dengan input (berdasarkan id input).

Keuntungan: kalau user klik label, input tersebut otomatis fokus.

Ini meningkatkan usability secara signifikan — area klik yang lebih besar,

Terutama untuk checkbox dan radio.

Tag <textarea>: Kolom Teks Panjang

Untuk teks yang panjang — seperti komentar, deskripsi, atau alamat lengkap.

Bedanya dengan input text: textarea bisa multi-baris dan bisa di-resize oleh user.

Attribute rows dan cols menentukan ukuran awal, placeholder menampilkan teks petunjuk.

Tag <select> dan <option>: Dropdown

Membuat menu dropdown.

User klik dan pilih dari daftar opsi. Bisa ditambah attribute multiple untuk memilih lebih dari satu.

Attribute Penting untuk Validasi

  • required: Field wajib diisi
  • placeholder: Teks petunjuk di dalam input (hilang saat user mulai mengetik)
  • minlength dan maxlength: Batas panjang karakter
  • min dan max: Batas nilai numerik atau tanggal
  • pattern: Regex untuk validasi format (misalnya pola nomor telepon Indonesia)

Kenapa Form Penting?

Karena form adalah jembatan antara user dan server. Setiap kali kamu login, daftar akun, beli barang online, kirim pesan, atau bahkan like foto di Instagram — semuanya melibatkan form. Memahami form HTML yang baik adalah keterampilan fundamental yang akan kamu pakai setiap hari sebagai web developer.

Contoh Kode

css 
/* OPTIMASI RENDERING */

/* 1. Hindari layout thrashing */
/* JANGAN: Baca lalu tulis DOM berulang */
const h = element.offsetHeight;
element.style.height = (h * 2) + 'px';
const newH = element.offsetHeight; /* Layout lagi! */

/* LAKUKAN: Batch read, lalu batch write */
const h = element.offsetHeight;
const w = element.offsetWidth;
element.style.height = (h * 2) + 'px';
element.style.width = (w * 2) + 'px';

/* 2. Gunakan transform dan opacity */
.animasi {
  transform: translateX(100px);
  opacity: 0.5;
}

/* 3. will-change untuk elemen yang sering berubah */
.animated-element {
  will-change: transform, opacity;
}

Penjelasan Kode

Baris 4-6: Anti-pattern layout thrashing. Baris 9-12: Pattern yang benar. Baris 16-19: Gunakan transform dan opacity. Baris 22-24: will-change hint.

Prompt AI

Jelaskan apa itu 'layout thrashing' dan kenapa itu buruk untuk performa.

Pertanyaan Reflektif

Buka Chrome DevTools → Performance → Record → Refresh halaman → Stop. Lihat timeline rendering.