重排一定会重绘吗？这不是科普贴，我只是想问个问题我看过很多文章都说重排必定引起重绘，但是我测试的时候发现不是这样的我测试

这不是科普贴，我只是想问个问题
我看过很多文章都说重排必定引起重绘，但是我测试的时候发现不是这样的

我测试的例子如下

<!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>Document</title>
  <style>
    .box {
      transform: translateZ(0);
      width: 100px;
      height: 100px;
      background-color: aqua;
      position: relative;
    }

    .box1 {
      transform: translateZ(0);
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="box">hello</div>
  <div class="box1">nihao</div>
  <script>
    let box1 = document.querySelector('.box1')
    let box = document.querySelector('.box')

    setTimeout(() => {
      box.style.left = "300px"
    }, 1000)

  </script>
</body>

</html>

从图里可以看到触发了Layout但是没有触发Paint
我大概知道是因为box提升为了合成层，我把box整个图层向右移了，没有改变它的内容，所以没触发Paint
document 层中的内容也没有发生变化，所以也没有触发Paint
所以重排也不一定重绘，可以这么理解吗？