10 Cara Langsung Meningkatkan Kinerja jQuery Anda

() translation by (you can also view the original English article)

Artikel ini akan menyajikan sepuluh langkah mudah yang akan langsung meningkatkan kinerja skrip Anda. Jangan khawatir; tidak ada yang terlalu sulit di sini. Semua orang dapat menerapkan metode ini! Ketika Anda selesai membaca, silakan beritahu kami tahu tips kecepatan Anda.

1. Selalu Gunakan Versi Terbaru

jQuery sedang dalam pembangunan dan perbaikan konstan. John dan timnya selalu meneliti cara-cara baru untuk meningkatkan kinerja program.
Sebagai catatan, beberapa bulan yang lalu, ia merilis Sizzle, library selector yang dikatakan untuk meningkatkan kinerja program hingga 3 kali dalam Firefox.

Jika Anda ingin tetap up to date tanpa harus men-download library-nya beribu-ribu kali, GIYF (Google Is Your Friend), dalam situasi ini juga. Google menyediakan banyak library Ajax untuk dipilih.


  <!-- get the API with a simple script tag -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
		/* and load minified jQuery v1.3.2 this way */
		google.load ("jquery", "1.3.2", {uncompressed: false});
		
		/* this is to display a message box
		   when the page is loaded */
		function onLoad () {
			alert ("jQuery + Google API!");
		}
		
		google.setOnLoadCallback (onLoad);
	</script>

* Catatan Editor: Mungkin, metode yang lebih cepat dan lebih mudah adalah hanya link ke skrip diatas secara langsung. Daripada mengkode manual versi tertentu dari jQuery secara langsung (1.3.2), sebaliknya Anda harus menggunakan 1, yang akan secara otomatis mereferensi versi terbaru dari library.

1
2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

2. Menggabungkan dan Mengecilkan Skrip Anda

Sebagian besar browser tidak mampu memproses lebih dari satu skrip secara bersamaan sehingga mereka mengantrikan mereka -- dan waktu load meningkat.
Dengan asumsi skrip yang akan dimuat pada setiap halaman situs web, Anda harus mempertimbangkan menempatkan mereka semua ke dalam sebuah file tunggal dan menggunakan alat kompresi (seperti milik Dean Edwards) untuk mengecilkan mereka. Ukuran file yang lebih kecil sama dengan waktu load yang lebih cepat.

Tujuan dari mengecilkan JavaScript dan CSS adalah selalu menjaga kualitas operasional kode sekaligus mengurangi jejak byte secara keseluruhan (baik dari segi mentah dan setelah meng-gzip, karena kebanyakan JavaScript dan CSS yang disajikan dari server web produksi telah di-gzip sebagai bagian dari protokol HTTP). -- Dari kompresor YUI, alat yang sangat baik secara resmi jQuery merekomendasikan untuk mengecilkan skrip.

3. Menggunakan For Daripada Each

Fungsi asli selalu lebih cepat daripada rekan-rekan penolong.
Setiap kali Anda melakukan perulangan melalui suatu objek yang diterima sebagai JSON, Anda akan lebih baik menulis ulang JSON Anda dan membuatnya mengembalikan array yang Anda dapat melakukan perulangan lebih mudah.

Menggunakan Firebug, itu mungkin untuk mengukur waktu masing-masing dari dua fungsi yang diperlukan untuk menjalankannya.


	var array = new Array ();
	for (var i=0; i<10000; i++) {
		array[i] = 0;
	}
	
	console.time('native');
	var l = array.length;
	for (var i=0;i<l; i++) {
		array[i] = i;
	}
	console.timeEnd('native');
	
	console.time('jquery');
	$.each (array, function (i) {
		array[i] = i;
	});
	console.timeEnd('jquery');

Hasil di atas adalah 2ms untuk kode asli, dan 26ms untuk metode "each" jQuery. Asal saja saya telah menguji pada mesin lokal dan mereka tidak benar-benar melakukan apa-apa (hanya operasi pengisian array), fungsi each jQuery membutuhkan waktu lebih dari 10 kali dibandingkan perulangan "for" JS asli. Ini tentu akan meningkat ketika berhadapan dengan hal yang lebih rumit, seperti pengaturan atribut CSS atau operasi manipulasi DOM lainnya.

4. Menggunakan Id Daripada Kelas

Jauh lebih baik untuk memilih objek berdasarkan ID karena perilaku library: jQuery menggunakan metode asli browser, getElementByID(), untuk mengambil objek, mengakibatkan query yang sangat cepat.

Jadi, daripada menggunakan teknik seleksi kelas yang sangat berguna, itu layak menggunakan penyeleksi yang lebih kompleks (yang mana jQuery pasti tidak akan gagal untuk menyediakan), tulis selektor Anda sendiri (ya, ini mungkin, jika Anda tidak menemukan apa yang Anda butuhkan), atau menentukan sebuah kontainer untuk elemen yang perlu Anda pilih.


	// Example creating a list and filling it with items
	//  and selecting each item once
	
	console.time('class');
	var list = $('#list');
	var items = '<ul>';
	
	for (i=0; i<1000; i++) {
		items += '<li class="item' + i + '">item</li>';
	}
	
	items += '</ul>';
	list.html (items);
	
	for (i=0; i<1000; i++) {
		var s = $('.item' + i);
	}
	console.timeEnd('class');

	console.time('id');
	var list = $('#list');
	var items = '<ul>';
	
	for (i=0; i<1000; i++) {
		items += '<li id="item' + i + '">item</li>';
	}
	
	items += '</ul>';
	list.html (items);
	
	for (i=0; i<1000; i++) {
		var s = $('#item' + i);
	}
	console.timeEnd('id');

