jQuery adalah pustaka JavaScript yang cepat, kecil, dan kaya fitur yang telah mengubah cara kita menulis JavaScript selama lebih dari satu dekade. Kerangka kerja modern seperti React dan Vue semakin populer, dan jQuery masih bekerja dengan sempurna, tetapi menurut saya sistem penyedia secara keseluruhan sangat sederhana, jQuery banyak digunakan dan dicintai, dan ada banyak buku, dokumen, dan sebagainya. Namun, seperti halnya pustaka apa pun, mungkin ada hambatan kinerja jika digunakan secara tidak benar. Berikut ini adalah beberapa teknik pengoptimalan kinerja jQuery yang akan membantu Anda membuat aplikasi web yang efisien dan responsif. Metode untuk meningkatkan kinerja jQuery telah dikumpulkan di sini dengan cara yang paling efisien.
1. Meminimalkan Manipulasi DOM
Tindakan yang merupakan jebakan kinerja yang sangat umum untuk jQuery adalah manipulasi DOM yang tidak perlu. Akses dan manipulasi DOM adalah operasi yang mahal. Untuk menghindari masalah kinerja:
- Caching Elemen DOM - Daripada mencari DOM beberapa kali, simpan elemen yang paling sering diakses dalam variabel. Sebagai contoh:
var $button = $("#myButton");
$button.text("Click me");
- Perubahan DOM Batch: Menggabungkan beberapa penyesuaian dom ke dalam satu operasi. Gunakan metode seperti. append () atau. html () untuk mengganti beberapa elemen daripada memodifikasinya.
 |
| sumber: idcloudhost.com |
2. Gunakan Pendelegasian Peristiwa
Performa dapat menurun, terutama untuk elemen yang ditambahkan secara dinamis, ketika melampirkan event handler ke sejumlah besar elemen. Delegasi peristiwa memecahkan masalah ini dengan menambahkan hanya satu penangan peristiwa ke elemen induk dan mendengarkan peristiwa yang ditembakkan pada anak-anaknya.
Sebagai contoh, sebagai ganti dari:
$(".child").on("click", function() {
alert("Child clicked");
});
Gunakan:
$("#parent").on("click", ".child", function() {
alert("Child clicked");
});
Strategi ini menghemat memori dan mengoptimalkan kecepatan eksekusi untuk informasi yang terus berkembang.
3. Mengoptimalkan Selektor
Selain itu, meskipun penyeleksi jQuery yang kuat sangat berguna untuk mendapatkan elemen, Anda juga harus menghindari penggunaan lebih dari: all* atau tag* atau ids, jika tidak, kinerja mungkin akan menjadi lambat. Untuk mengoptimalkan:
- Hindari Pemilih Kelas sebanyak mungkin: Ini adalah cara tercepat untuk memilih elemen dan ID yang unik.
$("#myElement");
- Batasi Cakupan: Batasi konteks penyeleksi Anda ke elemen induk tertentu untuk mempercepat pencarian.
$(".container .item");
- Hindari Wild: Memilih semua elemen menggunakan $(“*”) harus dihindari karena akan menghabiskan lebih banyak sumber daya.
4. Memanfaatkan Metode Bawaan
Ada banyak fungsi utilitas di jQuery yang dioptimalkan untuk kinerja. Untuk melakukannya, tanpa harus mengulang dari awal, gunakan metode berikut ini:
- Gunakan .each() untuk perulangan objek jQuery, bukan perulangan vanilla for atau forEach().
$(".items").each(function(index, element) {
$(element).text("Item " + index);
});
- Gunakan perantaian untuk memanggil lebih dari satu metode pada kumpulan elemen yang sama.
$("#myElement")
.addClass("active")
.css("color", "red")
.text("Hello World");
5. Kurangi Penggunaan Plugin
Ekosistem plugin jQuery sangat kaya dan bermanfaat, tetapi terlalu bergantung pada plugin dapat membuat kode Anda membengkak dan memperlambat kinerja. Beberapa plugin mungkin memiliki bloat yang tidak perlu, jadi periksa secara aktif apakah plugin tersebut dibutuhkan, ringan, dan terawat dengan baik. Jika memungkinkan, tulis kode Anda sendiri yang spesifik untuk aplikasi Anda.
6. Optimalkan Animasi
Animasi sering kali menjadi sumber masalah kinerja. Untuk meningkatkan efisiensinya:
- Gunakan .animate() Jarang: Jangan menganimasikan beberapa properti sekaligus.
- Mainkan Transisi CSS yang bagus: Selalu pilih animasi dan transisi CSS, dengan memperluasnya ke akselerasi perangkat keras.
- Kurangi Pengecatan Ulang & Perulangan: Hindari memperbarui properti yang memengaruhi tata letak seperti lebar, tinggi, posisi, dll.
7. Meminimalkan dan Mengompresi Kode
Versi kecil dari jQuery, serta skrip Anda sendiri, akan dimuat alih-alih file biasa, yang juga menghasilkan ukuran file yang lebih kecil secara keseluruhan dan waktu pemuatan yang lebih cepat. Untuk kode JavaScript, kami memiliki alat bantu seperti UglifyJS dan Terser yang dapat membantu. Aktifkan kompresi Gzip di server Anda dan kurangi ukuran berkas lebih lanjut.