Tác giả của trang này: http://24ways.org/2011/your-jquery-now-with-less-suck xác nhận rằng bộ chọn jQuery $('#id').find('p') nhanh hơn $('#id p') , mặc dù điều đó có lẽ tạo ra kết quả tương tự nếu tôi hiểu chính xác. Lý do cho sự khác biệt này là gì?
Vì $('#id').find('p') được tối ưu hóa để làm ...
document.getElementById('id').getElementsByTagName('p');
... trong khi tôi đoán $('#id p') sẽ sử dụng một trong hai querySelectorAll nếu có, hoặc động cơ chọn dựa JavaScript nếu không muốn nói.
Bạn nên lưu ý rằng hiệu suất luôn có các biến thể giữa các trình duyệt. Opera được biết là có tốc độ cực nhanh querySelectorAll.
Ngoài ra, các phiên bản khác nhau của jQuery có thể đưa ra các tối ưu hóa khác nhau.
Có thể là $('#id p') sẽ là (hoặc hiện tại) được tối ưu hóa giống như phiên bản đầu tiên.
Tôi giả sử rằng 'querySelectorAll ('# id p')' cũng được tối ưu hóa khá tốt. Hiệu suất khác biệt cần được kiểm tra, không được khẳng định. – Tomalak
@Tomalak: Tôi đã thực hiện đủ kiểm tra 'qSA' để biết rằng trong hầu hết các trình duyệt, nó thực sự khá chậm so với. Đây không phải là một xác nhận ngẫu nhiên. Xem cập nhật của tôi về * Opera *. –
Tôi không nói rằng qSA sẽ luôn nhanh hơn. Tôi nói * "Tôi giả sử" * để chứng minh quan điểm của tôi, thực sự. Sau khi tất cả, nó là khá khó khăn để hỗ trợ như một tuyên bố tổng quát một cách này hay cách khác, cho sự khác biệt lớn trong jQuery và các phiên bản trình duyệt. – Tomalak
Trình duyệt cụ thể kể từ khi jQuery sử dụng querySelectorAll khi có sẵn. Khi tôi thử nghiệm trong WebKit nó đã thực sự nhanh hơn. Khi nó chỉ ra querySelectorAll được tối ưu hóa cho trường hợp này.
Inside WebKit, nếu toàn bộ bộ chọn là #<id> và chỉ có một phần tử trong tài liệu có id đó, nó được tối ưu hóa thành getElementById. Tuy nhiên, nếu công cụ chọn là bất kỳ điều gì khác, hãy querySelectorAll duyệt qua tài liệu tìm kiếm các yếu tố phù hợp.
Đúng, bạn có thể tối ưu hóa trường hợp này để chúng hoạt động giống nhau - nhưng ngay bây giờ, không ai có. Bạn có thể tìm thấy nó here trong nguồn WebKit, SelectorDataList::execute sử dụng SelectorDataList::canUseIdLookup để quyết định có sử dụng getElementById hay không. Có vẻ như sau:
if (m_selectors.size() != 1)
return false;
if (m_selectors[0].selector->m_match != CSSSelector::Id)
return false;
if (!rootNode->inDocument())
return false;
if (rootNode->document()->inQuirksMode())
return false;
if (rootNode->document()->containsMultipleElementsWithId(m_selectors[0].selector->value()))
return false;
return true;
Nếu bạn đang thử nghiệm trong trình duyệt không phải là WebKit, có thể nó thiếu các tối ưu hóa tương tự.
Bạn cũng đã thử nghiệm điều đó chưa? – Tomalak