Kode di atas benar-benar menunjukkan perbedaan antara dua cara memilih elemen, menyoroti waktu lebih dari 5 detik yang tidak pernah berakhir untuk memuat cuplikan yang didorong kelas.

5. Memberikan Konteks Pada Penyeleksi Anda

Seperti yang tercantum dalam dokumentasi jQuery,

Konteks node DOM awalnya dilewatkan ke jQuery() (jika tidak ada yang dilewatkan maka konteks akan sama dengan dokumen).
Ini seharusnya digunakan dalam hubungannya dengan penyeleksi untuk menentukan query yang digunakan dengan tepat.

Jadi, jika Anda harus menggunakan kelas untuk menargetkan elemen Anda, setidaknya cegah jQuery dari melintasi seluruh DOM menggunakan penyeleksi yang tepat.

Bukannya

1
2	$('.class').css ('color' '#123456');

selalu pergi untuk penyeleksi dikontekstualisasikan dalam bentuk:

1
2	$(expression, context)

dengan demikian menghasilkan

1
2	$('.class', '#class-container').css ('color', '#123456');

yang berjalan jauh lebih cepat, karena tidak harus melintasi seluruh DOM -- hanya elemen #kelas-kontainer.

6. Cache. SELALU.

Jangan membuat kesalahan atau menggunakan kembali penyeleksi Anda lagi dan lagi. Sebaliknya, Anda harus men-cache-nya dalam sebuah variabel. Dengan cara itu, DOM tidak harus melacak elemen Anda lagi dan lagi.

Jangan pernah memilih elemen beberapa kali di dalam loop JANGAN! Itu akan menjadi pembunuh-kecepatan!


	$('#item').css ('color', '#123456');
	$('#item').html ('hello');
	$('#item').css ('background-color', '#ffffff');
	
	// you could use this instead
	$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');
	
	// or even
	var item = $('#item');
	item.css ('color', '#123456');
	item.html ('hello');
	item.css ('background-color', '#ffffff');
	
	
	// as for loops, this is a big no-no
	console.time('no cache');
	for (var i=0; i<1000; i++) {
		$('#list').append (i);
	}
	console.timeEnd('no cache');
	
	// much better this way
	console.time('cache');
	var item = $('#list');
	
	for (var i=0; i<1000; i++) {
		item.append (i);
	}
	console.timeEnd('cache');

Dan, seperti bagan berikut ini mencontohkan, hasil caching yang jelas bahkan dalam iterasi yang relatif singkat.

7. Menghindari Manipulasi DOM

Manipulasi DOM harus terbatas sebanyak mungkin, karena menyisipkan operasi seperti prepend(), append(), after() agak memakan waktu.

Contoh di atas bisa dipercepat dengan menggunakan html() dan membangun daftar terlebih dahulu.

1
2	var list = '';
3
4	for (var i=0; i<1000; i++) {
5	list += '<li>'+i+'</li>';
6	}
7
8	('#list').html (list);

8. Tanpa concat() String; Gunakan join() untuk String yang Lebih Panjang

Ini mungkin tampak aneh, tapi ini benar-benar membantu untuk mempercepat hal-hal, terutama ketika berhadapan dengan panjang string teks yang harus disambung.

Pertama membuat sebuah array dan mengisinya dengan apa yang Anda miliki untuk digabungkan bersama-sama. Metode join() akan terbukti jauh lebih cepat dari fungsi concat() string.

1
2	var array = [];
3	for (var i=0; i<=10000; i++) {
4	array[i] = '<li>'+i+'</li>';
5	}
6
7	$('#list').html (array.join (''));

Namun, baru-baru ini tes yang dilakukan oleh Tom Trenka memberikan kontribusi terhadap penciptaan grafik berikut.

"Operator += lebih cepat—bahkan lebih dari mendorong fragmen string ke dalam array dan menggabung dengan mereka pada menit terakhir" dan "Sebuah array sebagai string buffer adalah lebih efisien pada semua browser, dengan pengecualian dari Firefox 2.0.0.14/Windows, daripada menggunakan String.prototype.concat.apply." -- Tom Trenka

9. Return False

Anda mungkin telah memperhatikan setiap kali fungsi-fungsi yang tidak mengembalikan false, Anda melompat ke bagian atas halaman.
Ketika berhadapan dengan halaman yang lebih panjang, hasil ini bisa sangat menjengkelkan.

Jadi, bukannya

1
2	$('#item').click (function () {
3	// stuff here
4	});

luangkan waktu untuk menulis


	$('#item').click (function () {
		// stuff here
		return false;
	});

10. Tips Bonus - Cheat-sheet dan Referensi Library

Ini bukanlah tips meningkatkan kecepatan, tapi bisa berakhir, di sekitar jalannya, menjadi salah satu jika Anda meluangkan waktu untuk menemukan jalan Anda melalui cheatsheets dan referensi fungsi.
Hemat waktu Anda dan simpan cheat-sheet dalam jangkauan lengan.

Ikuti kami di Twitter, atau berlangganan NETTUTS RSS Feed untuk lebih banyak tutorial dan artikel pengembangan web.