Javascript 如果父样式发生更改，则手动修改的DOM节点样式将无效_Javascript_Css_Google Chrome_Vue.js_Blink

Javascript 如果父样式发生更改，则手动修改的DOM节点样式将无效

javascript css google-chrome vue.js

Javascript 如果父样式发生更改，则手动修改的DOM节点样式将无效,javascript,css,google-chrome,vue.js,blink,Javascript,Css,Google Chrome,Vue.js,Blink,请看一下这个问题（我在这里使用Vue.js生成了很多DOM节点，但我的问题似乎不是与Vue相关的问题）：当我使用Chrome的性能工具连续快速按下按钮监控性能时，我看到42ms的“更新层树”渲染延迟，这是有意义的，因为内容在页面上移动，所以为什么不呢（顺便说一句，我仍然想知道是否有办法消除这种情况）但是，当我取消注释第30行时，事情就变得不对劲了，因此在Javascript中手动设置td的样式： //nr = 50, nc = 50; for (let i = 0; i < nr; i

请看一下这个问题（我在这里使用Vue.js生成了很多DOM节点，但我的问题似乎不是与Vue相关的问题）：

当我使用Chrome的性能工具连续快速按下按钮监控性能时，我看到42ms的“更新层树”渲染延迟，这是有意义的，因为内容在页面上移动，所以为什么不呢（顺便说一句，我仍然想知道是否有办法消除这种情况）

但是，当我取消注释第30行时，事情就变得不对劲了，因此在Javascript中手动设置td的样式：

//nr = 50, nc = 50;
for (let i = 0; i < nr; i++) {
  for (let j = 0; j < nc; j++) {
    this.$refs[i + ':' + j][0].style.color = 'blue';
  }
}

//nr=50，nc=50；
for（设i=0；i


当我现在监控性能时，我看到当按下“向下移动”按钮时，所有2500个TD节点都添加到Chrome中的“重新计算样式”。我就是不明白这有什么意义？使用类而不是手动设置样式不会导致这种情况发生
这只是试图理解浏览器的样式失效逻辑，而不是真正的应用程序，因此这里的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>


创建表测试
身体{
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
填充：20px；
}
#应用程序{
位置：相对位置；
}
#窗格玻璃{
位置：绝对位置；
}
.桌子{
表布局：固定；
边界塌陷：塌陷；
保证金：0；
填充：0；
边界：隐藏；
宽度：8000px；
高度：1600px；
}
.细胞{
宽度：100px；
高度：20px；
线高：16px；
框大小：边框框；
填充：2px；
背景：白色；
溢出：隐藏；
}
需要JS
下移
var-pos=0；
函数移位（）{
pos++；
document.getElementById（'pane'）.style.top=pos+'px'；
}
函数createTable（nr，nc）{
让table=document.createElement（'table'）；
table.className='table'；
for（设i=0；i

向Vue.js专家提出的问题：Vue对DOM做了什么来保证观察到的行为