Какая функция будет производительнее?

134
09 января 2021, 00:40

Функция traversalTreeDOM, у нее есть один +, она будет работать в более древних браузерах.

Какая функция производительнее, traversalTreeDOM или traversalTree

Конкретнее интересует: что будет быстрее и производительнее, много раз сделать document.createElement(''); и .appendChild(); или один раз сделать .innerHTML?

var tree = [ 
	{ 
		title: 'Razdel 1', 
		url: 'razdel_1', 
		children: [ 
			{ 
				title: 'Razdel 1 1', 
				url: 'razdel_1_1' 
			}, 
			{ 
				title: 'Razdel 1 2', 
				url: 'razdel_1_2' 
			}, 
			{ 
				title: 'Razdel 1 3', 
				url: 'razdel_1_3', 
				children: [ 
					{ 
						title: 'Razdel 1 3 1', 
						url: 'razdel_1_3_1', 
					}, 
					{ 
						title: 'Razdel 1 3 2', 
						url: 'razdel_1_3_2', 
					}, 
					{ 
						title: 'Razdel 1 3 3', 
						url: 'razdel_1_3_3', 
					} 
				] 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 2', 
		url: 'razdel_2', 
		children: [ 
			{ 
				title: 'Razdel 2 1', 
				url: 'razdel_2_1' 
			}, 
			{ 
				title: 'Razdel 2 2', 
				url: 'razdel_2_2' 
			}, 
			{ 
				title: 'Razdel 2 3', 
				url: 'razdel_2_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 3', 
		url: 'razdel_3', 
		children: [ 
			{ 
				title: 'Razdel 3 1', 
				url: 'razdel_3_1' 
			}, 
			{ 
				title: 'Razdel 3 2', 
				url: 'razdel_3_2' 
			}, 
			{ 
				title: 'Razdel 3 3', 
				url: 'razdel_3_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 4', 
		url: 'razdel_4', 
		children: [ 
			{ 
				title: 'Razdel 4 1', 
				url: 'razdel_4_1', 
				children: [ 
					{ 
						title: 'Razdel 4 1 1', 
						url: 'razdel_4_1_1' 
					}, 
					{ 
						title: 'Razdel 4 1 2', 
						url: 'razdel_4_1_2', 
						children: [ 
							{ 
								title: 'Razdel 4 1 2 1', 
								url: 'razdel_4_1_2_1', 
							}, 
							{ 
								title: 'Razdel 4 1 2 2', 
								url: 'razdel_4_1_2_2', 
							} 
						] 
					}, 
					{ 
						title: 'Razdel 4 1 3', 
						url: 'razdel_4_1_3' 
					} 
				] 
			}, 
			{ 
				title: 'Razdel 4 2', 
				url: 'razdel_4_2' 
			}, 
			{ 
				title: 'Razdel 4 3', 
				url: 'razdel_4_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 5', 
		url: 'razdel_5', 
		children: [ 
			{ 
				title: 'Razdel 5 1', 
				url: 'razdel_5_1' 
			}, 
			{ 
				title: 'Razdel 5 2', 
				url: 'razdel_5_2' 
			}, 
			{ 
				title: 'Razdel 5 3', 
				url: 'razdel_5_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 6', 
		url: 'razdel_6' 
	}, 
	{ 
		title: 'Razdel 7', 
		url: 'razdel_7', 
		children: [ 
			{ 
				title: 'Razdel 7 1', 
				url: 'razdel_7_1', 
			}, 
			{ 
				title: 'Razdel 7 2', 
				url: 'razdel_7_2', 
			}, 
			{ 
				title: 'Razdel 7 3', 
				url: 'razdel_7_3', 
			} 
		] 
	} 
]; 
 
function traversalTree(tree) { 
	var rootPath = [{ 
		node: tree, 
		counter: 0 
	}]; 
 
	var html = '<ul>'; 
 
	while(rootPath.length) { 
		var index = rootPath[rootPath.length - 1]; 
		var item = index.node[index.counter]; 
		if(index.counter === index.node.length) { 
			rootPath.pop(); 
			html += '</ul>'; 
			if(rootPath.length) { 
				html += '</li>'; 
			} 
			continue; 
		} 
 
		html += '<li><a href="#' + item['url'] + '">' + item['title'] + '</a>'; 
 
		if(item.children) { 
			rootPath.push({ 
				node: item.children, 
				counter: 0 
			}); 
 
			html += '<ul>' 
		} else { 
			html += '</li>'; 
		} 
		index.counter++; 
	} 
	return html; 
} 
 
var endOk = traversalTree(tree); 
var out1 = document.getElementById('out1'); 
out1.innerHTML = endOk; 
console.log(endOk); 
 
function traversalTreeDOM(tree) { 
	var html = document.createElement('ul'); 
	var rootPath = [{ 
		node: tree, 
		nodeDOM: html, 
		counter: 0 
	}]; 
 
	while(rootPath.length) { 
		var index = rootPath[rootPath.length - 1]; 
		var item = index.node[index.counter]; 
		var itemDOM = index.nodeDOM; 
		if(index.counter === index.node.length) { 
			rootPath.pop(); 
			continue; 
		} 
 
		var li = document.createElement('li'); 
		var a = document.createElement('a'); 
		a.href = '#' + item['url']; 
		var text = document.createTextNode(item['title']); 
		a.appendChild(text); 
		li.appendChild(a); 
		itemDOM.appendChild(li); 
 
		if(item.children) { 
			var newLVL = document.createElement('ul'); 
			rootPath.push({ 
				node: item.children, 
				nodeDOM: newLVL, 
				counter: 0 
			}); 
 
			li.appendChild(newLVL); 
		} 
		index.counter++; 
	} 
	return html; 
} 
var DOMok = traversalTreeDOM(tree); 
var out2 = document.getElementById('out2'); 
out2.appendChild(DOMok); 
console.log(DOMok.outerHTML);
#out1 { 
	float: left; 
} 
 
#out2 { 
	float: right; 
}
<!DOCTYPE html> 
<html lang="ru"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Document</title> 
		<link rel="stylesheet" href="styles/style.css"> 
	</head> 
	<body> 
		<div id="out1"></div> 
		<div id="out2"></div> 
		<script src="javascript/main.js"></script> 
	</body> 
</html>

-------------------------Обновление-------------------------

Выяснил, следующее:

Конкретно в данном случае appendChild гораздо быстрее innerHTML.

Но, в целом результат +- оба варианта одинаковы...

function randomInteger(min, max) { 
	var rand = min + Math.random() * (max + 1 - min); 
	rand = Math.floor(rand); 
	return rand; 
} 
 
var tree = [ 
	{ 
		title: 'Razdel 1', 
		url: 'razdel_1', 
		children: [ 
			{ 
				title: 'Razdel 1 1', 
				url: 'razdel_1_1' 
			}, 
			{ 
				title: 'Razdel 1 2', 
				url: 'razdel_1_2' 
			}, 
			{ 
				title: 'Razdel 1 3', 
				url: 'razdel_1_3', 
				children: [ 
					{ 
						title: 'Razdel 1 3 1', 
						url: 'razdel_1_3_1', 
					}, 
					{ 
						title: 'Razdel 1 3 2', 
						url: 'razdel_1_3_2', 
					}, 
					{ 
						title: 'Razdel 1 3 3', 
						url: 'razdel_1_3_3', 
					} 
				] 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 2', 
		url: 'razdel_2', 
		children: [ 
			{ 
				title: 'Razdel 2 1', 
				url: 'razdel_2_1' 
			}, 
			{ 
				title: 'Razdel 2 2', 
				url: 'razdel_2_2' 
			}, 
			{ 
				title: 'Razdel 2 3', 
				url: 'razdel_2_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 3', 
		url: 'razdel_3', 
		children: [ 
			{ 
				title: 'Razdel 3 1', 
				url: 'razdel_3_1' 
			}, 
			{ 
				title: 'Razdel 3 2', 
				url: 'razdel_3_2' 
			}, 
			{ 
				title: 'Razdel 3 3', 
				url: 'razdel_3_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 4', 
		url: 'razdel_4', 
		children: [ 
			{ 
				title: 'Razdel 4 1', 
				url: 'razdel_4_1', 
				children: [ 
					{ 
						title: 'Razdel 4 1 1', 
						url: 'razdel_4_1_1' 
					}, 
					{ 
						title: 'Razdel 4 1 2', 
						url: 'razdel_4_1_2', 
						children: [ 
							{ 
								title: 'Razdel 4 1 2 1', 
								url: 'razdel_4_1_2_1', 
							}, 
							{ 
								title: 'Razdel 4 1 2 2', 
								url: 'razdel_4_1_2_2', 
							} 
						] 
					}, 
					{ 
						title: 'Razdel 4 1 3', 
						url: 'razdel_4_1_3' 
					} 
				] 
			}, 
			{ 
				title: 'Razdel 4 2', 
				url: 'razdel_4_2' 
			}, 
			{ 
				title: 'Razdel 4 3', 
				url: 'razdel_4_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 5', 
		url: 'razdel_5', 
		children: [ 
			{ 
				title: 'Razdel 5 1', 
				url: 'razdel_5_1' 
			}, 
			{ 
				title: 'Razdel 5 2', 
				url: 'razdel_5_2' 
			}, 
			{ 
				title: 'Razdel 5 3', 
				url: 'razdel_5_3' 
			} 
		] 
	}, 
	{ 
		title: 'Razdel 6', 
		url: 'razdel_6' 
	}, 
	{ 
		title: 'Razdel 7', 
		url: 'razdel_7', 
		children: [ 
			{ 
				title: 'Razdel 7 1', 
				url: 'razdel_7_1', 
			}, 
			{ 
				title: 'Razdel 7 2', 
				url: 'razdel_7_2', 
			}, 
			{ 
				title: 'Razdel 7 3', 
				url: 'razdel_7_3', 
			} 
		] 
	} 
]; 
 
console.time('GEN'); 
function genTree(title, url, lvl) { 
	if(lvl > 10) { 
		return; 
	} 
	var tree = []; 
	var int = randomInteger(3, 5); 
	for (var i = 0; i < int; i++) { 
		tree[i] = { 
			title: title + ' ' + (i + 1), 
			url: url + '_' + (i +1) 
		}; 
		if(Math.random() > 0.5) { 
			tree[i].children = genTree(title + ' ' + (i + 1), url + '_' + (i +1), lvl + 1); 
		} 
	} 
 
	return tree; 
} 
 
var newTree = genTree('Razdel', 'razdel', 0); 
console.timeEnd('GEN'); 
 
function traversalTree(tree) { 
	var rootPath = [{ 
		node: tree, 
		counter: 0 
	}]; 
 
	var html = '<ul>'; 
 
	while(rootPath.length) { 
		var index = rootPath[rootPath.length - 1]; 
		var item = index.node[index.counter]; 
		if(index.counter === index.node.length) { 
			rootPath.pop(); 
			html += '</ul>'; 
			if(rootPath.length) { 
				html += '</li>'; 
			} 
			continue; 
		} 
 
		html += '<li><a href="#' + item['url'] + '">' + item['title'] + '</a>'; 
 
		if(item.children) { 
			rootPath.push({ 
				node: item.children, 
				counter: 0 
			}); 
 
			html += '<ul>' 
		} else { 
			html += '</li>'; 
		} 
		index.counter++; 
	} 
	return html; 
} 
 
var out1 = document.getElementById('out1'); 
 
console.time('ALL1'); 
console.time('Function #1'); 
var endOk = traversalTree(newTree); 
console.timeEnd('Function #1'); 
console.time('innerHTML'); 
out1.innerHTML = endOk; 
console.timeEnd('innerHTML'); 
console.timeEnd('ALL1'); 
 
function traversalTreeDOM(tree) { 
	var html = document.createElement('ul'); 
	var rootPath = [{ 
		node: tree, 
		counter: 0 
	}]; 
 
	while(rootPath.length) { 
		var index = rootPath[rootPath.length - 1]; 
		var item = index.node[index.counter]; 
		if(index.counter === index.node.length) { 
			rootPath.pop(); 
			if(rootPath.length) { 
				html = html.parentElement.parentElement; 
			} 
			continue; 
		} 
 
		var li = document.createElement('li'); 
		var a = document.createElement('a'); 
		a.href = '#' + item['url']; 
		var text = document.createTextNode(item['title']); 
		a.appendChild(text); 
		li.appendChild(a); 
		html.appendChild(li); 
 
		if(item.children) { 
			var html = document.createElement('ul'); 
			rootPath.push({ 
				node: item.children, 
				counter: 0 
			}); 
 
			li.appendChild(html); 
		} 
		index.counter++; 
	} 
	return html; 
} 
 
var out2 = document.getElementById('out2'); 
 
console.time('ALL2'); 
console.time('Function #2'); 
var DOMok = traversalTreeDOM(newTree); 
console.timeEnd('Function #2'); 
console.time('appendChild'); 
out2.appendChild(DOMok); 
console.timeEnd('appendChild'); 
console.timeEnd('ALL2'); 
 
console.log(endOk === DOMok.outerHTML);
#out1 { 
	float: left; 
} 
 
#out2 { 
	float: right; 
}
<!DOCTYPE html> 
<html lang="ru"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Document</title> 
		<link rel="stylesheet" href="styles/style.css"> 
	</head> 
	<body> 
		<div id="out1"></div> 
		<div id="out2"></div> 
		<script src="javascript/main.js"></script> 
	</body> 
</html>

Answer 1

innerHTML медленнее из-за того, что заново рендерит весь родительский элемент.

READ ALSO
Не срабатывает click vue
javascript

Не срабатывает click vue

https://codepenio/n_ds/pen/VOxVrE Не работает selectItem(), связано это как-то с onBlur(), но не могу понять как решить

 119
Експорт класса в node js
javascript

Експорт класса в node js

Мне нужно експортировать класс Room, но пишет что нет такого конструктора:

 108
Проверить наличие элемента в массиве
javascript

Проверить наличие элемента в массиве

Есть массив

 103
Сброс нумерации элементов в массиве jquery
javascript

Сброс нумерации элементов в массиве jquery

Есть массив нумерация элементов от 20-39Как можно сбросить нумерацию элементов в массиве, чтобы она стала от 0-19?

 84