BlogLayanan Mana Yang Lebih Cepat? CSS Atau JS?

February 1, 2018by IDprogrammer0

Artikel ini akan sedikit membahas tentang librari Js dan CSS.

jQuery

Sebenarnya animasi Javascript sendiri sudah cepat, namun jQuery memperlambatnya. Mengapa? Karena jQuery di ciptakan bukan sebagai animasi engine

jQuery tidak dapat memperbaik (fix) Tata Letak maupun tampilan animasi karena banyak fungsi yang digunakan dalam hal lain. Karena itulah kadang ‘sampah’ dari jQuery bisa memperlambat animasi Javascript. jQuery lebih menggunakan setInterval ketimbang requestAnimationFrame (RAF). Karena ketiadaan RAF inilah jQuery menghasilkan rate frame yang rendah.

CSS Transisi

CSS Transisi menggunguli jQuery dengan membongkar logika animasi ke browser. Mengoptimalkan interaksi DOM dan konsumsi memoryuntuk menghindari lag.

Bagimanapun juga kenyataannya pengoptimalan ini juga dapat dilakukan secara langsung dalam JavaScript. GSAP telah melakukannya selama bertahun-tahun. Velocity.js, mesin animasi baru, tidak hanya memanfaatkan teknik yang sama namun juga berjalan beberapa langkah di luar – seperti yang akan kita jelajahi sebentar lagi.

Secara garis besar mungkin dapat disimpulkan bahwa CSS lebih cepat, namun sebenarnya Jaascript mampu lebih cepat lagi

Mari kita mulai dengan memeriksa kelemahan library animasi CSS:

 

  • Transisi akselerasi memaksa GPU bekerja lebh keras lagi, padahal ini yang menyebabkan terjadinya hang atau lag dalam situasi stress tingkat tinggi. Efek ini diperparah pada perangkat mobile. (Secara khusus, lag adalah akibat dari overhead yang terjadi saat data ditransfer antara thread utama browser dan thread komposernya. Beberapa properti CSS, seperti transformasi dan keburaman, kebal terhadap overhead ini.) Adobe menguraikan masalah ini di sini.
  • Transisi tidak bekerja di bawah Internet Explorer 10, menyebabkan masalah aksesibilitas untuk situs desktop sejak IE8 dan IE9.
  • Karena transisi tidak dikontrol secara native oleh JavaScript (hanya dipicu oleh JavaScript), browser tidak tahu bagaimana mengoptimalkan transisi yang sinkron dengan kode JavaScript yang memanipulasinya.

Sebaliknya: library animasi berbasis JavaScript dapat memutuskan sendiri kapan untuk mengaktifkan akselerasi perangkat keras, mereka secara inheren bekerja di semua versi IE, dan mereka sangat cocok untuk optimasi animasi.

 

Animasi JavaScript

 

Oke, jadi JavaScript bisa berada di atas angin dalam hal kinerja. Tapi seberapa jauh lebih cepat JavaScript bisa? Nah – untuk memulai – cukup cepat untuk membangun demo animasi 3D intens yang biasanya Anda lihat hanya dibuat dengan WebGL. Dan cukup cepat untuk membangun penggoda multimedia yang biasanya Anda lihat hanya dibangun dengan Flash atau After Effects. Dan cukup cepat untuk membangun dunia maya yang biasanya hanya Anda lihat dibangun dengan kanvas.

Untuk langsung membandingkan kinerja library animasi terkemuka, termasuk Transit (yang menggunakan transisi CSS), sampaikan ke dokumentasi Velocity di VelocityJS.org. Pertanyaannya tetap: Bagaimana sebenarnya JavaScript mencapai tingkat kinerja yang tinggi? Berikut adalah daftar singkat pengoptimalan bahwa animasi berbasis JavaScript dapat melakukan:

$element
	/* Slide the element down into view. */
	.velocity({ opacity: 1, top: "50%" })
	/* After a delay of 1000ms, slide the element out of view. */
	.velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });

Pada contoh di atas, panggilan Velocity kedua tahu bahwa secara otomatis harus dimulai dengan nilai opacity 1 dan nilai tertinggi 50%.

Browser pada akhirnya bisa melakukan banyak pengoptimalan yang sama itu sendiri, namun hal itu akan semakin menyulitkan cara kode animasi dapat dibuat oleh pengembang. Oleh karena itu, untuk alasan yang sama bahwa jQuery tidak menggunakan RAF (lihat di atas), browser tidak akan pernah memaksakan pengoptimalan yang bahkan memiliki kesempatan kecil untuk mematahkan spesifikasi atau menyimpang dari perilaku yang diharapkan.

Akhirnya, mari bandingkan dua perpustakaan animasi JavaScript (Velocity.js dan GSAP) satu sama lain.

GSAP adalah platform animasi yang cepat dan kaya fitur. Velocity adalah alat yang ringan untuk meningkatkan kinerja dan alur kerja UI secara drastis.
GSAP membutuhkan biaya lisensi untuk berbagai jenis usaha. Velocity bebas terbuka-sumber melalui lisensi MIT yang sangat permisif.
Kinerja-bijaksana, GSAP dan Velocity tidak dapat dibedakan dalam proyek dunia nyata.

Rekomendasi saya adalah menggunakan GSAP saat Anda memerlukan kontrol yang tepat terhadap waktu (misalnya pemetaan ulang, jeda / resume / seek), gerakan (misalnya jalur kurva bezier), atau pengelompokan / pengurutan kompleks. Fitur ini sangat penting untuk pengembangan game dan aplikasi niche tertentu, namun kurang umum di UI aplikasi web.

Velocity.js

Fitur komposit GSAP yang kaya bukan untuk menyiratkan bahwa Velocity ringan pada fitur. Sebaliknya. Hanya 7Kb saat zip, Velocity tidak hanya meniru semua fungsi jQuery’s $ .animate (), tapi juga dikemas dalam animasi warna, transformasi, loop, easings, animasi kelas, dan scrolling.

Singkatnya, Velocity adalah yang terbaik dari jQuery, jQuery UI, dan transisi CSS digabungkan.

Selanjutnya, dari sudut pandang kenyamanan, Velocity menggunakan metode jQuery $ .queue () di bawah tenda, dan karenanya beroperasi secara mulus dengan fungsi jQuery’s $ .animate (), $ .fade (), and $ .delay (). Dan, karena sintaks Velocity identik dengan $ .animate (), tidak ada kode halaman Anda yang perlu diubah.

Penutup :

Tujuan Velocity adalah tetap menjadi pemimpin dalam performa dan kenyamanan animasi DOM. Artikel ini berfokus pada yang pertama. Pergilah ke VelocityJS.org untuk mempelajari lebih lanjut tentang yang terakhir.

Leave a Reply

Your email address will not be published. Required fields are marked *

https://idprogrammer.com/storage/2018/11/logo_footer.png
https://idprogrammer.com/storage/2018/11/logo_footer.png
Subscribe

If you wish to receive our latest news in your email box, just subscribe to our newsletter. We won’t spam you, we promise!

Applauz

As the pioneer of the lean startup movement, APPLAUZ has dedicated it’s time to sharing effective business strategies that help new businesses and enterpreneurs put their money to work in the right way.

Subscribe

If you wish to receive our latest news in your email box, just subscribe to our newsletter. We won’t spam you, we promise!

Applauz

As the pioneer of the lean startup movement, APPLAUZ has dedicated it’s time to sharing effective business strategies that help new businesses and enterpreneurs put their money to work in the right way.

© Copyright 2016 IDprogrammer. All rights reserved.