Pengantar
Jika Anda adalah tipe orang yang selalu fokus pada hal-hal seperti cara kerja browser, maka Anda sudah tahu bahwa ada beberapa artikel luar biasa akhir-akhir ini yang menjelaskan operasi komposit/perender yang dipercepat GPU di Chrome. Pertama, Accelerated Rendering di Chrome: Model Lapisan adalah pengantar yang bagus tentang cara Chrome menggunakan konsep lapisan untuk menggambar halaman; untuk pembahasan yang lebih mendalam, GPU Accelerated Compositing di Chrome akan membahas cara Chrome menggunakan lapisan ini, bersama GPU untuk merender halaman Anda.
Pertanyaan filosofis
Setelah menghabiskan banyak waktu menulis rasterizer software untuk tujuan 3D, menjadi lebih jelas bagi saya bahwa beberapa properti CSS seharusnya memiliki performa yang bervariasi saat menggambar halaman Anda. Misalnya, merasterisasi gambar kecil ke layar adalah operasi algoritma yang sama sekali berbeda dengan menggambar drop shadow pada bentuk arbitrer. Jadi, pertanyaannya menjadi: Bagaimana pengaruh properti CSS yang berbeda terhadap bobot render halaman?
Tujuan saya adalah mengategorikan kumpulan besar properti/nilai CSS berdasarkan waktu penggambarannya, sehingga kami dapat memahami 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 pengecatan CSS, yang bekerja seperti ini:
- Menghasilkan serangkaian halaman HTML individual; masing-masing dengan elemen DOM tunggal dan beberapa permutasi properti CSS yang menyertainya.
- Jalankan beberapa skrip otomatisasi yang, untuk setiap halaman, akan:
- Meluncurkan Chrome
- Memuat halaman
- Buat Gambar Skia untuk halaman tersebut
- Jalankan setiap Skia Picture yang diambil melalui Skia Benchmark untuk mendapatkan pengaturan waktu
- Buang semua pengaturan waktu, dan kagumi angkanya. (Bagian ini penting...)
Dengan konfigurasi ini, kita membuat serangkaian halaman HTML, dan setiap halaman berisi permutasi unik properti dan nilai CSS; misalnya, berikut ini 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>
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, di mana 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 instance Chrome baru (untuk memastikan bahwa pengaturan waktu tidak bias oleh status basi dalam pemuatan ulang halaman), dan Skia Picture (*.SKP) diambil untuk mengevaluasi perintah Skia apa 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 (dibuat dari kode sumber Skia) yang menghasilkan waktu rata-rata yang diperlukan untuk merender halaman tersebut.
Mengevaluasi data
Dari sini, kita sekarang memiliki beberapa kemampuan kasar untuk memetakan berapa banyak properti CSS yang diperlukan untuk menggambar. Atau lebih tepatnya, kita bisa memulai pemeringkatan properti CSS dengan performa paint-nya. Berikut adalah grafik besar yang diambil dengan Chrome 27 beta yang menampilkan seluruh kumpulan data pengaturan waktu dari proses ini. Perlu diketahui bahwa semua data dapat berubah seiring perkembangan Chrome yang semakin cepat seiring waktu.
Setiap batang vertikal mewakili waktu penggambaran halaman dengan satu kombinasi properti CSS, (diperbesar 100x; Nilai skala sebenarnya pada grafik ini adalah 0,1,56 md). Banyak garis-garis menarik, tetapi dalam bentuk ini tidak berguna; kita perlu melakukan beberapa penambangan data untuk menemukan tren yang berguna.
Pertama-tama, kami menemukan bukti bahwa beberapa properti CSS memang lebih mahal untuk dirender dibandingkan yang lain. Misalnya, menggambar drop-shadow pada elemen DOM melibatkan operasi multi-pass dengan spline dan hal-hal jahat lainnya, sebagai lawan dari opasitas yang seharusnya lebih mudah dirender.
Kedua, dan yang lebih menarik, kombinasi Properti CSS dapat memiliki waktu paint yang lebih lama daripada jumlah bagian-bagiannya. Dari perspektif pengamat, ini agak aneh, kami berharap bahwa A+B = C, bukan 2,2C. Misalnya, menambahkan box-shadow dan border-radius-stroke :
Yang benar-benar menarik tentang hal ini adalah bahwa properti ini bukan hanya properti box-shadow itu sendiri, melainkan permutasi nilai spesifik tersebut. Misalnya, di bawah ini menunjukkan pengelompokan box-shadow : 50% dan border-radius dengan variasi nilai.
Melihat data, ini terjadi untuk sementara waktu. Ada banyak sekali kombinasi ganjil, dan rangkaian pengujian saya hampir tidak cocok dengan semuanya; masih ada banyak pengujian dan kombinasi yang dapat memberikan hasil yang menarik
Menemukan bobot render halaman
Berbekal kemampuan untuk melacak waktu render untuk setiap elemen di halaman Anda, developer memiliki kemampuan untuk mulai mengevaluasi bobot render halaman mereka, dan bagaimana pengaruhnya terhadap responsivitas situs Anda; Berikut adalah beberapa tips untuk memulai
- Gunakan mode Terus-menerus Cat Chrome di Chrome Dev Tools untuk mengetahui apa saja properti CSS yang merugikan Anda.
- Gabungkan peninjauan CSS ke dalam proses peninjauan kode yang sudah 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 membutuhkannya di sini?
- Jika ragu, selalu pilih kinerja yang lebih baik. Pengguna Anda mungkin tidak ingat lebar padding yang ada di kolom, tetapi mereka akan mengingat bagaimana rasanya mengunjungi situs Anda.
Gagasan Terakhir
Salah satu hal paling menarik tentang eksperimen ini adalah pengaturan waktunya akan terus berubah untuk setiap versi Chrome (semoga semakin cepat;) software browser memiliki area platform yang selalu berubah. Yang lambat hari ini, bisa jadi cepat keesokan harinya. Anda dapat mempelajari kembali artikel ini agar tidak menempatkan box-shadow: 1px 2px 3px 4px sebagai elemen yang sudah memiliki border-radius:5. Namun, hal yang lebih penting adalah properti CSS secara langsung memengaruhi waktu menggambar halaman Anda.