详解重排重绘
- 前言
- 页面渲染
- 页面渲染
- 重排
- 重绘
- 重排重绘哪个更耗时间
- 避免重排重绘
- 发生重排重绘实例
前言
本文主要讲解在页面加载成功后可能因为页面中DOM元素样式或布局被修改从而引发的重排重绘进行一个讲解，那么好，本文正式开始.
页面渲染
因为重排重绘这两个概念其实是基于页面渲染这个层面进行一个拓展和延申，那么我们在讲解重排重绘前，先了解以下页面是如何渲染的，这里不对URL、DNS解析、三次握手四次挥手做深入展开，只针对渲染做讲解。
页面渲染
- 解析HTML，并把解析到的HTML渲染到DOM树，包括元素和布局都解析上去。
- 解析CSS，就是将CSS解析到CSSOM（规则）树。
- 将HTML树和CSS树构建成一个render（呈现）树。
- 布局：根据render树上各个DOM元素上的位置，在页面上进行对应的布局。
- 绘制：遍历render树进行页面元素的进一步的绘制。
那么了解这些，接下来讲解重排重绘的概念以及影响就方便很多了。
重排
概念：页面布局发生影响，比如某个在页面上已经呈现且在DOM树中的元素，被删除了，同时DOM树也没有这个节点了，那么就会进行重排操作。
重绘
概念：页面样式发生影响，比如某个元素的颜色发生变化了，这时候浏览器就会自动进行重绘的操作。
重排重绘哪个更耗时间
重排要比重绘更耗时间，因为在页面渲染模块我们发现，布局是要比绘制更耗时间，因为重排需要涉及到更多的关于遍历DOM树深度等的计算操作，而重绘省去了布局和分层阶段，所以重绘的效率更高
避免重排重绘
当我们频繁的去让页面处在一个动态的状态下，那么就会导致不断的去自动发生重排重绘的操作，那么就会对性能造成影响，所以在日常开发中，应该尽量避免重排重绘操作的出现。
发生重排重绘实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:100px;
height:100px;
border:1px solid gray;
}
</style>
</head>
<body>
<div id="chongpai"></div><br>
<button onclick="btn1()">点击重排</button>
<div id="chonghui"></div><br>
<button onclick="btn2()">点击重绘</button>
<script>
let cp=document.getElementById('chongpai')
let ch=document.getElementById('chonghui')
function btn1(){
cp.style.display="none"
}
function btn2(){
ch.style.backgroundColor='red'
}
</script>
</body>
</html>
默认图：
点击重排按钮，调用重排：
在上述按钮中，我们创建了一个方法，这个方法控制div元素，让上面div元素的display为none，同时displaynone就是把渲染树上的这个div进行去除，那么就会导致重排效果出现。
点击重绘：
点击重绘后我们发现，颜色发生改变，那么如果样式发生变化时，就会引起重绘。
