в общем, написал себе быструю функцию для поиска элемента по имени тега
сделал себе поле для тестов,чтобы посмотреть, на сколько она быстрая.
вот примеры с HTML ( можно запускать )
<button onclick="loop()">запустить цикл</button>
<br>
длина очереди : <b></b> <br> <br>
что добавить ? <br>
<input value="alert(5);">
<br> <br>
<button>добавить</button> <button>убрать</button>
<br> <br>
<button>исполнить</button>
<script>
// кеш. при изменении DOM буду обновлять. но это все равно неважно
els = window.document.body.children;
b = els.length;
function ge(tagname){
tagname = tagname.toUpperCase();
var i = 0, el
while(i++ < b){
if( (el = els[i]).tagName === tagname )
break;
}
return el;
}
/* сам цикл для просмотра сожранного времени */
function loop(){
var count = 100000;
console.time("search");
while( count-->0 ) {
ge('input')
}
console.timeEnd("search");
console.log( ge('input') ) // проверим еще раз, нашел ли элемент
};
loop();
</script>
при таком раскладе у меня FF сжирает 390-410 ( среднее, 400 )
хром ест
145 ms ( ого
)
пытаюсь закешировать window.b в локальной b
<button onclick="loop()">запустить цикл</button>
<br>
длина очереди : <b></b> <br> <br>
что добавить ? <br>
<input value="alert(5);">
<br> <br>
<button>добавить</button> <button>убрать</button>
<br> <br>
<button>исполнить</button>
<script>
// кеш. при изменении DOM буду обновлять. но это все равно неважно
els = window.document.body.children;
b = els.length;
function ge(tagname){
tagname = tagname.toUpperCase();
var i = 0, el, *!* b = window.b */!*
while(i++ < b){
if( (el = els[i]).tagName === tagname )
break;
}
return el;
}
/* сам цикл для просмотра сожранного времени */
function loop(){
var count = 100000;
console.time("search");
while( count-->0 ) {
ge('input')
}
console.timeEnd("search");
console.log( ge('input') ) // проверим еще раз, нашел ли элемент
};
loop();
</script>
теперь повторялка сжирает 430-460 ms ( среднее - 445 )
хром ест 180ms ( стабильно 177-181)
т.е. на 8% медленней.
в чем прикол ???
также, еще вопрос. только насчет while
в той же функции
ge
почему этот цикл (снизу) быстрее .. ( время 400 )
*!*while(i++ < b){*/!*
if( (el = els[i]).tagName === tagname )
break;
*!*}*/!*
.. быстрее этого ??
*!*do{*/!*
if( (el = els[i]).tagName === tagname )
break;
*!*} while(i++ < b)*/!*
среднее время второго 481 ms. на 17% медленней.
почему же так???? больше всего удивления на первый случай
вот еще насчет window и local scope
хром ест 185-198ms
<button onclick="loop()">запустить цикл</button>
<br>
длина очереди : <b></b> <br> <br>
что добавить ? <br>
<input value="alert(5);">
<br> <br>
<button>добавить</button> <button>убрать</button>
<br> <br>
<button>исполнить</button>
<script>
els = window.document.body.children;
b = els.length;
function ge(tagname){
tagname = tagname.toUpperCase();
var i = 0, el, *!* els = window.els, b = els.length; */!*
while(i++ < b){
if( (el = els[i]).tagName === tagname )
break;
}
return el;
}
/* сам цикл для просмотра сожранного времени */
function loop(){
var count = 100000;
console.time("search");
while( count-->0 ) {
ge('input')
}
console.timeEnd("search");
console.log( ge('input') ) // проверим еще раз, нашел ли элемент
};
loop();
</script>
эта функция жрет 460-470 ms ( среднее, 465ms )
P.S. не надо , пожалуйста, мне говорить, что есть куча быстрых фреймворков, всякого т.д . ))