Являются ли классы индексированными в современных браузерах?

Question

В прошлой веб-разработке я всегда пытался спуститься с id при создании селектора в javascript, ранее в jQuery и совсем недавно, используя document.querySelector() /. QuerySelectorAll(). Это было по соображениям производительности. Я следил за советами в таких сообщениях (http://www.artzstudio.com/2009/04/jquery-performance-rules/#descend-from-id).

Например:

$('#new-address-form input.address') 

может быть значительно быстрее, чем

$('.address') 

Даже когда там был только один элемент на странице с классом адреса. Если в DOM было много разных классов, это могло бы быть много быстрее в некоторых браузерах (я смотрю на вас IE < 8).

Но, по опыту, сегодня кажется, что это уже не так. Может ли кто-нибудь указать мне на какую-либо документацию или код для браузеров с открытым исходным кодом, что бы подтвердить, что современные браузеры индексируют элементы по классам?

Answer 1

Возможно, я ответил на свой вопрос. Я создал jsperf, но я бы оценил больше тестовых данных или улучшений.

http://jsperf.com/should-we-always-descend-by-an-id/6

EDIT: В моем тестовом случае это выглядит как JQuery на самом деле быстрее, когда вы НЕ спустится с идентификатором, но явным победителем производительности (кросс-браузер) является document.getElementsByClassName() ,

Answer 2

Разница в производительности там, но она может быть незначительной, если вы не работаете с очень большой разметкой.

Я устанавливаю эталон JS Fiddle, который создает 20 000 тегов div, каждый из которых вложен в 10 уровней. Затем пытается выбрать один случайным образом на основе класса и снова на основе идентификатора с классом потомков.

Я протестированные его здесь: https://jsfiddle.net/0wyLfnz8/14/

Результаты
Выбор по ID, то потомок класса был в среднем .018ms в Chrome
Выбор по идентификатору, то потомок класса был в среднем 39.33ms в IE

Выбор по классам в одиночку было в среднем 12.178ms в Chrome
Выбор по классам в одиночку было в среднем 51.386ms в IE

Опять же, эти результаты в миллисекундах с 500 тестов более 20000 HTML элементов

Код для бенчмаркинга

$(document).ready(function() { 
    var d = new Date(); 
    var st = d.getTime(); 
    var start = st; 
    var et; 
    var max = 20000; 
    var numberOfTests = 500; 
    var elementDepth = 10; 
    for(var i = 1; i < max; i++) { 
    //lets make a random class too 
    r = Math.floor((Math.random() * 10) + 1); 
    var depth = ""; 
    for(var j = 1; j<elementDepth;j++) { 
     depth += '<div class="depth' + j + '"></div>' 
    } 
    $('body').append('<div id="d'+i+'">'+depth+'<div class="depth'+elementDepth+'"><div class="c'+i+' r'+r+'">Hello, I am div number '+i+'</div></div></div>'); 
    } 
    d = new Date(); 
    var duration = d.getTime() - st; 
    console.log('Generating divs took ' + (duration/1000) + ' seconds'); 

    idDuration = 0; 
    idTests = 0; 
    for(var i = 0; i < numberOfTests; i++) { 
    //choose a random div to select 
    r = Math.floor((Math.random() * max) + 1); 
    d = new Date(); 
    st = d.getTime(); 
    var tagbyID = $('#d'+r+ '.c'+r); 
    d = new Date(); 
    et = d.getTime(); 
    duration = et - st; 


    //console.log('Selecting by ID took ' + duration + ' milliseconds'); 
    idDuration += duration; 
    idTests++; 
    } 
    console.log('---'); 

    classDuration = 0; 
    classTests = 0; 
    for(var i = 0; i < numberOfTests; i++) { 
    //choose a random div to select 
    r = Math.floor((Math.random() * max) + 1); 
    d = new Date(); 
    st = d.getTime(); 
    var tagbyClass = $('.c'+r); 
    d = new Date(); 
    et = et; 
    duration = d.getTime() - st; 
    //console.log('Selecting by class took ' + duration + ' milliseconds'); 
    classDuration += duration; 
    classTests++; 
    } 
    console.log('---'); 
    d = new Date(); 
    console.log('total duration: ' + ((d.getTime() - start)/1000) + " seconds"); 
    console.log('---'); 
    console.log('Selecting by ID took '+idDuration+' milliseconds total over '+idTests+' tests.'); 
    console.log('Selecting by class took '+classDuration+' milliseconds total over '+classTests+' tests.'); 
    console.log('---'); 
    console.log('Average time for ID selection using $(\'#parentID .childClassName\') was: ' + (idDuration/idTests)+" milliseconds") 
    console.log('Average time for class selection using $(\'.className\') was: ' + (classDuration/classTests)+" milliseconds") 


})