CSS và jQuery Selector Speed ​​

Question

Trong jQuery bất cứ khi nào tôi gặp phải một cái gì đó như thế này:

$("div#MyDiv")..... 

Tôi thường nói với các nhà phát triển: "Đừng bận tâm đặt div trước #MyDiv, selectors ID là nhanh nhất. " I E.

$("#MyDiv").... 

Điều này là do sau này sẽ treo trực tiếp vào document.getElementById thay vì phải quét DOM cho tất cả <div> yếu tố đầu tiên.

Câu hỏi của tôi là, thực hiện các quy tắc tương tự áp dụng cho bộ chọn CSS? I E. chứ không phải là:

div#MyDiv 
{ 
} 

là nó nhanh hơn để có chỉ đơn giản ?:

#MyDiv 
{ 
} 

(Tôi nhận ra rằng selectors CSS là cực kỳ nhanh chóng anyway, do đó trong thực tế không phải sẽ làm cho một sự khác biệt đáng kể.)

Nhiều Cảm ơn

EDIT

Bất kỳ liên kết hoặc tham chiếu nào có thể hữu ích cho các mục đích của cuộc thảo luận này. Cảm ơn :-)

Answer 1

Tôi muốn nói rằng đó là vô cùng khó khăn rằng nó tạo ra sự khác biệt trong thế giới thực. Về lý thuyết, vâng, có ít yêu cầu kiểm tra hơn (vì div#foo thực sự cần phải là div để khớp với công cụ chọn, theo the spec). Nhưng tỷ lệ cược của nó tạo nên sự khác biệt thực sự trong một ứng dụng trình duyệt thế giới thực? Gần bằng không.

Điều đó nói rằng, tôi luôn là khi tôi thấy những thứ như div#foo trong các ứng dụng HTML. HTML chỉ có một thuộc tính loại ID (id), vì vậy không cần phải có thêm tiêu chuẩn. Bạn làm cho công cụ chọn CSS (hoặc của trình duyệt hoặc jQuery) làm việc khó hơn để tìm ra ý của bạn, bạn làm cho bộ chọn mong manh (nếu ví dụ div trở thành một ví dụ footer), v.v., và tất nhiên bạn do để bản thân mở cho việc triển khai trình chọn ẩn không nhận ra rằng nó có thể tìm kiếm thứ gì đó bằng ID và rồi kiểm tra xem đó có phải là div và xem qua tất cả các div s. (Việc thực hiện như vậy tồn tại? Có thể, bạn không bao giờ biết.) Chặn một số trường hợp cạnh, nó luôn làm cho tôi nghĩ rằng ai đó không hoàn toàn biết những gì họ đang làm.

Vì vậy, đối với tôi, tốc độ không phải là đối số chính. Vô nghĩa là. ;-)

Answer 2

có điều này nhanh hơn vì tốc độ phân tích cú pháp và vì trình duyệt không được kiểm tra xem phần tử cũng có phải là <div> hay không. (đối với một vài quy tắc khác biệt về tốc độ không thể nhận ra bởi người dùng)

Answer 3

Theo this Mozilla article, nó tạo sự khác biệt mặc dù một phút. (Lưu ý rằng trong khi bài viết đó thảo luận về giao diện người dùng kiểu XUL, công cụ bố cục Gecko được sử dụng cả hai để hiển thị giao diện người dùng của Firefox và các trang Web mà nó tải.)

ID có nghĩa là áp dụng cho một phần tử duy nhất trong DOM anyway, do đó, hiệu suất hit phát sinh do cố gắng để phù hợp với tên thẻ là hoàn toàn không cần thiết, cho dù đáng kể hay không. Không phải đề cập đến nó sẽ lãng phí một vài byte trong stylesheet của bạn là tốt.