在介绍浏览器的重排与重绘之前，先了解一下浏览器的工作原理一旦我们了解了浏览器是如何工作的，我们就可以更好的去驾驭它。
现代浏览器通常拥有两个重要的执行线程，这两个线程相互配合来渲染出页面：
主线程
通常情况下，主线程主要负责以下工作：运行JavaScript、计算HTML元素的CSS样式、布局页面、把页面元素绘制成一个或多个位图、把这些位图移交给排版线程
排版线程
通常情况下，排版线程主要负责以下工作：通过GPU渲染位图，并显示在屏幕上、向主线程请求更新位图的可见部分或即将可见的部分、判断出当前页面处于可见的部分、判断出即将通过页面滚动而可见的部分、随着用户滚动页面来移动这些部分（可见部分的和即将可见的部分）
GPU
排版线程通过GPU把位图绘制到了屏幕上。
GPU比较擅长于：绘制位图到屏幕、重复的绘制同一个位图、在不同的位置，以不同的旋转角度，或者不同的缩放大小来绘制同一个位图。
GPU相对慢的地方：将位图加载到显存里。
重排与重绘
浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。
DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点（隐藏的DOM元素 disply值为none 在渲染树中没有对应的节点）。渲染树中的节点被称为“帧”或“盒”,符合CSS模型的定义，理解页面元素为一个具有填充，边距，边框和位置的盒子。一旦 DOM和渲染树构建完成，浏览器就开始显示（绘制）页面元素。
当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。
tips：并不是所有的DOM变化都会影响几何属性，比如改变一个元素的背景色并不会影响元素的宽和高，这种情况下只会发生重绘。
引起重排的情况
很显然，每次重排，必然会导致重绘，那么，重排会在哪些情况下发生？
- 添加或者删除可见的DOM元素
- 元素位置改变
- 元素尺寸改变
- 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
- 页面渲染初始化（无法避免）
- 浏览器窗口尺寸改变
这些都是显而易见的，或许你已经有过这样的体会，不间断地改变浏览器窗口大小，导致UI反应迟钝（某些低版本IE下甚至直接挂掉），现在你可能恍然大悟，没错，正是一次次的重排重绘导致的！
transition
了解了重排与重绘之后，现在我们看一下浏览器的主线程和排版线程是如何协同工作来完成一个CSS Transition的。
假设我们想要将一个元素的高度值从100px转换到200px，如下所示：
div {
height: 100px;
transition: height 1s linear;
}
div:hover {
height: 200px;
}
主线程和排版线程会根据下图所示时序图来完成这个Transition。注意：在橙色方框中的操作是潜在的耗时操作，蓝色方框中的操作是较快的操作。
这里写图片描述
正如你所见，整个过程有很多橙色的方框，意味着浏览器有相当繁重的工作要处理，也意味着这个Transition可能会出现卡顿。
在整个Transition的每一帧中，浏览器都要去重新布局，绘制页面，并把最新的位图对象加载到GPU。我们前边了解过，把位图对象加载到GPU的内存中是个相对缓慢的操作。
浏览器之所以要在每一帧动画上处理如此繁重的工作是因为这个元素的内容一直在变化。修改一个元素的高度可能会引起其子元素也要相应的改变大小，因此浏览器必须去重新布局。重新布局后，主线程必须为该元素重新生成位图对象。
transition: transform
由此可见，对高度进行的Transition相对来说性能比较差，那有一些性能比较好的Transition吗？
假设我们想要把一个元素从一半大小缩放到实际大小，并假设我们使用CSS的transform 属性来对它进行缩放，同时使用CSS的transition属性来生成缩放的动画效果，如下所示：
div {
transform: scale(0.5);
transition: transform 1s linear;
}
div:hover {
transform: scale(1.0);
}
这里写图片描述
我们看到只有很少的几个橙色的方框，意味着这个动画效果可能会很流畅！那么，一个元素的transform动画效果与其高度的动画效果有什么不同呢？
根据定义，CSS的transform属性不会改变元素的布局，也不会影响到其周围的元素。它把元素当做一个整体看待——缩放整个元素、旋转整个元素或者移动整个元素。
这对浏览器来说是一个好消息！浏览器只需在动画开始的时候生成这个元素的位图对象，并把它传递给GPU。在这之后，浏览器无需再做任何重新布局，绘制页面以及传递位图对象的操作了，相反，浏览器可以利用GPU擅长的绘制的特点来快速的在不同的位置，旋转或缩放同一个位图对象。
设计决策
那么，是否这就意味这我们不要去缓动一个元素的高度？非也，一些情况下，这是你的设计效果的一部分，并且动画效果可以非常快的完成。也许动画的元素是孤立的，不会引起页面其他部分进行重新布局；也许该元素只是单纯的进行重绘，浏览器可以快速的完成；也许该元素很小，浏览器只需将很小的位图对象传递给GPU。
当然了，在不影响你设计的视觉效果的情况下，最好去缓动一个性能较好的CSS属性，如transform，而不是去缓动一个性能较差的CSS属性，如height。举例来说，假设你的设计中有一个按钮，当点击它的时候会出来一个菜单，试着去缓动菜单的transform属性来显示它而不是缓动它的top或height属性来达到类似的效果。
在动画上特别快的CSS属性包括：
- CSS transform
- CSS opacity
- CSS filter
下面介绍重排重绘造成的性能开销和如何进行优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-transform转换成maxtrix</title>
<style>
.container{
position: relative;
min-height: 400px;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: orange;
}
.animation-run{
animation: move 4s infinite;
}
@keyframes move {
0%{
top: 0;
left: 0;
}
25%{
top: 0;
left: 200px;
}
50%{
top: 200px;
left: 200px;
}
75%{
top: 200px;
left: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box animation-run"></div>
</div>
</body>
</html>
这个是没有开启3d的动画，下面进行录制20s看看主要消耗的时间是哪一部分，主要开销的时间是刚刚开始rendering的时间和造成重排的时间
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-transform转换成maxtrix</title>
<style>
.container{
position: relative;
min-height: 400px;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: orange;
}
.animation-run{
animation: move 4s infinite;
}
/* transform不会发生重排重绘 */
@keyframes move {
0%{
transform: translate(0,0);
}
25%{
transform: translate(200px,0);
}
50%{
transform: translate(200px,200px);
}
75%{
transform: translate(0,200px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box animation-run"></div>
</div>
</body>
</html>
这个例子是使用transform来做动画，开启了硬件加速，不会造成重排重绘，很明显下图没有了paint消耗的时间
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-transform转换成maxtrix</title>
<style>
.container{
position: relative;
min-height: 400px;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: orange;
}
.animation-run{
animation: move 4s infinite;
}
/* 用矩阵加快性能速度 */
@keyframes move {
0%{
transform: matrix(0)
}
25%{
transform: matrix(1, 0, 0, 1, 200, 0)
}
50%{
transform: matrix(1, 0, 0, 1, 200, 200);
}
75%{
transform: matrix(1, 0, 0, 1, 0, 200);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box animation-run"></div>
</div>
</body>
</html>
最终优化版本，里面采用了transform做动画，开启了硬件加速，如果把translate转换成矩阵，进行了深度的优化
image.png
总结
重排和重绘是DOM编程中耗能的主要原因之一，平时涉及DOM编程时可以参考以下几点：
- 尽量不要在布局信息改变时做查询（会导致渲染队列强制刷新）
- 同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）
- 如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排（fragment元素的应用）
- 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
网友评论