Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang
Pelajari properti mana yang dipercepat GPU dan mana yang memicu pengecatan ulang tata letak yang mahal.
Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Alur Perenderan
Peramban merender dalam tiga tahap: Tata Letak (ukuran + posisi) → Pengecatan (piksel) → Penggabungan (penggabungan lapisan GPU). Menganimasikan properti yang memicu tahap lebih awal membutuhkan banyak sumber daya.
Properti Pemicu Tata Letak
Mengubah properti ini memaksa peramban menghitung ulang tata letak, kemungkinan untuk seluruh halaman. Hindari menganimasikannya:
width,heightmargin,paddingtop,leftfont-sizedisplay
Properti Pemicu Pengecatan
Properti ini melewati tata letak, tetapi mengecat ulang piksel. Biayanya sedang:
background-colorcolorbox-shadowborder
Properti Khusus Penggabungan
Properti ini melewati tata letak dan pengecatan—peramban hanya perlu menggabungkan lapisan yang sudah dirasterisasi. Sangat ringan dan dipercepat GPU:
transformopacity
Aturan Emas Animasi CSS
Untuk animasi yang mulus pada 60 bingkai per detik, animasikan hanya transform dan opacity. Gunakan transform: translate(), bukan top/left, dan gunakan opacity, bukan pemudaran dengan display.
<div class="box demo-active">Box</div>Properti Perubahan yang Akan Terjadi
will-change memberi tahu peramban untuk mempromosikan elemen ke lapisan GPU-nya sendiri sebelum animasi dimulai, sehingga mencegah “kilatan promosi” di tengah animasi.
<div class="animated">Animated</div>Perubahan yang Akan Terjadi: Otomatis
Tetapkan will-change: auto atau hapus properti tersebut sepenuhnya setelah animasi selesai. Terlalu banyak elemen yang dipromosikan akan memboroskan memori GPU.
Mengukur dengan DevTools
Gunakan tab Performa di Chrome DevTools untuk merekam dan memeriksa waktu bingkai. Tab Perenderan dapat menampilkan kilatan pengecatan (hamparan hijau) yang menunjukkan elemen mana yang dicat ulang pada setiap bingkai.
Transformasi, Bukan Posisi Atas/Kiri
Pengoptimalan yang paling berdampak: ganti animasi posisi dengan transformasi:
<div class="fly demo-active">Fly</div>Biaya Transisi Warna
Transisi warna latar belakang memicu pengecatan ulang, tetapi tidak memicu tata letak. Transisi ini dapat diterima untuk elemen kecil. Untuk latar belakang berukuran besar, pertimbangkan menggunakan elemen semu dengan transisi opasitas:
<button class="btn demo-active">Hover me</button>Properti Pembatasan
Properti contain memberi petunjuk kepada peramban bahwa sebuah elemen dan subpohonnya bersifat mandiri. Hal ini membatasi cakupan pembatalan validitas tata letak dan meningkatkan kinerja pengecatan ulang.
<div class="widget">Widget</div>Pemeriksaan Singkat
Manakah dua properti CSS yang dapat dianimasikan pada tahap penggabungan tanpa memicu tata letak atau pengecatan?
Ringkasan
Menganimasikan properti tata letak (width, top, margin) memicu penghitungan ulang yang mahal. Properti pengecatan (color, background) lebih ringan. Hanya transform dan opacity yang dianimasikan pada tahap penggabungan GPU tanpa memicu tata letak atau pengecatan. Selalu utamakan keduanya untuk animasi yang mulus dan berkinerja baik.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang” gratis?
Ya — teks lengkap “Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang”?
Pelajari properti mana yang dipercepat GPU dan mana yang memicu pengecatan ulang tata letak yang mahal. Kamu berlatih CSS 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 CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS 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 4 dari 4.
Berapa lama pelajaran “Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang” 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 CSS Academy ini?
Ya. Setiap pelajaran CSS 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
- Durasi dan Waktu Properti Transition
- Fungsi Easing: ease linear cubic-bezier
- Menerapkan Transition pada Banyak Properti
- Performa: Properti yang Dapat Ditranformasi vs Pengecatan Ulang