Pengantar
Jika Anda adalah tipe orang yang terus mengikuti hal-hal seperti cara kerja browser, Anda pasti sudah tahu bahwa ada beberapa artikel luar biasa akhir-akhir ini yang menjelaskan operasi perender/komposit yang dipercepat GPU di Chrome. Pertama, Rendering yang Dipercepat di Chrome: Model Lapisan merupakan pengantar yang bagus tentang cara Chrome menggunakan konsep lapisan untuk menggambar halaman; dan untuk pembahasan yang lebih mendalam, GPU Accelerated Compositing di Chrome membahas cara Chrome menggunakan lapisan ini, bersama GPU untuk merender halaman Anda.
Pertanyaan filosofis
Setelah menghabiskan banyak waktu untuk menulis rasterizer software untuk tujuan 3D, saya menyadari bahwa beberapa properti CSS harus memiliki performa yang bervariasi saat menggambar halaman Anda. Misalnya, merasterisasi gambar kecil ke layar adalah operasi algoritma yang sama sekali berbeda yang menggambar bayangan jatuh pada bentuk arbitrer. Jadi, pertanyaannya menjadi: Bagaimana berbagai properti CSS memengaruhi beban render halaman Anda?
Tujuan saya adalah mengategorikan kumpulan besar properti/nilai CSS berdasarkan waktu penggambarannya, sehingga kami dapat membuat pemahaman tentang jenis properti CSS apa yang berperforma lebih baik daripada yang lain. Untuk melakukannya, saya menulis beberapa otomatisasi dengan selotip dan permen karet untuk mencoba menambahkan visibilitas numerik ke waktu proses rendering CSS, yang berfungsi seperti ini:
- Membuat serangkaian halaman HTML individual; masing-masing dengan satu elemen DOM dan beberapa permutasi properti CSS yang melekat padanya.
- Jalankan beberapa skrip otomatisasi yang, untuk setiap halaman, akan:
- Meluncurkan Chrome
- Memuat halaman
- Membuat Gambar Skia untuk halaman
- Jalankan setiap Gambar Skia yang diambil melalui Benchmark Skia untuk mendapatkan pengaturan waktu
- Buang semua pengaturan waktu, dan kagumi angkanya. (Bagian ini penting…)
Dengan penyiapan ini, kita membuat serangkaian halaman HTML, dengan setiap halaman berisi permutasi unik properti dan nilai CSS; misalnya, berikut dua file html:
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Dan satu lagi, yang lebih kompleks
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
Di bawah ini, sebagai varian dari contoh terakhir, kita hanya mengubah nilai radial-gradient:
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
Setiap halaman kemudian dimuat ke dalam instance Chrome yang baru (untuk memastikan bahwa pengaturan waktu tidak bias oleh status yang sudah tidak berlaku saat halaman dimuat ulang), dan Gambar Skia (*.SKP) diambil untuk mengevaluasi perintah Skia yang digunakan untuk mewarnai halaman. Setelah file SKP dibuat untuk setiap file HTML, kita menjalankan batch lain untuk mendorong file *.SKP melalui aplikasi Skia Benchmark (di-build dari kode sumber Skia) yang menampilkan waktu rata-rata yang diperlukan untuk merender halaman tersebut.
Mengevaluasi data
Dari sini, kita sekarang memiliki beberapa kemampuan kasar untuk memetakan berapa banyak suite properti CSS yang diperlukan untuk digambar. Atau, kita dapat mulai membuat peringkat properti CSS berdasarkan performa gambarnya. Berikut adalah grafik besar yang diambil dengan Chrome 27 beta yang menampilkan semua kumpulan data pengaturan waktu lengkap dari proses ini. Perhatikan bahwa semua data dapat berubah seiring waktu karena Chrome menjadi semakin cepat.
Setiap batang vertikal mewakili waktu proses gambar halaman dengan satu kombinasi properti CSS, (diperbesar 100x; Nilai skala sebenarnya dari grafik ini adalah 0,1.56 md). Banyak garis yang bagus, tetapi dalam bentuk ini kurang berguna; kita perlu melakukan penambangan data untuk menemukan tren yang berguna.
Pertama, kami menemukan bukti bahwa beberapa properti CSS lebih mahal untuk dirender daripada yang lain. Misalnya, menggambar bayangan jatuh pada elemen DOM melibatkan operasi multi-pass dengan spline dan hal-hal buruk lainnya, bukan opasitas yang seharusnya lebih mudah dirender.
Kedua, dan yang lebih menarik, kombinasi Properti CSS dapat memiliki waktu render yang lebih lama daripada jumlah bagiannya. Dari perspektif pengamat, hal ini agak aneh, kita mengharapkan A+B = C, bukan 2,2C. Misalnya, menambahkan box-shadow dan border-radius-stroke:
Yang benar-benar menarik adalah, ini bukan hanya properti box-shadow itu sendiri, tetapi permutasi nilai spesifik tersebut. Misalnya, di bawah ini menunjukkan pengelompokan box-shadow : 50% dan border-radius dengan variasi nilai.
Melihat data, hal ini berlangsung selama beberapa saat. Ada banyak kombinasi aneh, dan suite pengujian saya hampir tidak menyentuh semuanya; masih ada banyak pengujian dan kombinasi yang dapat menghasilkan hasil yang menarik
Menemukan berat rendering halaman
Dengan kemampuan untuk melacak waktu render untuk setiap elemen di halaman, developer dapat mulai mengevaluasi bobot render halaman, dan pengaruhnya terhadap responsivitas situs Anda. Berikut beberapa tips untuk memulainya
- Gunakan mode Continuous Paint Chrome di Chrome DevTools untuk mendapatkan pemahaman tentang properti CSS yang membebani Anda.
- Gabungkan peninjauan CSS ke dalam proses peninjauan kode yang ada untuk menemukan masalah performa Cari tempat di CSS tempat Anda menggunakan hal-hal yang diketahui lebih mahal, seperti gradien dan bayangan. Tanyakan pada diri Anda, apakah saya benar-benar memerlukannya di sini?
- Jika ragu, selalu pilih performa yang lebih baik. Pengguna mungkin tidak ingat lebar padding di kolom Anda, tetapi mereka akan mengingat pengalaman mereka saat mengunjungi situs Anda.
Kesimpulan
Salah satu hal yang paling menarik tentang eksperimen ini adalah pengaturan waktu akan terus berubah dengan setiap versi Chrome (semoga semakin cepat ;) software browser adalah area platform yang terus berubah. Yang lambat hari ini, bisa jadi cepat besok. Anda dapat mengambil dari artikel ini untuk menghindari penempatan box-shadow: 1px 2px 3px 4px sebagai elemen yang sudah memiliki border-radius:5. Namun, hal penting yang seharusnya lebih penting adalah properti CSS secara langsung memengaruhi waktu penggambaran halaman.