JQuery Tìm Performance

Question

Tôi thấy rằng điều này:

var $colSelect = $('#stuff').find('.things'); 
$($colSelect).find('img, input, select').addClass("foo"); 

là chậm hơn thì đây:

var $colSelect = $('#stuff').find('.things'); 
$($colSelect).find('img').addClass("foo");      
$($colSelect).find('input').addClass("foo");     
$($colSelect).find('select').addClass("foo"); 

bất cứ ai có thể giúp tôi hiểu tại sao đó là trường hợp? Cụ thể, tôi nhận thấy sự gia tăng hiệu năng trong IE8.

Answer 1

trong trường hợp thứ 2, cây con DOM dưới $ colSelect sẽ được chuyển qua ba lần. Đó là lý do tại sao nó sẽ chậm.

Answer 2

Cập nhật 2: Đã sửa đổi để phản ánh lưới như bản chất của những gì bạn có. Dưới đây là những phát hiện của tôi với jQuery 1.7.1 (một là mã hàng đầu của bạn, hai là mã dưới cùng của bạn). Tôi chỉ lấy 5 thứ chậm nhất vì mọi thứ khác không quan trọng.

Như bạn thấy, lý do mà một có lẽ là chậm hơn so với người kia là do chức năng sortOrder (minified như U) và/hoặc Array.sort. Cả hai đều không xuất hiện trong hai. Vấn đề chắc chắn là phải quay trở lại và sắp xếp kết quả. makeArray (minified as s above) dường như mất ít thời gian hơn trong 1, nhưng điều đó không bù đắp cho việc phân loại đã được thực hiện.

Cập nhật: I created a jsFiddle to play around with it và tôi không thấy sự khác biệt đáng chú ý trong IE8 giữa hai phương pháp. Có lẽ nhiều ngữ cảnh hơn là cần thiết vào những gì trang này trông giống như/những gì phong cách đang được áp dụng. Nó có thể có một cái gì đó để làm với việc hiển thị trình duyệt mà gây ra mã của bạn để hành động khác nhau.

IE8 có trình tạo hồ sơ được tạo sẵn.

1. Đến Developer Tools (F12)
2. Nhấp vào "Profile" tab
3. Nhấp vào nút "Start"
4. Làm việc Javascript taht bạn không cần thực hiện
5. Bấm dừng lại và phân tích những phát hiện. Hãy tìm những thứ chậm. Làm lại chúng.
6. Lặp lại

Mẹo để làm cho javascript của bạn tốt hơn. Cố gắng không gọi $ ($ colSelect) mọi lúc. Lưu nó vào một biến như vậy.

var $colSelect = $($('#stuff').find('.things')); 

Answer 3

tôi đoán sẽ là cho bộ chọn đầu tiên, jQuery phải phân tích chọn, hãy gọi của JavaScript getElementsByTagName cho mỗi và tham gia vào kết quả (thậm chí có thể ra lệnh cho họ theo thứ tự vị trí của họ trong DOM).

Trường hợp thứ hai có các cuộc gọi chuyển tiếp thẳng tới JavaScript getElementsByTagName, không cần thực hiện các thao tác khác.

Trang này so sánh hiệu suất: http://jsperf.com/jquery-selector-performance-problems

Answer 4

Làm thế nào về điều này?

$('#stuff .things') 
    .find('img').addClass("foo").end() // .end() returns to '#stuff .things' 
    .find('input').addClass("foo").end() 
    .find('select').addClass("foo");