Пожалуйста, взгляните на эту скрипку (я использую Vue.js для генерации большого количества узлов DOM, но мой вопрос, похоже, не связан с проблемой Vue): https://jsfiddle.net/dmaevsky/kswj23r1/117/.
Когда я наблюдаю за производительностью, используя инструмент производительности Chrome, быстро нажимая кнопку, я вижу задержку рендеринга «Обновление дерева слоев» (42 мс), что имеет смысл, поскольку материал перемещается по странице, так почему бы и нет (Мне все еще интересно, кстати, есть ли способ устранить это?)Теперь, когда я наблюдаю за производительностью, я вижу все 2500 TD-узлов, добавленных в «Пересчет стилей» в Chrome при нажатии кнопки «Shift down».Я просто не понимаю, почему это имеет какой-то смысл?Использование класса вместо установки стилей вручную не приводит к тому, что это происходит.
Это просто попытка понять логику аннулирования стилей в браузере, а не в реальном приложении, поэтому количество DOM-узлов здесь намеренно поддерживается вышечем было бы разумно в реальном приложении, хотя и достаточно близко.
ОБНОВЛЕНИЕ: На самом деле, похоже, это проблема Vue.js.Я переписал код на чистом JS (полный HTML ниже) и больше не наблюдаю тот же эффект.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Create table test</title>
<style>
body {
font-family: Helvetica;
}
#app {
background: #fff;
padding: 20px;
}
#app {
position: relative;
}
#pane {
position: absolute;
}
.table {
table-layout: fixed;
border-collapse: collapse;
margin: 0;
padding: 0;
border: hidden;
width: 8000px;
height: 1600px;
}
.cell {
width: 100px;
height: 20px;
line-height: 16px;
box-sizing: border-box;
padding: 2px;
background: white;
overflow: hidden;
}
</style>
</head>
<body>
<noscript>
<strong>Need JS</strong>
</noscript>
<button onclick="shift()">Shift down</button>
<div id="app">
<div id="pane"></div>
</div>
</body>
</html>
<script>
var pos = 0;
function shift() {
pos++;
document.getElementById('pane').style.top = pos + 'px';
}
function createTable(nr, nc) {
let table = document.createElement('table');
table.className = 'table';
for (let i = 0; i < nr; i++) {
let tr = document.createElement('tr');
for (let j = 0; j < nc; j++) {
let td = document.createElement('td');
let span = document.createElement('span');
span.innerHTML = i + j;
td.className = 'cell';
td.style.color = 'blue';
td.appendChild(span);
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
document.getElementById('pane').appendChild(createTable(80, 80));
</script>
Тогда вопрос к экспертам Vue.js: что Vue делает с DOM длягарантировать наблюдаемое поведение в первой скрипке ???