Phần tử Jquery + hiệu suất chọn lớp

Question

Tôi đã hy vọng $('#childDiv2 .txtClass') hoặc $('#childDiv2 input.txtClass') hoạt động tốt hơn khi chọn yếu tố <input type="text" id="txtID" class="txtClass"/>. Nhưng theo điều này performance analysis$('.txtClass'); là bộ chọn tốt nhất trong số này. Tôi đang sử dụng JQuery 1.7.2 Có ai có lời giải thích cho điều này?

HTML

<div class="childDiv2"> 
    <input type="text" id="txtID" class="txtClass"/> 
    <p class="child">Blah Blah Blah</p> 
</div>​ 

JS

$('.txtClass'); 
$('#childDiv2 .txtClass') 
$('#childDiv2 > .txtClass') 
$('input.txtClass') 
$('#childDiv2 input.txtClass') 

Answer 1

Trình duyệt hiện tại phơi bày một getElementsByClassName() phương pháp rất hiệu quả mà trả về các yếu tố có một lớp nhất định. Đó là lý do tại sao một bộ chọn lớp đơn nhanh hơn trong trường hợp của bạn.

Để xây dựng trên ví dụ của bạn:

$(".txtClass")     => getElementsByClassName() 

$("#childDiv2 .txtClass")  => getElementById(), 
            then getElementsByClassName() 

$("#childDiv2 > .txtClass")  => getElementById(), 
            then iterate over children and check class 

$("input.txtClass")    => getElementsByTagName(), 
            then iterate over results and check class 

$("#childDiv2 input.txtClass") => getElementById(), 
            then getElementsByTagName(), 
            then iterate over results and check class 

Như bạn thấy, nó khá hợp lý cho hình thức đầu tiên là nhanh nhất trên các trình duyệt hiện đại.

Answer 2

Bộ chọn CSS được phân tích cú pháp từ phải sang trái. Vì vậy, ví dụ của bạn

$('#childDiv2 .txtClass') 

sẽ thực hiện hai hành động để hoàn tất. Trước tiên, hãy tìm tất cả các phần tử có lớp txtClass. Sau đó kiểm tra từng phần tử để trở thành phần tử con của phần tử có id là childDiv2.

$('.txtClass') 

Bộ chọn này sẽ chỉ thực hiện một hành động. Tìm tất cả các yếu tố với lớp txtClass

Có một cái nhìn tại this article trên css-tricks.com

Answer 3

var obj = document.getElementById("childDiv"); 
xxx = obj.getElementsByClassName("txtClass"); 

là 30x nhanh hơn.

http://jsperf.com/selectors-perf/6

Answer 4

Hình như nó cũng phụ thuộc vào mật độ của các yếu tố với lớp giữa các yếu tố của các loại.

Tôi đã chạy thử nghiệm với Google Chrome Phiên bản 30.0.1599.69 bằng cách sử dụng JQuery 1.10.1. Hãy thử nó trên một trình duyệt khác và/hoặc sử dụng một phiên bản JQuery khác.

tôi đã cố gắng để chạy các xét nghiệm sau đây:

1. thưa thớt (10% của div có class) link to the test on jsbin

2. Rậm (90% của div có class) link to the test on jsbin

Có vẻ như trong Trường hợp đặc biệtdiv.class sẽ thắng, nhưng trong số Trường hợp thưa thớt.class thắng.