jQuery Performance Tips - Part 2

Hôm nay mình chia sẻ tiếp phần 2 cho loạt bài làm sao sử dụng jQuery một cách tối ưu, nhanh hơn và tiện dụng hơn. Ở đây không phải là những thứ mình phát minh ra, mà cũng tìm kiếm trên google rồi sau đó tập hợp lại để chia sẻ tới mọi người, nên có thể không thể chia sẻ nguồn cho mọi người được ^^.

  5 - Hạn chế gọi hàm trong vòng lặp

    Đây là điều dĩ nhiên không chỉ dành cho jQuery mà dành cho tất cả mọi ngôn ngữ lập trình. Nếu có một cách khác thay thế tốt hơn, chúng ta nên dùng vì việc gọi hàm trong vòng lặp sẽ làm chậm rất đáng kể và tốn tài nguyên khá nhiều. Ví dụ ta có đoạn code như bên dưới:

var items = [....]; // Giả sử có 100 phần tử 
var list = $('#list'); // Giả sử là đối tượng <select>
for(var i = 0; i < items.length; i++)
{
    list.append($('<option />').attr('value', items[i]).html(i));
}

    Ở đoạn code này, chúng ta gọi tới 3 hàm trong vòng lặp. điều này hạn chế rất nhiều về mặt tốc độ. Chúng ta có thể thay thế bằng đoạn code sau:

var items = [....]; // Giả sử có 100 phần tử 
var list = $('#list'); // Giả sử là đối tượng <select>
var str = '';
for(var i = 0; i < items.length; i++)
{
    str += '<option value="'+i+'">'+items[i]+'</option>';
}
list.html(str);

6 - Nếu số phần tử trong mảng lớn, thay thế phép nối chuỗi bằng join() các phần tử.

   Đoạn code trên, chúng ta có thể cải tiến thêm tí nữa để tăng tốc nhanh hơn. Nhưng nếu số lượng phấn tử không quá lớn thì tốc độ giữa tip 5 và tip 6 không cách xa nhau bao nhiêu. (Tính bằng ms nên cũng không có gì đáng ngại lắm ^^)

var items = [....]; // Giả sử có 1000 phần tử
var list = $('#list'); // Giả sử là đối tượng <select>
var temp = [];
for(var i = 0; i < items.length; i++)
{
    temp[i] = '<option value="'+i+'">'+items[i]+'</option>';
}
list.html(temp.join(''));

7 - Hàm for nhanh hơn $.each nhưng vẫn cứ xài $.each

    Trong jquery cung cấp cho chúng ta một helper $.each giúp chúng ta thực hiện vòng lặp. Helper này chậm hơn so với hàm for (hàm built-in của javascript) nhưng đây là trường hợp ngoại lệ mình khuyên các bạn nên dùng $.each thay vì dùng for. Chắc chắn các bạn sẽ có sự thắc mắc tại đây, chúng ta cùng xem sự so sánh bên dưới để hiểu rõ vì sao mình khuyên như vậy.

console.time('TestNative');
var length = myArray.length;
for( i=0; i < length; i++){
  myArray[i];
}
console.timeEnd('TestNative');

console.time('TestjQuery');
jQuery.each(myArray, function(i, val) {
  val;
});
console.timeEnd('TestjQuery');

    Và dưới đây là kết quả test

FOR loop
Array size    Time
==========    ======
10,000        7ms
100,000       62ms
1,000,000     613ms


jQuery .each() loop
Array size    Time
==========    ======
10,000        10ms
100,000       177ms
1,000,000     1100ms

    Số lượng phần tử trong mảng lên tới 10.000 chỉ cách biệt nhau 3ms. Và mình chắc chắn một mảng thông thường của javascript khó có thể đạt ngưỡng 10.000 phần tử, nên sự chênh lệch này gần như không có. Vậy chúng ta cứ an tâm mà dùng $.each

---

jQuery Performance Tips - Part 1
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