Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2012, 19:28
Аспирант
Отправить личное сообщение для neWjs Посмотреть профиль Найти все сообщения от neWjs
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2012, 19:43
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 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 (ом)
Ответить с цитированием
  #3 (permalink)  
Старый 17.06.2012, 19:48
Аспирант
Отправить личное сообщение для neWjs Посмотреть профиль Найти все сообщения от neWjs
 
Регистрация: 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 ?
Ответить с цитированием
  #4 (permalink)  
Старый 17.06.2012, 19:50
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

neWjs,
Ну мну больше jQueryst
Там можно изъять из DOM элемент- запомнить в переменную и затем добавлять клоны изъятого
Ответить с цитированием
  #5 (permalink)  
Старый 17.06.2012, 19:52
Аспирант
Отправить личное сообщение для neWjs Посмотреть профиль Найти все сообщения от neWjs
 
Регистрация: 27.05.2012
Сообщений: 48

Сообщение от Deff Посмотреть сообщение
neWjs,
Ну мну больше jQueryst
Там можно изъять из DOM элемент- запомнить в переменную и затем добавлять клоны изъятого
пишу без jQuery=)
а document.createDocumentFragment() , не подойдет?
Ответить с цитированием
  #6 (permalink)  
Старый 17.06.2012, 20:34
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

в разных браузерах результаты будут разные для вашего теста.
основной момент не дёргать всякий раз dom а добавлять всё сразу,за один раз
Ответить с цитированием
  #7 (permalink)  
Старый 17.06.2012, 20:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от dmitriymar
основной момент не дёргать всякий раз dom а добавлять всё сразу,за один раз
Да - это важно - посколь страница не парсится по нескольку раз,
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего
Ответить с цитированием
  #8 (permalink)  
Старый 17.06.2012, 20:41
Аспирант
Отправить личное сообщение для neWjs Посмотреть профиль Найти все сообщения от neWjs
 
Регистрация: 27.05.2012
Сообщений: 48

Сообщение от Deff Посмотреть сообщение
Да - это важно - посколь страница не парсится по нескольку раз,
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего
я тоже пришел уже к этой мыли , поэтому решил сделать через первый вариант=)
Ответить с цитированием
  #9 (permalink)  
Старый 17.06.2012, 20:48
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от Deff
Но реальный тест, как раз когда добавление минимальными пачками, - посколь в жизни - ограниченный контент, ожидание, вставка следующего
Не всегда-поскольку браузеру тоже нужно время чтоб перерисовывать изменения в DOM
Ответить с цитированием
  #10 (permalink)  
Старый 17.06.2012, 21:25
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Регулярные выражения. Почему находи именно так? jsuse Общие вопросы Javascript 4 21.11.2011 16:37
Свойства объекта, методы и this. Почему свойство вызывается с () ? jsuse Общие вопросы Javascript 2 04.11.2011 20:39
Prototype. Одноблочное определение псевдокласса. Литеральная форма не робит. Почему? GuardCat Общие вопросы Javascript 6 03.10.2011 13:46
Почему не определяется втарая переменная? Арман Общие вопросы Javascript 3 09.04.2011 11:14
Почему это работает? (инклуд JS в JS) Василий Б. Общие вопросы Javascript 4 11.06.2010 12:41