Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   производительность: querySelectorAll vs getElementsByClassName (https://javascript.ru/forum/events/40560-proizvoditelnost-queryselectorall-vs-getelementsbyclassname.html)

lekba 10.08.2013 19:21

производительность: querySelectorAll vs getElementsByClassName
 
на данный момент использую конструкцию выборки элементов на странице:
if(document.getElementsByClassName){
	//alert('getElementsByClassName')
}
else if(document.querySelectorAll){
	//alert('querySelectorAll')
}

это было сделано для работоспособности в ИЕ8, вот
а есть ли способ "на лету" определять в каком браузере, что работает быстрее?
P.S. если кому интересно тут можно покрутить тесты: jsperf.com/getelementsbyclassname-vs-queryselectorall

danik.js 10.08.2013 20:23

Цитата:

Сообщение от lekba
а есть ли способ "на лету" определять в каком браузере, что работает быстрее?

А разве где-то querySelector работает быстрее чем getElementsByClassName ?

lekba 10.08.2013 20:57

в опере быстрее, может и в мини.опере также быстрее!?

danik.js 10.08.2013 21:08

Хм, действительно. Но разница всего лишь 2x, так что можно смело забить.
lekba, ты уверен, что выборка по классу - это узкое место в твоем коде, которое нужно оптимизировать? Скорее всего ты пытаешься сэкономить пару спичек.

lekba 10.08.2013 22:16

danik.js, выборка не самое узкое место, но оптимизация в этом месте не помешает, пока выигрыш составил ~50мс по тестам в топовой четверке браузеров только на выборке из 2000 элементов :-)

оптимизирую такой код:
есть список городов в формате шаблона где "0.00 RUR", "0 USD" - шаблон
на каждый город есть свой множитель заданный в массиве "tariff":{"moscow":"10","omsk":"1"}
<div class="price moscow">0.00 RUR</div>
<div class="price spb">0 USD</div>
<div class="price omsk">0 RUR</div>
<div class="price moscow">0.00 RUR</div>
<div class="price spb">0.00 RUR</div>


делаю выборку элементов и обрабатываю
list = document.getElementsByClassName("price "+city[i][1]);
if(list[0]!=null){
//make price
}


сейчас решил отказаться и делать обработку по индексу
document.getElementsByClassName("price");

теперь надо решить, как избежать повторной обработки одинаковых элементов при условии, что шаблон одинаков <div class="price moscow">0.00 RUR</div>


Часовой пояс GMT +3, время: 07:03.