jQuery merupakan framework JavaScript yang banyak digunakan dan sangat mengesankan, tetapi ada beberapa hal yang harus kita perhatikan dalam membuat kode-kodenya karena hal ini sangat mempengaruhi kecepatan pemanggilan/load jQuery. Kadang kita berharap dengan menggunakan framework jQuery membuat tampilan blog kita lebih indah dan profesional tapi justru membuat kecepatan loading halaman-halaman blog kita menjadi berat. Memang banyak faktor yang mempengaruhi kecepatan loading halaman blog kita, salah satunya adalah penulisan kode jQuery yang kurang tepat. Beberapa saat yang lalu Blogger Tune-Up pernah membahas tentang "Manajemen Script jQuery" dan "Memahami dan Mengatasi Konflik Script jQuery" dan berharap teman-teman blogger sudah memahaminya karena bahasan sekarang lebih mengarah ke penulisan script yang lebih spesifik.
1. Gunakan selector yang lebih spesifik
Jika kita menulisakan kode jQuery untuk mencari elemen tertentu, maka semakin banyak informasi yang diberikan akan semakin cepat proses penemuan elemen yang dimaksud. Disarankan menggunakan ID untuk mempercepat pencarian elemen dan hindari menggunakan class.
Teknik ini sama dengan proses pencarian alamat rumah, semakin lengkap alamat semakin cepat proses penemuan. Tetapi jika kita hanya memberikan sedikit informasi maka pencarian elemen akan dilakukan pada seluruh struktur DOM hingga ditemukan dan ini memperlambat proses load script, perhatikan contoh:
$(".item")
Penulisan kode dibawah ini akan lebih cepat dari kode diatas:$("#item") // menggunakan ID bukan class
$("p.satu .item") // tentukan lokasi yang spesifik
2. Sederhanakan Beberapa Selektor (Multiple Selectors)
Jika kita akan menggunakan fungsi yang sama dengan elemen yang berbeda, maka dimungkinkan untuk menggabungkan beberapa selektor untuk mempercepatnya dan menghindari terulangnya pembacaan DOM yang sama atau tidak diperlukan.
// jelek
$("p#satu").hide();
$("p#dua").hide();
$("p#tiga").hide();
// baik
$("p#satu, p#dua, p#tiga").hide();
3. Gunakan Beberapa Properti (Properties) dan Nilai (Values)
Beberapa metode jQuery mampu menerima beberapa properti dan nilai bukan hanya sepasang properti dan nilai. Menuliskan beberapa properti sekaligus akan dapat membantu mempercepat performa jQuery dan mengurangi jumlah objek-objek jQuery yang kita tuliskan.
// jelek
$("img#artikel").attr('src', 'http://blogku.com/image.jpg');
$("img#artikel").attr('alt', 'Gambar Artikel');
$("img#artikel").attr('title', 'Tentang Blog');
// baik
$("img#artikel").attr({
'src': 'http://blogku.com/image.jpg',
'alt': 'Gambar Artikel',
'title': 'Tentang Blog'
});
4. Selalu Gunakan $(this)
Jika kita menggunakan selektor yang melintasi DOM dalam mencari elemen untuk melakukan fungsi tertentu dan elemen tersebut sudah tertuliskan sebelumnya maka kita dapat menuliskan fungsi tersebut dengan menggunakan $(this).
Kode dibawah ini akan melintasi DOM sebanyak dua kali hanya untuk mengambil elemen yang sama:
$("#item").each(function() {
$("#item").removeAttr('style');
});
Kode dibawah ini lebih efisien karena informasi elemen sudah tertuliskan sebelumnya dan kita hanya perlu memanggilnya dengan $(this):
$("#item").each(function() {
$(this).removeAttr('style');
});
5. Tambahkan Style dengan Class atau ID
Jika kita ingin menambahkan beberapa style untuk suatu elemen, lebih baik kita menggunakan CSS dalam menetapkan suatu style melalui class atau ID, dan kemudian kita cukup menambahkan class atau ID pada elemen tersebut.
Buatlah sebuah style:<style type="text/css">Hindari menggunakan metode dibawah ini:
.sidebar {
background: #141414;
color: #fff;
padding: 5px 0px;
}
</style>
$("p").css({
'background': '#141414',
'color': '#fff',
'padding': '5px 0px'
});
Lebih baik menggunakan metode dibawah ini:$("p").addClass("sidebar");
6. Gunakan Pengikatan (Chaining)
Jika kita telah memilih suatu elemen, kita dapat mengikat perintah-perintah menggunakan .end() bukan melintaskan berkali-kali berbagai DOM untuk menemukan elemen yang sama. Untuk memahami pengikatan (chaining) mungkin diperlukan kesabaran dalam melakukan trial and error agar kita dapat menguasainya. Perintah-perintah tertentu mengharuskan kita menggunakan .end() dalam mengikat suatu elemen dan ada juga yang tidak mengharuskan. Untuk memahami pengikatan (chaining) Blogger Tune-Up akan membahas dalam artikel terpisah.
//jelek
$("div").fadeOut();
$("div p.satu").slideUp();
$("div p.dua").addClass('style');
//baik
$("div")
.fadeOut()
.find('p.satu')
.slideUp()
.end()
.find('p.dua')
.addClass('style');
Itulah beberapa hal yang bisa kita gunakan untuk menuliskan kode jQuery agar lebih efisien. Banyak sekali sumber yang bisa kita pelajari untuk dapat membantu kita dalam membuat script jQuery yang efektif dan efisien. Happy blogging... :)
