重绘和重排、合成

重排

什么是重排

在解决这个问题之前我们先来看看渲染流水线。

重排-1.png

我们知道一个页面的显示要经历上面的这些步骤，最后才能看到我们屏幕上看到的页面。如果我们改变元素的几何位置，页面的布局是不是会发生改变，因此是不是就要重新走布局后面的所有流程，这个过程就叫做重排。

重排就是我们通过js修改元素的几何属性（width, height）,触发浏览器的重新布局，走DOM解析之后的一系列子阶段，重新渲染页面的过程。

在浏览器中看到重排

我们就看一段简单的代码

<!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{
            color:blue;
            background-color: red;
            width:200px;
            height: 200px;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="box">重排</div>
      <!-- <script>
        const div = document.getElementById('box')
      setTimeout(() => {
        div.style.width = '1000px'
      }, 1000)
    </script> -->
</body>
</html>

在浏览器中我们点击permance(chorme),然后点击Main。

重排-2.png

在main中我们找到渲染流程

重排-3.png

重拍-7.png 重排-4.png

重拍-5.png

这时一个页面，就绘制完成了，如果我们在代码中注释的脚本打开我们再来看一下在Composite Layers后面有没有触发Layout。

第一次渲染

重排-6.png

一秒过后

重拍-7.png

很清楚的可以看到浏览器一秒过后又重性布局了一遍，走了parseHTML后面的所有流程。

重绘

什么是重绘

要回答这个问题，我们还是要看渲染流水线

重绘-1.webp

有了重排的基础，我们可以轻松了理解重绘，重绘回跳过生成布局树的阶段直接进入绘制阶段（Paint）。

重绘就是我们修改元素的非几何位置的样式时，触发浏览器的重绘事件，走Paint阶段后面的一系列流程，完成页面更新。

在浏览器中看到重绘

还是来看一段简单的代码

<!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{
            color:blue;
            background-color: red;
            width:200px;
            height: 200px;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="box">重排</div>
     <script>
        const div = document.getElementById('box')
      setTimeout(() => {
        div.style.backgroundColor = 'blue'
      }, 1000)
    </script>
</body>
</html>

在浏览器的perfermance中

我们可以首次渲染

重绘-2.png

一秒过后

重绘-2.png

浏览器跳过了布局阶段直接进行绘制。

合成

什么是合成

还是继续看渲染流水线

合成-1.png

使用transforme制作的动画会跳过重拍和重绘，直接在非主线程上进行合成动画。