Nhiều bộ chọn so với hiệu suất chọn đơn

Question

Tôi đã thử tìm câu trả lời và tôi đã tìm thấy câu hỏi có liên quan và trong khi xác nhận kết quả của tôi (that one multiple selector call is slower than multiple single selector calls) không ai trong số họ cho tôi biết lý do.

về cơ bản, khi bạn chạy mã này:

$("#one, #two").hide(); 
$("#one, #two").show(); 

Against mã này:

$("#one").hide(); 
$("#two").hide(); 
$("#one").show(); 
$("#two").show(); 

Rồi sau này sẽ nhanh hơn khoảng 50%.

Tuy nhiên, khi chúng tôi thêm bộ chọn thứ ba, chênh lệch hiệu suất sẽ nhanh hơn 39%.

Sự khác biệt của bộ chọn thứ tư: nhanh hơn 26%.

Thứ năm: nhanh hơn 30%.

Thứ sáu: nhanh hơn 31%.

Mười: 31% nhanh hơn.

(Do lưu ý các giá trị dường như dao động trong khoảng một biên độ 5%)

Vì vậy, chúng tôi nhận cái gì đó trông như thế này:

Việc thực hiện dường như rắc khoảng 6 selectors. Nó không bao giờ có vẻ để có được bất kỳ 'nhanh hơn' hơn là chậm hơn 31% so với làm mỗi một thông qua một cuộc gọi duy nhất. Tại sao vậy?

Cá nhân, tôi thích sử dụng nhiều bộ chọn cho mỗi cuộc gọi, nhưng dường như có một lần truy cập hiệu suất lớn (tương đối). Khi nào thì điều này (không) sẽ phù hợp để sử dụng?

Answer 1

Trong cả hai trường hợp, bạn hoạt động trên ID, do đó, nó có thể được chuyển đổi thành cuộc gọi getElementById gốc.

Tuy nhiên, trong trường hợp 1 2 điều bổ sung phải được thực hiện

1. Các tình trạng hôn mê phải được xử lý, do đó thêm phân tích tham gia
2. 2 kết quả phải được sáp nhập, do đó hoạt động jQuery asserts that they are returned in the same order as in DOM

Tôi đoán hoạt động thứ hai mất nhiều thời gian nhất.