jQuery: Thêm ngữ cảnh vào bộ chọn nhanh hơn nhiều so với việc tinh chỉnh bộ chọn của bạn?

Question

Tôi chỉ nhận thấy rằng việc thêm ngữ cảnh vào bộ chọn nhanh hơn nhiều so với việc tinh chỉnh bộ chọn của bạn.

$('li',$('#bar')).append('bla');

là gấp đôi nhanh hơn:

$('#bar li').append('bla');

Đây có phải là thường đúng không?

Answer 1

thêm bối cảnh cho bộ chọn là nhanh hơn nhiều so với tinh chỉnh bộ chọn của bạn

Điều này đúng trong trường hợp tổng quát. Đối với các ví dụ cụ thể của bạn tuy nhiên nó không nhất thiết phải đúng đối với jQuery < = 1.2.6.

Tối đa và bao gồm jQuery 1.2.6 công cụ chọn hoạt động theo cách "từ trên xuống" (hoặc "từ trái sang phải"). Có nghĩa là cả hai ví dụ của bạn sẽ hoạt động như thế này (khoảng):

var root = document.getElementById('bar'); 
return root.getElementsByTagName('li'); 

jQuery 1.3.x (ví dụ, Sizzle, mà jQuery nhúng) introduced a "bottom up" (or "right to left") approach để truy vấn DOM. Vì vậy, $('#bar li') bây giờ sẽ trở thành (gần):

var results = []; 
var elements = document.getElementsByTagName('li'); 
for(var i=0; i < elements.length; i++) { 
    var element = elements[i]; 
    var parent = element.parentNode; 
    while(parent) { 
     if(parent.id == 'bar') { 
      results.push(element) 
      break; 
     } 
     parent = parent.parentNode; 
    } 
} 
return results 

Có những lợi ích và nhược điểm cho cả hai cách tiếp cận. Bạn tìm thấy một trong những nhược điểm.

Sửa: vừa phát hiện ra từ this discussion rằng sizzle thân bây giờ làm cho một miễn trừ đặc biệt của bộ chọn nơi #id là lần đầu tiên. Nó sử dụng nó như bối cảnh gốc, tăng tốc mọi thứ lên một chút. Điều này sẽ giảm bớt nếu không loại bỏ sự khác biệt về tốc độ mà bạn đang thấy.