Форум

skrudjmakdak · #1 (**permalink**) 03.11.2014, 21:58

задача по оптимизации.

есть таблица с данными, данные которых надо обновить. переформировывать заново всю таблицу не вариант, т.к. там могут быть атрибуты и прочая шняга, которая может потеряться. тобишь мне надо поменять чисто значения в ячейках таблицы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Example</title>  
		<style>
		</style>
    </head>
	<body>
		<table>
			<tr>
				<td attr="111">123</td>
				<td>123</td>
				<td>123</td>
			</tr>
		</table>
	<script>
	var table = document.querySelector('table'),
		tds = table.querySelectorAll('td');
	
	var val = [222, 333, 444];
	[].forEach.call(tds, function (v, i) {
		v.innerHTML = val[i];
	});
	</script>
    </body>
</html>

в данном примере он каждый раз обращается к dom и при каждом

v.innerHTML = val[i];

я так полагаю идет перерисовка и соответственно падает проиводительность (может я и не прав здесь). есть какой то флаг или метод, который не будет перерисовывать таблицу после каждого присваивания??

ksa · #2 (**permalink**) 05.11.2014, 10:25

Сообщение от skrudjmakdak

есть какой то флаг или метод, который не будет перерисовывать таблицу после каждого присваивания?

Как вариант, дать нужному tbody...

display: none;

или

visibility; hidden;

хотя второй вариант таки участвует в форматировании... Т.ч. первый предпочтительнее...

skrudjmakdak · #3 (**permalink**) 06.11.2014, 08:21

решил проделать эксперимент, тестил в хроме:

<html>
	<head> 
	</head>

	<body>
		<input type="button" value="простое обновление" onclick="up1();">
		<input type="button" value="обновить спрятав таблицу" onclick="up2();">
		<div></div>
		<script>
var div = document.querySelector('div'), num = 1;

var trs = [];
for (var i = 0; i < 10000; ++i) {
	trs.push('<tr><td>value1</td><td>value1</td><td>value1</td><td>value1</td></tr>');
}
	
div.innerHTML = '<table>' + trs.join('') + '</table>';

function update () {
	var val = 'value' + (++num);
	console.time('time');
	var tds = div.querySelectorAll('td');
	
	for (var i = 0, ln = tds.length; i < ln; ++i) {
		tds[i].innerHTML = val;
	}
	console.timeEnd('time');
}

function up1 () {
	update();
}

function up2 () {
	div.style.display = 'none';
	update();
	div.style.display = 'block';
}
		</script>
	</body>

</html>

при 10000 данных отрабатывает на ура как при первом подходе так и при втором..

ksa · #4 (**permalink**) 06.11.2014, 09:04

Сообщение от skrudjmakdak

отрабатывает на ура как при первом подходе так и при втором

Уже хорошо...

Значит выбирай любой!

krutoy · #5 (**permalink**) 09.11.2014, 04:11

Сообщение от skrudjmakdak

при 10000 данных отрабатывает на ура как при первом подходе так и при втором..

И чем твой "первый" отличается от изначального?

Форум

Справочник

Discord чат

Курсы javascript