Kami memiliki begitu banyak pilihan untuk menggunakan pengembangan skrip yang sesuai dengan proyek web Anda. Dan kami semua tahu bahwa tiga sahabat berurusan dengan browser pengguna atas nama proyek Anda. Dan itu adalah HTML, CSS dan JavaScript.
Secara singkat, kita dapat mengatakan HTML adalah struktur halaman web. CSS akan mengerjakan tampilan struktur itu. Dan akhirnya JavaScript membuat semuanya berfungsi
Dan jQuery adalah salah satu perpustakaan yang paling disukai sejak lama. Yang menyediakan banyak fungsi yang telah ditentukan sebelumnya untuk memanipulasi DOM. Dan banyak perpustakaan dan plugin lain tersedia online yang menggunakan jQuery. Dan apa yang perlu dilakukan untuk menggunakan jQuery? Tidak banyak, tambahkan perpustakaan di halaman. Anda akan dapat mengakses fungsionalitas jQuery. Mari kita lihat mengapa orang menggunakan jQuery:
- Mudah dipelajari dibandingkan dengan JavaScript biasa
- Pustaka kaya dengan fungsi yang telah ditentukan sebelumnya yang menghemat banyak waktu pengembangan
- Dapat memanipulasi DOM, membuat animasi dan juga menangani panggilan AJAX
- Kompatibel dengan browser apa pun
- Kurang merendahkan dan abstraksi berat
- Menghemat banyak waktu pengembangan.
Di sisi lain, Vanilla JS siap mengalahkan rekor perpustakaan dan kerangka kerja lain. Faktanya, ini digunakan di lebih banyak situs web daripada perpustakaan dan kerangka kerja lainnya. Dan mari kita lihat mengapa ini sering digunakan?
- Cocok untuk antarmuka di situs web dinamis
- Tidak diperlukan plugin, karena ini bukan perpustakaan. Ini adalah JavaScript biasa dan didukung oleh semua browser.
- Lebih cepat untuk aksesibilitas DOM dibandingkan dengan jQuery
Tapi entah bagaimana, menulis kode lebih rumit daripada jQuery. Karena jQuery memiliki fungsi standar yang bagus yang membuat pengkodean Anda lebih mudah. Dan satu hal lagi, ini tidak kompatibel dengan browser. Anda harus peduli dengan kompatibilitas multi browser.
Berikut perbandingan kecepatan dengan menambahkan ‹li› ke dalam ‹ul› tab sebanyak 10.000 kali
Pertama kita akan memeriksa jQuery telah selesai dengan operasi ini. Jadi, inilah kodenya
Kode cukup sederhana. Kami memiliki tag daftar un-order (‹ul›) dengan id “ul”. Kemudian perpustakaan CDN dengan penggunaan tag skrip. Kemudian iterasi dengan loop for, dari 1 hingga 10.000 untuk menambahkan tag daftar (‹li›) dengan nomor iterasi.
Ini adalah grafik kinerja eksekusi kode jQuery. Di mana Anda dapat melihat skrip membutuhkan waktu 3162ms. Kemudian Merendernya ke skrip membutuhkan waktu 1401ms.
Dalam laporan kinerja ini Anda dapat melihat aktivitas penambahan memerlukan waktu 3459,5 md untuk mencetak 10.000 tag li ke tag ul.
Di sisi lain Vanilla JS memiliki beberapa catatan bagus dibandingkan dengan jQuery. Mari kita lihat kode Vanilla JS.
Di sini kita dapat melihat panjang kode bertambah dibandingkan dengan jQuery. Inilah alasan pengembang yang malas lebih memilih jQuery.
Kemudian kita fokus pada grafik kinerja eksekusi kode Vanilla JS. Dan lihat skripnya membutuhkan waktu 1399 ms dan rendering 1312 ms. Yang mana sangat bagus dibandingkan dengan jQuery.
Dan akhirnya, aktivitas appendChild hanya membutuhkan 11,8 ms untuk menambahkan dan menampilkan 10.000 li ke ul.
Terakhir, berikut adalah beberapa statistik untuk proses yang sama yang dieksekusi masing-masing 10 kali dan mencatat kinerjanya.
Eksekusi jQuery dalam Detik
1) 5.47
2) 5.68
3) 5.64
4) 5.65
5) 5.74
6) 5.73
7) 5.73
8) 5.66
9) 5.71
10) 5.56
Dan waktu eksekusi rata-rata adalah : 5.657
Eksekusi VenillaJS dalam Detik
1) 3.33
2) 3.53
3) 3.43
4) 3.43
5) 3.44
6) 3,39
7) 3,72
8) 3,57
9) 3,46
10) 3,54
Rata-rata Waktu Eksekusi dalam Detik: 3,484
Setelah hasil ini kita dapat mengatakan bahwa Vanilla JS lebih cepat dari jQuery. Satu-satunya alasan Vanilla JS bukanlah perpustakaan atau kerangka kerja. Itu hanyalah JavaScript biasa. Tidak perlu mengkompilasi kode pengembang dan membuatnya dalam bentuk yang dapat dimengerti oleh browser. Sebab, seperti kita ketahui, browser hanya mendengarkan JavaScript, salah satu dari tiga sahabat tersebut.
