обновление данных в dom
задача по оптимизации.
есть таблица с данными, данные которых надо обновить. переформировывать заново всю таблицу не вариант, т.к. там могут быть атрибуты и прочая шняга, которая может потеряться. тобишь мне надо поменять чисто значения в ячейках таблицы:
<!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];я так полагаю идет перерисовка и соответственно падает проиводительность (может я и не прав здесь). есть какой то флаг или метод, который не будет перерисовывать таблицу после каждого присваивания?? |
Цитата:
display: none; или visibility; hidden; хотя второй вариант таки участвует в форматировании... Т.ч. первый предпочтительнее... |
решил проделать эксперимент, тестил в хроме:
<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 данных отрабатывает на ура как при первом подходе так и при втором.. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:00. |