jQuery Performance Tips - Part 1

Đã là dân làm web thì có lẽ jQuery không còn là điều xa lạ hay mới mẻ nữa. jQuery là một bộ thư viện rất hữu dụng cho việc phát triển ứng dụng web khi muốn viết javascript. Xài jQuery không khó, thậm chí rất đơn giản. Nhưng xài như thế nào để tối ưu và xài như thế nào để cải thiện tốt về tốc độ có lẽ không phải ai cũng biết. Bài viết sau của mình sẽ tóm tắt lại các kiến thức mà mình thu nhặt được giúp cải thiện tốc độ jQuery.

1 - Truy xuất đối tượng với #id là nhanh nhất

    Trong jQuery, truy xuất đối tượng (selector) thông qua thuộc tính ID là nhanh nhất. Vì $("#id") sẽ ánh xạ trực tiếp tới hàm getElementById("id") vốn là hàm built-in của javascript. Mà đã là hàm built-in thì luôn luôn nhanh hơn hàm do người dùng định nghĩa.
    Nếu muốn lấy 1 list các đối tượng, chúng ta cố gắng dùng 1 đối tượng cha có ID gần nhất, sau đó chúng ta mới lấy tập hợp con của nó. Ví dụ như chúng ta có đoạn html như bên dưới.

<ul id="den_giao_thong">
 <li>
  <input type="radio" class="tat" name="den" value="do" /> Đỏ
 </li>
 <li>
  <input type="radio" class="tat" name="den" value="vang" /> Vàng
 </li>
 <li>
  <input type="radio" class="bat" name="den" value="xanh" /> Xanh
 </li>
</ul>

    Để lấy danh sách các <input> chúng ta có thể dùng cách sau:

var inputs = $("#den_giao_thong input");

2 - Dùng tagName trước class

    Mức độ nhanh thứ 2 trong jQuery là lấy đối tượng theo tagName. Lý do cũng tương tự cái bên trên, đó là do nó ánh xạ trực tiếp vào hàm built-in getElementsByTagName của Javascript. Cũng với ví dụ trên, nếu chúng ta muốn lấy cái đèn nào được bật thì chúng ta sử dụng cách sau:

var denBat = $("#den_giao_thong input.bat");

3 - Cache đối tượng jQuery

    Chúng ta nên sử dụng một biến để lưu trữ đối tượng jQuery nếu như đối tượng này phải thực hiện nhiều lệnh. Ví dụ chúng ta thường hay viết như sau:

$('#traffic_light input.on').click(function(){...});
$('#traffic_light input.on').css('border', '3px dashed yellow');
$('#traffic_light input.on').css('background-color', 'orange');
$('#traffic_light input.on').fadeIn('slow'); 

    Thì chúng ta nên viết lại như sau:

var obj = $('#traffic_light input.on');
obj.click(function(){...});
obj.css('border', '3px dashed yellow');
obj.css('background-color', 'orange');
obj.fadeIn('slow');

    Tuy nhiên, nếu chúng ta dùng đối tượng jQuery chỉ 1 lần duy nhất thì không nên cache đối tượng lại (lưu vào 1 biến như bên trên) vì sẽ bị tác dụng phụ đó ^^

4 - Sử dụng chuỗi hàm jQuery

    Cũng với ví dụ ở mục 3, chúng ta có thể tối ưu thêm một bước là tận dụng sức mạnh chuỗi hàm mà jQuery đã cung cấp. Chúng ta nên viết lại như sau:

$('#traffic_light input.on').click(function(){...})
     .css({
          'border': '3px dashed yellow',
         'background-color': 'orange' 
      })
      .fadeIn('slow');

---

jQuery Performance Tips - Part 2
Optimize front-end to improve performance - Part 4
Optimize front-end to improve performance - Part 3
Optimize front-end to improve performance - Part 2
Optimize front-end to improve performance - Part 1