Cuộn xuống cho số getById.getByClassName so với qSA so sánh!
Nếu chúng ta muốn chọn tất cả các yếu tố của lớp "bar" mà là bên trong phần tử với ID "foo", chúng ta có thể viết này:
$('#foo .bar')
hay này:
$('.bar', '#foo')
Có tất nhiên là các phương pháp khác để đạt được điều này, nhưng vì lợi ích của câu hỏi này, chúng ta hãy so sánh chỉ hai phương pháp này.
Vì vậy, phương pháp nào ở trên hoạt động tốt hơn? (Trong đó cần ít thời gian hơn để thực hiện?)
Tôi đã viết bài kiểm tra hiệu suất này:
(function() {
var i;
console.time('test1');
for(i = 0; i < 100; i++) {
$('#question-mini-list .tags');
}
console.timeEnd('test1');
console.time('test2');
for(i = 0; i < 100; i++) {
$('.tags', '#question-mini-list');
}
console.timeEnd('test2');
})();
Bạn phải thực hiện nó từ bên trong giao diện điều khiển trên Stack Overflow bắt đầu trang. kết quả của tôi là:
Firefox:
test1: ~ 90ms
test2: ~ 18ms
Chrome:
test1: ~ 65ms
test2: ~ 30ms
Opera:
test1: ~ 50ms
test2: ~ 100ms
Vì vậy, trong Firefox và Chrome, t phương pháp thứ hai của anh ta nhanh gấp nhiều lần - đúng như tôi mong đợi. Tuy nhiên, trong Opera tình hình được đảo ngược. Tôi tự hỏi chuyện gì đang xảy ra ở đây.
Bạn có thể chạy thử nghiệm trên máy của mình và giải thích lý do Opera hoạt động khác nhau không?
Cập nhật
Tôi đã viết bài kiểm tra này, để điều tra xem liệu của Opera QSA thực sự là siêu nhanh. Khi nó quay ra, nó được.
(function() {
var i, limit = 5000, test1 = 'test1', test2 = 'test2';
console.time(test1);
for(i = 0; i < limit; i += 1) {
document.getElementById('question-mini-list').getElementsByClassName('tags');
}
console.timeEnd(test1);
console.time(test2);
for(i = 0; i < limit; i += 1) {
document.querySelectorAll('#question-mini-list .tags');
}
console.timeEnd(test2);
})();
Một lần nữa, bạn phải chạy mã này từ bên trong bảng điều khiển trên trang bắt đầu tràn ngăn xếp. Tôi đã sử dụng bookmarklet Firebug Lite cho IE9 (vì trình duyệt đó không thực hiện console.time).
Vì vậy, tôi so với phương pháp này:
document.getelementById('A').getElementsByClassName('B');
phương pháp này:
document.querySelectorAll('#A .B');
Tôi đã thực hiện kịch bản trên năm lần liên tiếp trong mỗi trình duyệt.Các phương tiện số học là:
(Tất cả các con số trong mili giây.)
Vì vậy, việc thực hiện các phương pháp đầu tiên là khá nhiều như nhau trong các trình duyệt thử nghiệm (16-36ms). Tuy nhiên, trong khi qSA là chậm hơn nhiều so với phương pháp đầu tiên, trong Opera nó thực sự là nhanh hơn!
Vì vậy, QSA tối ưu hóa là có thể, tôi tự hỏi những gì mà các trình duyệt khác đang chờ đợi ...
'test1: 73ms',' test2: 11ms'. Opera là một trình duyệt lạ, tôi không chắc tại sao nó lại bị chậm lại. – Blender
@Blender Vui lòng tăng giới hạn vòng lặp. Máy tính xách tay của tôi là rất chậm, vì vậy tôi đã đi với 100. Hãy thử 1000.(Các kết quả nhỏ hơn '4ms' không đáng tin cậy ...) –
Bạn đã bao gồm cả' document.getElementById ('foo'). GetElementsByClassName ('bar') 'cho đầy đủ? – RobG