Get best of the week

Analisis Kinerja Animasi CSS

Apa yang harus dipilih untuk menghidupkan elemen-elemen halaman web? JavaScript atau CSS? Pertanyaan ini suatu hari nanti akan ditanyakan kepada setiap pengembang web. Dan mungkin - dan tidak sekali.

Programmer JavaScript telah membuat banyak perpustakaan untuk animasi browser. Dan tampaknya semua orang di sekitar cenderung menggunakan perpustakaan ini sebagai solusi siap pakai untuk animasi. Tapi mari kita memperlambatnya. Apakah itu benar? Haruskah saya menghidupkan elemen halaman web menggunakan JavaScript? Mungkin Anda dapat mengandalkan mekanisme CSS standar dan dengan demikian mencapai animasi berkualitas tinggi dan berkinerja tinggi?



Karena Anda membaca ini, saya dapat berasumsi bahwa Anda terbiasa dengan animasi JavaScript. Oleh karena itu, saya mengusulkan untuk mengeksplorasi topik animasi CSS dalam berbagai manifestasinya, dan saya juga mengusulkan untuk berbicara tentang kinerja animasi semacam itu.

Informasi Umum


Animasi CSS didasarkan pada beberapa properti elemen. Di antara mereka, berikut ini dapat dicatat:

  • Properti positionyang, khususnya, dapat mengambil nilai absolutedan relative.
  • Properti transform.
  • Properti opacity.
  • Properti left, right, top, bottom.

Untuk memulai, lihat beberapa proyek percontohan yang menggunakan berbagai properti CSS untuk menghidupkan elemen.

Berikut adalah proyek di mana elemen dengan pengenal animateyang propertinya positiondisetel ke nilai dianimasikan absolute. Properti elemen topdan dapat berubah left.


Pilot Project Page

Di bawah ini adalah kode yang mengimplementasikan animasi ini.

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        top: 200px;
        left: 130px;
    }
}

Berikut adalah proyek di mana animasi yang sama diimplementasikan menggunakan properti CSS transform.

Animasi ini diwakili oleh kode berikut:

#animate {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;

    animation: move 3s ease infinite;
}

@keyframes move {
    50% {
        transform: translate(100px, 100px);
    }
}

Mari kita gunakan proyek-proyek ini untuk menarik kesimpulan tentang kinerja animasi CSS, dan tentang sumber daya sistem seperti apa yang digunakan untuk mengimplementasikannya.

Jika Anda hanya melihat halaman-halaman proyek, Anda dapat memutuskan apa yang diterapkan di dalamnya hal yang sama, meskipun menggunakan pendekatan yang berbeda. Namun, jika Anda mengukur kinerja proyek-proyek ini menggunakan alat pengembang Chrome, ternyata mereka berbeda.

Bagaimana cara browser menampilkan halaman?


Sebelum kita mempelajari riset kinerja, kita perlu memahami bagaimana browser menampilkan halaman, dan tindakan apa yang dilakukan jika ada perubahan yang terjadi pada halaman.

Seperti inilah proses output halamannya.


Output Halaman

Pertimbangkan peristiwa yang tercermin dalam gambar ini.

  1. Recalculate Style - Perhitungan gaya yang akan diterapkan pada elemen.
  2. Layout - Pembuatan tata letak elemen dan penempatannya di halaman.
  3. Paint- Mengisi piksel dari lapisan yang dibuat, yaitu - membuat gambar raster untuk setiap lapisan. GPU akan menggunakan gambar-gambar ini untuk menampilkan halaman.
  4. Composite Layer- Layout layer dan tampilkan di layar. Hasilnya akan menjadi halaman selesai.

Suatu peristiwa Composite Layerhanyalah waktu ketika CPU berkomunikasi dengan GPU untuk membuat animasi. Menggunakan properti CSS seperti transformdan opacity, kita dapat mentransfer beban menghasilkan animasi dari CPU ke GPU.

Animasi dan GPU


GPU pada dasarnya adalah komputer khusus yang digunakan untuk bekerja dengan gambar. Secara efisien dapat memproses sejumlah besar informasi grafis.

Akibatnya, ketika suatu peristiwa terjadi Composite Layer, lapisan tambahan dibuat. Ini adalah mekanisme di mana Anda dapat menghindari rendering ulang elemen animasi dan elemen antarmuka lainnya.

Melihat gambar berikut, Anda mungkin berpikir bahwa elemen animasi terletak pada layer yang sama.


Elemen animasi ( asli )

Tetapi jika Anda melihat lapisan seolah-olah mereka berada di ruang tiga dimensi, ternyata ketika animasi diimplementasikan menggunakan properti transform , lapisan tambahan dibuat untuk lingkaran merah. Hal ini memungkinkan untuk menghasilkan animasi halus berkinerja tinggi.


Lapisan tambahan ( asli ) telah dibuat untuk objek animasi.

GPU membuat pohon objek render dalam memori, dan, tanpa rendering ulang, itu dapat menempatkan lapisan yang sesuai di atas lapisan lainnya. Dalam kasus menjiwai objek menggunakan propertitopdanleft, lapisan yang sama, karena perubahan properti, dirender berulang kali. Jika Anda tertarik pada perilaku properti CSS ini, ternyata bagian atas dan kiri memengaruhi tata letak halaman, yang mengarah pada kebutuhan untuk merender ulang halaman dan mengatur ulang lapisan.


Animasi menggunakan properti menerjemahkan dan menggunakan properti atas dan kiri

Gambar ini memungkinkan untuk melihat perbedaan serius antara animasi diimplementasikan menggunakan propertitranslatedan propertitopdanleft.

Dalam hal animasi dibuat dengantopdanleft, lingkaran diberikan pada setiap posisi hingga mencapai posisi ekstrim. Setelah itu, ia mulai bergerak ke posisi awal.

Berikut ini menampilkanPerformanceToolbar Pengembang Chrome dengan detail tentang proses animasi.


Animasi menggunakan properti terjemahan ( asli )


Animasi menggunakan properti atas dan kiri ( asli )

Jika Anda melihat informasi terperinci tentang tugas individu yang disajikan dalam panelPerformance, kita dapat menyimpulkan bahwa tindakan berbeda dilakukan dalam kerangka tugas ini. Jadi, dalam kasus animasi atas / kiri, tugas melakukan perhitungan ulang gaya, tata letak lapisan, memperbarui pohon lapisan, membuat tata letak dan render. Dalam hal animasi terjemahan, satu-satunya tugas yang diselesaikan GPU adalah memindahkan layer tanpa mengeluarkan apa pun ke DOM.

Akibatnya, karena penggunaan fitur GPU yang kuat, menggunakan animasi terjemahan, utas utama dibebaskan. Ini meningkatkan kinerja aplikasi. Penggunaan animasi atas / kiri mengarah ke beban tambahan besar di utas utama.


Beban pada aliran utama yang dibuat oleh animasi terjemahan (kiri) dan animasi atas / kiri (kanan) ( asli )

Gambar di atas dengan jelas menunjukkan beban yang jatuh pada aliran utama saat melakukan animasi atas / kiri. Ini adalah hasil dari perubahan konstan yang perlu diproses untuk melakukan animasi seperti itu.

Ringkasan


Sebagai hasilnya, kita dapat menyimpulkan bahwa, menggunakan animasi CSS, perlu memperhatikan dengan tepat sumber daya sistem apa yang terlibat dalam eksekusi mereka. Jika memungkinkan, ada baiknya menggunakan yang dilakukan oleh GPU.

Dan jenis animasi apa yang Anda gunakan dalam proyek Anda?

More articles:


All Articles