Cách hiệu quả nhất để tìm các yếu tố trong jQuery

Question

Nếu tôi có một lớp CSS mà tôi chỉ bao giờ áp dụng để tạo thành các yếu tố, ví dụ:

<form class="myForm"> 

nào sau đây hai jQuery Selectors là hiệu quả nhất, và tại sao?

a) $('form.myForm') 

b) $('.myForm') 

Answer 1

Như redsquare đã đề cập, thuật toán lựa chọn thay đổi trong phiên bản jQuery sau này (một phần do hỗ trợ getElementsByClassName). Ngoài ra, tôi đã thử nghiệm điều này với phiên bản jQuery mới nhất cho đến nay (v1.6) và cũng đã thêm một thử nghiệm cho document.getElementsByClassName để so sánh (hoạt động ít nhất trong Firefox 4 và Chrome).

Kết quả trong Firefox 4 là:

// With 100 non-form elements: 
$('.myForm') : 366ms 
$('form.myForm') : 766ms 
document.getElementsByClassName('myForm') : 11ms 

// Without any other elements: 
$('.myForm') : 365ms 
$('form.myForm') : 583ms 
document.getElementsByClassName('myForm') : 11ms 

Câu trả lời được chấp nhận là lỗi thời (và vẫn còn tìm thấy bằng cách tìm kiếm một cái gì đó như "cách hiệu quả để tìm các yếu tố trong jquery") và có thể gây nhầm lẫn cho người, vì vậy tôi cảm thấy rằng tôi phải viết điều này.

Ngoài ra, hãy xem sự khác biệt về thời gian giữa jQuery và các chức năng chọn trình duyệt gốc. Trong jQuery 1.2.6 $('.myForm') là chậm hơn lần so với getElementsByClassName, trong khi ở jQuery 1.6 đó là chậm chỉ về lần, nhưng vẫn nhanh hơn $('form.myForm') (trái với câu trả lời đã lỗi thời).

Lưu ý: Kết quả thu được với Firefox 4 (kết quả tương tự với Chrome). Trong Opera 10 truy vấn với tên thẻ chỉ nhanh hơn một chút, nhưng Opera cũng hỗ trợ bản gốc nhanh hơn nhiều getElementsByClassName.

mã kiểm tra:http://jsbin.com/ijeku5

Answer 2

Sửa: Kết quả dưới đây là dành cho jQuery 1.2.6, có lẽ trong Firefox 3.5. Tốc độ cải tiến trong trình duyệt và jQuery chính nó đã khá nhiều kết xuất thông tin này đã lỗi thời.

---

tôi chỉ viết một bài kiểm tra điểm chuẩn nhanh:

• Trên một trang với 4 hình thức và khoảng 100 yếu tố khác:
  • Sử dụng $('form.myForm') 10000 lần mất 1.367s
  • Sử dụng $('.myForm') 10000 lần lấy 4,202s (307%)
• Trên một trang chỉ với 4 hình thức và không có các yếu tố khác:
  • Sử dụng $('form.myForm') 10000 lần mất 1.352s
  • Sử dụng $('.myForm') 10000 lần mất 1.443s (106%)

Dường như tìm kiếm các phần tử của một tên cụ thể nhanh hơn rất nhiều so với tìm kiếm tất cả các phần tử của một phần tử r lớp.

Edit: Dưới đây là chương trình thử nghiệm của tôi: http://jsbin.com/ogece

Chương trình bắt đầu với 100 <p> thẻ và 4 <form> s, chạy hai bài kiểm tra khác nhau, loại bỏ các <p> thẻ và chạy thử nghiệm một lần nữa. Kỳ lạ thay, khi sử dụng kỹ thuật này, form.myForm chậm hơn. Hãy xem mã cho chính mình và làm cho nó những gì bạn sẽ.

Answer 3

Bộ chọn đầu tiên phải nhanh hơn vì jQuery có thể sử dụng hàm dựng sẵn "getElementsByTagName" để giảm số lượng phần tử cần lọc. Cái thứ hai phải lấy tất cả các phần tử trong DOM và kiểm tra lớp của chúng.

Answer 4

form.myForm IMO nhanh hơn rất nhiều vì nó chỉ cần xem xét tập con/tập hợp các phần tử được lọc và sẽ không cần phải lặp lại toàn bộ tài liệu.

Answer 5

Hãy thử slickspeed nơi bạn có thể thấy tốc độ thô của bộ chọn trên nhiều danh mục js bao gồm cả jquery.

Answer 6

Ví dụ đầu tiên sẽ nhanh hơn rất nhiều khi được sử dụng với ngữ cảnh. Ví dụ thứ hai cũng nhanh hơn, nhưng không nhiều.Tôi mở rộng ví dụ của bạn để so sánh với một bối cảnh:

http://jsbin.com/uluwe

Answer 7

enobrev, Thú vị. Tôi chỉ cần chạy ví dụ của bạn, nhưng sử dụng jquery 1.3 beta 2 here

kết quả .... (1.2.6 tốc độ trong ngoặc)

// With 100 non-form elements and Context: 
$('.myForm', '#someContainer') : 4063ms (3707ms) 
$('form.myForm', '#someContainer') : 6045ms (4644ms) 

// With 100 non-form elements: 
$('.myForm') : 3954ms (25086ms) 
$('form.myForm') : 8802ms (4057ms) 

// Without any other elements with Context: 
$('.myForm', '#someContainer') : 4137ms (3594ms) 
$('form.myForm', '#someContainer') : 6627ms (4341ms) 

// Without any other elements: 
$('.myForm') : 4278ms (7303ms) 
$('form.myForm') : 8353ms (4033ms) 

Answer 8

C'mon guys? Bạn điên à? Cách nhanh nhất cách để chọn yếu tố này là cách ngắn nhất:

$ ('. MyForm') là cách nhanh hơn $ ('form.myform') vì biến thể thứ hai nhanh chóng thực hiện kiểm tra quảng cáo để đảm bảo rằng phần tử có tagName được chỉ định. MAYBE jquery mới 1.3 sẽ thay đổi điều này, nhưng trên phiên bản ổn định mới nhất, là sai để chỉ định tagName quá. Bạn nên read here.

Tôi nghĩ rằng tôi đã đọc ở đâu đó rằng MooTools là cách nhanh hơn theo cách này. Vâng .. Có lẽ trong Moo, không biết, nhưng trong jQuery đây là cách nhanh nhất.

hãy nhìn vào hồ sơ này:

(big pic)

đầu tiên là chỉ với ID, thứ hai là với hình thứC# ID (thử nghiệm trên trang blog của tôi) và làm việc chính xác tương tự cho selector lớp .