Pengantar
Jika Anda adalah tipe orang yang mengikuti hal-hal seperti cara kerja browser, Anda pasti sudah tahu bahwa akhir-akhir ini ada beberapa artikel luar biasa yang menjelaskan operasi komposit/perender yang dipercepat GPU Chrome. Pertama, Rendering yang Dipercepat di Chrome: Model Lapisan adalah pengantar yang bagus tentang cara Chrome menggunakan konsep lapisan untuk menggambar halamannya; dan untuk pembahasan mendalam, Komposisi yang Dipercepat GPU di Chrome membahas cara Chrome menggunakan lapisan ini, bersama dengan GPU untuk merender halaman Anda.
Pertanyaan filosofis
Setelah menghabiskan banyak waktu menulis rasterizer software untuk tujuan 3D, saya menyadari bahwa beberapa properti CSS seharusnya memiliki performa yang bervariasi saat menggambar halaman Anda. Misalnya, meraster gambar kecil ke layar adalah operasi algoritma yang sama sekali berbeda dengan menggambar Drop Shadow pada bentuk arbitrer. Jadi pertanyaannya adalah: Bagaimana properti CSS yang berbeda memengaruhi bobot render halaman Anda?
Tujuan saya adalah mengategorikan sekumpulan besar properti/nilai CSS berdasarkan waktu render, sehingga kita dapat memahami jenis properti CSS mana yang lebih berperforma daripada yang lain. Untuk melakukannya, saya menulis beberapa otomatisasi dengan lakban dan permen karet untuk mencoba menambahkan visibilitas numerik ke waktu render CSS, yang berfungsi seperti ini:
- Buat rangkaian halaman HTML individual; masing-masing dengan satu elemen DOM dan beberapa permutasi properti CSS yang disertakan.
- Jalankan beberapa skrip otomatisasi yang, untuk setiap halaman, akan:
- Meluncurkan Chrome
- Memuat halaman
- Membuat Skia Picture untuk halaman
- Jalankan setiap Gambar Skia yang diambil melalui Skia Benchmark untuk mendapatkan pengaturan waktu
- Buang semua pengaturan waktu, dan kagumi angkanya. (Bagian ini penting…)
Dengan penyiapan ini, kami membuat rangkaian halaman HTML, yang setiap halamannya berisi permutasi unik properti dan nilai CSS; misalnya, berikut adalah 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 gradien radial:
<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 baru (untuk memastikan bahwa pengaturan waktu tidak dipengaruhi oleh status usang dalam pemuatan ulang halaman), dan Skia Picture (*.SKP) diambil untuk mengevaluasi perintah Skia yang digunakan untuk menggambar halaman. Setelah file SKP dibuat untuk setiap file HTML, kami menjalankan batch lain untuk mengirim file *.SKP melalui aplikasi Skia Benchmark (yang dibuat dari kode sumber Skia) yang menampilkan waktu rata-rata yang diperlukan untuk merender halaman tersebut.
Mengevaluasi data
Dari sini, kita sekarang memiliki kemampuan kasar untuk memetakan seberapa banyak rangkaian properti CSS yang diperlukan untuk merender. Atau, kita dapat mulai mengurutkan properti CSS berdasarkan performa rendering-nya. Berikut adalah grafik besar yang diambil dengan Chrome 27 beta yang menampilkan semua set lengkap data pengaturan waktu dari proses ini. Perhatikan bahwa semua data dapat berubah seiring Chrome menjadi makin cepat dari waktu ke waktu.
Setiap batang vertikal mewakili waktu render 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, garis tersebut agak tidak berguna; kita perlu melakukan beberapa penambangan data untuk menemukan tren yang berguna.
Pertama, kami menemukan bukti bahwa beberapa properti CSS memang 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, berbeda dengan opasitas yang seharusnya lebih mudah dirender.
Kedua, dan yang lebih menarik, kombinasi Properti CSS dapat memiliki waktu render yang lebih lama daripada jumlah bagian-bagiannya. Dari perspektif pengamat, hal ini agak aneh, kita akan mengira bahwa A+B = C, bukan 2,2C. Misalnya, menambahkan box-shadow dan border-radius-stroke :
Hal yang sangat menarik tentang ini adalah bahwa ini bukan hanya properti box-shadow itu sendiri, melainkan permutasi nilai spesifik tersebut. Misalnya, di bawah ini adalah pengelompokan box-shadow : 50% dan border-radius dengan variasi nilai.
Melihat datanya, hal ini berlangsung selama beberapa waktu. Ada banyak kombinasi aneh, dan suite pengujian saya hampir tidak menyentuh semuanya; masih ada banyak pengujian dan kombinasi yang dapat memberikan hasil yang menarik
Menemukan bobot render halaman Anda
Dengan kemampuan untuk melacak waktu render untuk setiap elemen di halaman Anda, developer memiliki kemampuan untuk mulai mengevaluasi bobot render halaman, dan pengaruhnya terhadap responsivitas situs Anda; Berikut beberapa tips untuk memulai
- Gunakan mode Continuous Paint Chrome di Chrome Dev Tools untuk memahami properti CSS yang membebani Anda.
- Sertakan peninjauan CSS ke dalam proses peninjauan kode yang ada untuk menemukan masalah performa Cari bagian dalam CSS Anda yang menggunakan hal-hal yang diketahui lebih berat, seperti gradien dan bayangan. Tanyakan pada diri Anda, apakah saya benar-benar membutuhkannya di sini?
- Jika ragu, selalu pilih opsi yang memberikan performa lebih baik. Pengguna Anda mungkin tidak ingat lebar padding pada kolom Anda, tetapi mereka akan ingat bagaimana rasanya mengunjungi situs Anda.
Kesimpulan
Salah satu hal paling menarik dari eksperimen ini adalah waktunya akan terus berubah seiring dengan setiap versi Chrome (semoga makin cepat ;) software browser adalah area permukaan yang terus berubah. Apa yang lambat hari ini, bisa jadi cepat besok. Anda dapat mengambil kesimpulan dari artikel ini untuk menghindari penempatan box-shadow: 1px 2px 3px 4px pada elemen yang sudah memiliki border-radius:5. Namun, hal yang lebih penting adalah bahwa properti CSS secara langsung memengaruhi waktu render halaman Anda.