Tối ưu cách viết Jquery

1. Luôn luôn sử dụng phiên bản jQuery mới nhất

Các nhà phát triển jQuery luôn tìm cách tối ưu để phiên bản sau chạy mượt và dung lượng nhẹ hơn các phiên bản trước . Bạn còn đợi chờ gì nữa mà không vào ngay trang chủ jquery.com để tải phiên bản jquery mới nhất về máy tính của mình.

Có 1 điểm các bạn cần lưu ý : tính đến thời điểm viết bài này phiên bản jQuery mới nhất là 2.0.2, phiên bản này thay đổi rất nhiều thứ ví dụ như : bỏ hỗ trợ ie6, ie7, ie8, bỏ live ... đọc thêm thông tin ở đây.

2.Ưu tiên ID hơn Class

Select theo id sẽ nhanh hơn rất nhiều so với việc dùng class, vì khi bạn select theo id jQuery sẽ dùng luôn hàm navative của trình duyệt là getElementByID, các bạn biết đấy cái nào có sẵn cũng tốt mà :D.

Để kiểm tra xem tốc độ giữa 2 việc này bạn hãy tạo 1 tài liệu html với nội dung đơn giản như sau

<div id="list"></div>

Sau đó bạn bật console lên và paste đoạn code này vào

// 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');

3.jQuery làm việc từ phải qua trái

Điều này có vẻ hơi ngược một chút. Nhưng đó là cách mà jQuery làm việc, chúng ta cùng xét ví dụ sau để hiểu rõ hơn về điều này.

 <div id="box">
   <p> Hello </p>
 </div>

---

//Cach1
console.time('a');
$('#box p');
console.timeEnd('a');

// Cach 2.
console.time('b');
$('p','#box');
console.timeEnd('b');

Cách 1: Đầu tiên jquery sẽ chọn ra tất cả các thẻ p sau đó từ các thẻ p chọn được đó mới tìm xem thẻ p nào có cha với id là box, thử tưởng tượng tài liệu của bạn có 1000 thẻ p thì sẽ mất rất nhiều thời gian để select. => Không tối ưu

Cách 2: jQuery sẽ tìm phần tử có id là box trước sau đó mới tìm các thẻ p trong nó, tìm kiếm 1 thành phần khi biết được sẽ tìm kiếm từ đâu nhanh hơn rất nhiều so với việc " mò kim đáy bể" giống như cách 1

4.Giữ cho code của bạn dễ nhìn hơn

jQuery luôn return ra 1 đối tượng vì vậy bạn có thể hoàn toàn sử dụng cách viết sau:

$('#myID').find('p').fadeIn()

5.Cache

Sử dụng biến trung gian để lưu kết quả select của bạn là cách tốt nhất để tối ưu tốc độ của jQuery

//Cach ket qua select vao bien a
var a = $('#select');
$('#myID').click(function(){
   a.fadeOut();
});

//Khong viet theo cach nay nhe
$('#select').fadeIn();

$('#myID').click(function(){
    $('#select').fadeOut();
});

Cách thứ 2 jQuery phải đi tìm phần tử có id là select tới 2 lần, nếu bạn cache nó vào 1 biến thì lần sau bạn chỉ việc sử dụng biến đó như 1 selector bình thường.

6.Tránh thao tác quá nhiều lên DOM

Bạn nên hạn chế việc tác động quá nhiều lên DOM . Nếu không quá cần thiết bạn lên dùng html hay cho append , prepend, after.

7. Sử dụng find

Khi bạn muốn tìm 1 thành phần con trong 1 thành phần cha , cách tốt nhất bạn lên tìm thành phần cha trước sau đó mới tìm thành phần con.

$('#myID p') => cách này jQuery tìm thẻ p trước sau đó mới tìm thẻ p có cha là #myID

$('#myID').find('p') => cách này tối ưu hơn cách trên vì jQuery tìm #myID trước sau đó tìm p trong myID => Tối ưu