Вход

Просмотр полной версии : Бенчмаркинг , почему быстрей?

neWjs
17.06.2012, 19:28
решил протестировать какой способ добавление блока через JS будет быстрей и не совсем пойму почему первая функция быстрей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>

<body>
<script type="text/javascript">
var id = {primary: "primary_block", arrows: "arrows", block: "block_picker", circle: "circle"};
function create_dc(){
var primary, line, arrow, l, r, block_picker, circle, img;
primary = document.createElement("div");
primary.className = "picker animate";
primary.id ="primary_block";

line = document.createElement("div");

arrow = document.createElement("div");

l = document.createElement("div");
l.className = "left_arrow";
r = document.createElement("div");
r.className = "right_arrow";
arrow.appendChild(r);
arrow.appendChild(l);

line.appendChild(arrow);
primary.appendChild(line);

block_picker = document.createElement("div");

circle = document.createElement("div");
circle.className = "circle";

block_picker.appendChild(circle);

img = document.createElement("img");


block_picker.appendChild(img);

primary.appendChild(block_picker);



document.body.appendChild(primary);
}

function create(){

var primary, inn_HTML, fragment;

primary = document.createElement("div");
primary.className = "picker animate";
primary.id = "primary_block";
inn_HTML = '<div class="line"><div class="arrows"><div class="right_arrow"></div><div class="left_arrow"></div></div></div><div class="block_picker"><div class="circle"></div></div>';

primary.innerHTML = inn_HTML;
var frag = document.createDocumentFragment();
//frag.appendChild(primary);
document.body.appendChild(primary);

}

function bench(f,time){
var d = new Date();
for(var i = 0; i <time;i++)f();
return new Date - d;
}
alert(bench(create_dc,10000));
document.body.innerHTML = "";
setTimeout(function(){alert(bench(create,10000));} ,5000);

</script>
</body>
</html>
Deff
17.06.2012, 19:43
neWjs,
Во втором случае Js вроде еще как проверяет валидность
строки '<div class="line"><div class="arrows"><div class="right_arrow"></div><div class="left_arrow"></div></div></div><div class="block_picker"><div class="circle"></div></div>';
Нуно полностью создать элемент - запомнить его дубликат в переменную и добавлять новый элемент .appendChild (ом)
neWjs
17.06.2012, 19:48
neWjs,
Во втором случае Js вроде еще как проверяет валидность
строки '<div class="line"><div class="arrows"><div class="right_arrow"></div><div class="left_arrow"></div></div></div><div class="block_picker"><div class="circle"></div></div>';
Нуно полностью создать элемент - запомнить его дубликат в переменную и добавлять новый элемент .appendChild (ом)

т.е использовать cloneNode ?
Deff
17.06.2012, 19:50
neWjs,
Ну мну больше jQueryst
Там можно изъять из DOM элемент- запомнить в переменную и затем добавлять клоны изъятого
neWjs
17.06.2012, 19:52
neWjs,
Ну мну больше jQueryst
Там можно изъять из DOM элемент- запомнить в переменную и затем добавлять клоны изъятого

пишу без jQuery=)
а document.createDocumentFragment() , не подойдет?
dmitriymar
17.06.2012, 20:34
в разных браузерах результаты будут разные для вашего теста.
основной момент не дёргать всякий раз dom а добавлять всё сразу,за один раз
Deff
17.06.2012, 20:38
основной момент не дёргать всякий раз dom а добавлять всё сразу,за один раз
Да - это важно - посколь страница не парсится по нескольку раз,
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего
neWjs
17.06.2012, 20:41
Да - это важно - посколь страница не парсится по нескольку раз,
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего
я тоже пришел уже к этой мыли , поэтому решил сделать через первый вариант=)
:thanks:
dmitriymar
17.06.2012, 20:48
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего

Не всегда-поскольку браузеру тоже нужно время чтоб перерисовывать изменения в DOM
Deff
17.06.2012, 21:25
dmitriymar,
Да мну согласен
Да - это важно - посколь страница не парсится по нескольку раз,
Но типично наверно, - по N div(ов) за раз всовывать, посмотреть разницу между пачкой в 3-4 и 10 div