Tôi có nên sử dụng jQuery.each() không?

Question

Tôi đang lặp lại rất thường xuyên trên các mảng đối tượng và đã sử dụng jQuery.each(). Tuy nhiên, tôi đang gặp vấn đề về tốc độ và bộ nhớ và một trong những phương pháp được gọi nhiều nhất theo profiler của tôi là jQuery.each(). Từ trên đường về hiệu suất của nó là gì? Tôi có nên chuyển sang vòng lặp đơn giản không? Tất nhiên tôi cũng đang sửa nhiều vấn đề trong mã của riêng tôi.

Answer 1

Mã nguồn của jQuery từng là như sau (Cảm ơn bạn John Resig và MIT License):

each: function(object, callback, args) { 
    var name, i = 0, length = object.length; 

    if (args) { 
     if (length === undefined) { 
      for (name in object) 
       if (callback.apply(object[ name ], args) === false) 
        break; 
     } else 
      for (; i < length;) 
       if (callback.apply(object[ i++ ], args) === false) 
        break; 

    // A special, fast, case for the most common use of each 
    } else { 
     if (length === undefined) { 
      for (name in object) 
       if (callback.call(object[ name ], name, object[ name ]) === false) 
        break; 
     } else 
      for (var value = object[0]; 
       i < length && callback.call(value, i, value) !== false; value = object[++i]){} 
    } 

    return object; 
} 

Như bạn có thể theo dõi và thấy, trong nhiều trường hợp nó được sử dụng một cơ sở cho vòng lặp nơi mà chi phí duy nhất thực sự chỉ là chính cuộc gọi lại. Không nên tạo sự khác biệt về hiệu suất.

CHỈNH SỬA: Điều này xảy ra với việc nhận ra rằng phí trên bộ chọn đã xảy ra và bạn được cung cấp một dải dân cư object.

Answer 2

Một cách để đảm bảo bạn đang tận dụng tối đa jquery là lưu trữ mảng kết quả được trả về trong biến thay vì duyệt lại DOM mọi lúc bạn cần để có được thứ gì đó.

Ví dụ về những gì không nên làm:

$('.myLinks').each(function(){ 
    // your code here 
}); 
$('.myLinks').each(function(){ 
    // some more code here 
}); 

Better thực hành:

var myLinks = $('.myLinks'); 
myLinks.each(function(){ 
    // your code here 
}); 
myLinks.each(function(){ 
    // some more code here 
}); 

Answer 3

Phương pháp này sẽ cho bạn một sự cải thiện đáng kể tốc độ.

var elements = $('.myLinks').get(), element = null; 
for (var i = 0, length = elements.length; i < length; i++) { 
    element = elements[i]; 
    element.title = "My New Title!"; 
    element.style.color = "red"; 
} 

Caching cũng sẽ cải thiện hiệu suất.

function MyLinkCache() { 
    var internalCache = $('.myLinks').get(); 

    this.getCache = function() { 
     return internalCache; 
    } 

    this.rebuild = function() { 
     internalCache = $('.myLinks').get(); 
    } 
} 

Trong sử dụng:

var myLinks = new MyLinkCache(); 

function addMyLink() { 
    // Add a new link. 
    myLinks.rebuild(); 
} 

function processMyLinks() { 
    var elements = myLinks.getCache(), element = null; 
    for (var i = 0, length = elements.length; i < length; i++) { 
     element = elements[i]; 
     element.title = "My New Title!"; 
     element.style.color = "red"; 
    } 
} 

Answer 4

This article (# 3) chạy một số xét nghiệm hiệu suất và phát hiện ra rằng jQuery .each chức năng là khoảng 10x chậm như javascript bản địa cho vòng lặp.

^{Từ 10 Ways to Instantly Increase Your jQuery Performance - 3. Use For Instead of Each}
Sử dụng Firebug, nó có thể đo thời gian mỗi hai chức năng cần thiết để chạy.

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

Kết quả trên là 2ms cho mã nguồn gốc, và 26ms cho "mỗi" phương pháp của jQuery. Với điều kiện tôi đã thử nghiệm nó trên máy tính cục bộ của mình và chúng không thực sự làm bất cứ điều gì (chỉ là một hoạt động điền mảng đơn giản), mỗi hàm của jQuery mất hơn 10 lần miễn là JS "for" loop. Điều này chắc chắn sẽ tăng khi xử lý các công cụ phức tạp hơn, như thiết lập thuộc tính CSS hoặc các thao tác thao tác DOM khác.

Answer 5

Sử dụng chức năng gốc thường sẽ là nhanh hơn hơn là trừu tượng, chẳng hạn như phương thức JQuery.each(). Tuy nhiên, phương thức JQuery.each() là dễ dàng hơn để sử dụng và yêu cầu ít mã hóa hơn về phía bạn.

Thật ra, không phải ai là lựa chọn đúng hay sai mà không có bất kỳ ngữ cảnh nào. Tôi là người phản đối rằng chúng ta nên viết mã dễ dàng hơn trước, giả sử nó tốt/legilble/clean code. Nếu bạn đi vào một tình huống, chẳng hạn như một trong những bạn đang mô tả, nơi có một sự chậm trễ đáng chú ý, hơn là thời gian để tìm ra nơi nút cổ chai của bạn và viết mã nhanh hơn.

Thay thế phương thức JQuery.each() trong các trường hợp này có thể trợ giúp, tuy nhiên, không thấy mã của bạn, có thể bạn không bị tắc nghẽn với phương pháp JQuery.