17.06.2012, 19:28
|
|
Аспирант
|
|
Регистрация: 27.05.2012
Сообщений: 48
|
|
|
Бенчмаркинг , почему быстрей?
решил протестировать какой способ добавление блока через 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>
|
|
17.06.2012, 19:43
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
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 (ом)
|
|
17.06.2012, 19:48
|
|
Аспирант
|
|
Регистрация: 27.05.2012
Сообщений: 48
|
|
Сообщение от Deff
|
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 ? |
|
17.06.2012, 19:50
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
neWjs,
Ну мну больше jQueryst
Там можно изъять из DOM элемент- запомнить в переменную и затем добавлять клоны изъятого
|
|
17.06.2012, 19:52
|
|
Аспирант
|
|
Регистрация: 27.05.2012
Сообщений: 48
|
|
|
Сообщение от Deff
|
neWjs,
Ну мну больше jQueryst
Там можно изъять из DOM элемент- запомнить в переменную и затем добавлять клоны изъятого
|
пишу без jQuery=)
а document.createDocumentFragment() , не подойдет? |
|
17.06.2012, 20:34
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
в разных браузерах результаты будут разные для вашего теста.
основной момент не дёргать всякий раз dom а добавлять всё сразу,за один раз
|
|
17.06.2012, 20:38
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от dmitriymar
|
|
основной момент не дёргать всякий раз dom а добавлять всё сразу,за один раз
|
Да - это важно - посколь страница не парсится по нескольку раз,
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего |
|
17.06.2012, 20:41
|
|
Аспирант
|
|
Регистрация: 27.05.2012
Сообщений: 48
|
|
|
Сообщение от Deff
|
Да - это важно - посколь страница не парсится по нескольку раз,
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего
|
я тоже пришел уже к этой мыли , поэтому решил сделать через первый вариант=)
 |
|
17.06.2012, 20:48
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от Deff
|
|
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего
|
Не всегда-поскольку браузеру тоже нужно время чтоб перерисовывать изменения в DOM |
|
17.06.2012, 21:25
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
dmitriymar,
Да мну согласен
|
Сообщение от Deff
|
|
Да - это важно - посколь страница не парсится по нескольку раз,
|
Но типично наверно, - по N div(ов) за раз всовывать, посмотреть разницу между пачкой в 3-4 и 10 div
|
|
|
|
