Điều nào nhanh hơn và tại sao? Chọn div (cho nhu cầu plugin) theo số $('div[data-something]') hoặc $('div.something')? Tôi nghiêng về phía trước vì nó "sạch hơn".Hiệu suất jQuery - chọn theo attr dữ liệu hoặc theo lớp?
Dựa trên this SO question Tôi biết tôi không nên sử dụng cả hai. Tuy nhiên tôi đã không tìm ra liệu có sự khác biệt giữa chúng hay không.
Nó sẽ khác nhau tùy theo trình duyệt. Gần như tất cả các trình duyệt giờ đây đều hỗ trợ querySelectorAll và jQuery sẽ sử dụng nó khi có thể. querySelectorAll có thể được sử dụng với bộ chọn hiện diện thuộc tính, vì vậy nếu nó có jQuery không phải làm công việc, nó có thể tải nó xuống động cơ.
Đối với các trình duyệt cũ hơn không có querySelectorAll, jQuery rõ ràng sẽ phải làm nhiều việc hơn, nhưng ngay cả IE8 cũng có.
Như với hầu hết những điều này, đặt cược tốt nhất của bạn là:
Đừng lo lắng về nó cho đến khi/trừ khi bạn thấy một vấn đề, và
Nếu bạn gặp sự cố, hồ sơ cá nhân trên các trình duyệt bạn định hỗ trợ và sau đó đưa ra quyết định sáng suốt.
Việc chọn theo lớp luôn nhanh hơn bộ chọn thuộc tính vì jQuery cố gắng sử dụng mã gốc getElementByCalssName trước tiên nếu được trình duyệt hỗ trợ. Nếu không, nó sử dụng querySelector trong đó sử dụng bộ chọn css để tìm các phần tử trong trang.
Không, jQuery sẽ sử dụng 'querySelectorAll' trên gần như tất cả các trình duyệt, chứ không phải là' getElementsByClassName'. Nó sẽ quay trở lại 'getElementsByClassName' cho các bộ chọn lớp đơn giản (không phải là các bộ kết hợp như' div.test'), nhưng theo cách nào đó bạn sẽ trì hoãn việc triển khai CSS của trình duyệt trên bất kỳ thứ gì hiện đại. –
Tại sao lại downvote ?? – ShankarSangoli
Có vẻ hơi khó khăn đối với tôi, nhưng có lẽ bởi vì bạn nói 'div.something' sẽ luôn nhanh hơn, và không phải vậy. –
Trong Chrome 16 ít nhất, there is no difference. Tuy nhiên, nếu bạn thực hiện bộ chọn lớp ít cụ thể hơn ($(".test") chẳng hạn), nó tốt hơn các phương pháp khác:
Đó là hơi bất ngờ, bởi vì như ShankarSangoli đề cập, tôi nghĩ bộ chọn div.test lớp sẽ nhanh hơn.
Kết quả tương tự trên IE9, với 'div.something' nhanh hơn rất nhiều so với' div [data-something] ', nhưng cả hai đều chậm hơn nhiều so với' .something'. –
@ T.J.Crowder - Cảm ơn bạn đã tiết kiệm cho tôi một vài phút bằng cách chạy nó trong IE9 :) Firefox cũng giống như vậy. Tôi đã cập nhật ảnh chụp màn hình để bao gồm các kết quả đó. –
''.test'' sẽ cho phép Sizzle tối ưu hóa lựa chọn DOM bằng cách sử dụng' getElementsByClassName' thay vì 'querySelectorAll'. Trong hầu hết các trình duyệt, trình duyệt cũ hiện nhanh hơn. Nhưng ''div.test'' có thể sẽ nhanh hơn trong các trình duyệt như IE6 và IE7, không hỗ trợ cả' gEBCN' lẫn 'qSA' vì nó thu hẹp kiểm tra lớp thủ công chỉ với các phần tử' div'. –
câu hỏi hay ... ai đó có thể dùng thử $ ('*') cho mỗi người? :) luôn luôn muốn biết những gì nó làm hoặc những gì nó thực hiện là – ggzone