Бенчмаркинг , почему быстрей?
решил протестировать какой способ добавление блока через 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>
|