Bộ chọn jQuery, hiệu quả

Question

Tôi đã đọc gần đây hơn về hiệu quả của các công cụ chọn khác nhau. Tôi biết rằng jQuery sử dụng công cụ Sizzle và this blog post về một số nội dung jQuery đã đề cập rằng công cụ Sizzle sẽ tách bộ chọn của bạn thành một mảng rồi phân tích từ trái sang phải.

Sau đó, từ phải sang trái, bắt đầu giải mã từng mục bằng cụm từ thông dụng. Điều này cũng có nghĩa là phần bên phải của bộ chọn của bạn phải càng cụ thể càng tốt - ví dụ: tên id hoặc thẻ.

Câu hỏi của tôi là cho dù đó là hiệu quả hơn để chạy một selector với chỉ ID tiết hoặc ghi tên thẻ cũng như:

var div = $('#someId'); 
//OR 
var div = $('div#someId'); 

Kể từ khi tôi viết CSS của tôi dưới hình thức div#someId tôi có xu hướng để làm bộ chọn của tôi theo cùng một cách, tôi có gây ra Sizzle để thực hiện công việc phụ hay không (giả sử QuerySelectorAll không khả dụng)?

Answer 1

jQuery và Sizzle tối ưu hóa bộ chọn #id^[source] to document.getElementById(id). Tôi nghĩ rằng họ không thể tối ưu hóa nó như thế này với tag#id.

Đầu tiên nhanh hơn.

BTW chỉ định tên thẻ cho bộ chọn #id được chỉ định quá mức, vì chỉ có thể có một thẻ có id đã cho trên tài liệu. Việc chỉ định quá mức sẽ chậm hơn even in CSS.

Answer 2

var div = $('#someId'); //should be faster 

jQuery sẽ sử dụng getElementById() cho selector trên

var div = $('div#someId'); //would probably preform slower due to finding all the divs first 

jQuery sẽ sử dụng getElementsByTagName(), sau đó lặp lại mặc dù các mảng của các yếu tố cho selector trên

Bạn cũng nên nhớ, tên thẻ nên chắc chắn được sử dụng với bộ chọn lớp (nếu có thể)

var div = $('div.myclass') //faster than the statement below 

so

var div = $('.myclass') //slower 

Answer 3

Nếu bạn đang sử dụng jQuery, bạn có thể giả định một trình duyệt với getElementById. $('#someId') có thể được chuyển đổi thành document.getElementById('someId'). $('div#someId') sẽ không được, vì vậy sẽ mất tên thẻ nhanh hơn.

jsPerf demonstrating this. Sự khác biệt là rất lớn.

Answer 4

JsPerf: http://jsperf.com/jquery-id-vs-tagname-id

Người đầu tiên sẽ là nhanh hơn bởi vì nó chỉ có để kiểm tra id. Người thứ hai chạy cùng một kiểm tra VÀ phải đảm bảo rằng tên thẻ là chính xác. div#id sẽ không cung cấp cho bạn thành phần có id id trừ khi đó là div

Answer 5

Thay vì suy đoán, hãy đo lường nó!

Đây là trường hợp thử nghiệm với trang này được tải, sau đó khớp một phần tử ngẫu nhiên với cả hai phương pháp.

Đảm bảo bạn cuộn xuống dưới cùng.

http://jsperf.com/which-jquery-sizzle-selector-is-faster#runner

Như bạn có thể mong đợi, một id đơn giản là nhanh hơn so với một trình độ thẻ (giảm đến getElementByID). Điều này giống nhau khi sử dụng các lớp.

Chọn bằng ID nhanh hơn rất nhiều so với lựa chọn theo lớp, chủ yếu vì ID được đảm bảo là duy nhất.

Answer 6

Bạn có thể xem từ mã nguồn tại đây: http://code.jquery.com/jquery-1.6.2.js trong hàm init.

Bộ chọn nhanh nhất là $('') chỉ trả về đối tượng jQuery trống ngay lập tức.

$('body') là tới, mà jQuery chuyển đổi để document.body

Tiếp theo là $('#id') trong đó sử dụng document.getElementById('id').

Bất kỳ công cụ chọn nào khác như $('div#id') sẽ chỉ trở thành một cuộc gọi đến $(document).find('div#id'). find() rất phức tạp so với bất kỳ giải pháp nào khác và sử dụng Sizzle JS để chọn div.