Что работает быстрее: document.forms.add.title.value или document.querySelector('.title').value?

Question

[Вячеслав Лебедев]

Добрый вечер!
Стало интересно, что быстрее:

document.forms.add.title.value или document.querySelector('.title').value?

Формачка:

<form name="add">
  <input name="title" type="text" value="" class="title"/>
</form>

И есть ли разница? :)

Answer 1

[Mikhail Osher]

Мне кажется, что первый вариант в любом раскладе быстрее.
Ибо обращение к объекту напрямую. Никаких лишних запросов.

Answer 2

[Insower]

Что быстрее - поехать точно по адресу или подходить к дому, смотреть на его номер и только потом принимать решение, что вот он нужный дом? ;)

Answer 3

[Вячеслав Лебедев]

Ответ: Протестил сам на 1 000 000 итераций. Результат удивил. Что объясняет, новая спецификация querySelector более оптимизированная и лучше подходит для таких случаев.
Код:

form(name='cardAdd')
    input(class='title' name='title' type='text' value='')

i = 0
    console.time 'time'
    while i++ < 1000000
      document.forms.cardAdd.title.value # ~ 3100 ms
      document.querySelector('.title').value # ~ 2000 ms
    console.timeEnd 'time'

Тесты проделал раз по 10, думаю закономерность и так понятна :)

Answer 4

[vkdv]

1 - й вариант на сколько я понимаю не анализирует DOM дерево, ссылка на объект уже существует после загрузки страницы. Так что ставлю на него

Answer 5

[Дмитрий Ковальский]

Если вы думаете что одна инструкция выполняется час а другая наносекунду - я вас разочарую. Если будете делать такую операцию циклом в 100000 повторов то может и проявится разн ца

Comments

[Вячеслав Лебедев]

Именно это я и хочу выяснить от тех, кто делал замеры....

Answer 6

[Viktor Vsk]

Записи то не эквивалентные. Думаю, тут много будет зависеть от браузера, но в теории в таком случае, быстрее будет первый вариант.

Если .title заменить на [name="title"], то я ставлю на querySelector

Comments

[Вячеслав Лебедев]

Т.е. замеров Вы не делали ? :) Мне просто стало интересно, есть ли разница :))

[Viktor Vsk]

Вячеслав Лебедев: замеры какие? Если на двух браузерах в одной системе - можете и сами. Если хотите полные бенчамарки, то такие врядли будут, т.к. вопросом оптимизации селекторов не занимаются уже очень давно