牛客网前端面试题-重绘和重排

重绘

元素的外观改变出发的浏览器行为，浏览器会根据元素的新属性重新绘制，是元素外观重新展示。重绘不会重新布局。

重排

dom树会重新计算，节点的增删等就会改变dom树，发生重排。条哼元素的一些样式，比如修改窗口的大小，都会出发重排。

重绘不一定重排，重排一定会重绘。

---

引起重绘的常有属性
color border-style border-radius
visibility text-decoration box-shadow
background background-image background-position background-size background-repeat
outline-width outline-color outline-style outline

---

引起重排的属性和场景

1. 增删可见的dom元素
2. 元素的位置改变
3. 元素的尺寸改变
4. 页面渲染初始化
5. 浏览器窗口大小改变
6. 设置style属性
7. 改变文字大小
8. 激活伪类
9. 操作class属性
10. 内容改变
11. 添加删除样式表

---

请简述浏览器渲染页面的过程,并给出下方script代码中对哪些CSS属性的"修改"会触发重绘（repaint）和重排（reflow）？

<style>.sg-container {padding: 10px;margin-bottom: 10px;width: 100px; height: 100px;}</style>
<div class="sg-container">
    <p style="line-height:20px">2019搜狗校园招聘</p>
<script>
    document.querySelector('p').style.cssText +='height:10px; line-height:24px;font-size:20px;visibility:hidden;background-color:#00f;border:1px solid #f00';
</script>
</div>

重排属性：height、line-height、font-size、border
重绘属性：height、line-height、font-size 、border、background-color、visibility

浏览器渲染过程因不同内核可能会有差异，现以webkit为例描述浏览器渲染原理，浏览器渲染过程主要分为三个阶段，先详述如下：
第一阶段：

1. 用户输入URL时，webkit依赖网络模块加载网页或资源数据
2. 网页被交给HTML解释器转变成一系列的词语
3. 解释器根据词语构建节点并形成DOM树
4. 如果节点是CSS、图片、视频等资源，会调用资源加载器加载他们，因该类资源加载是异步的，不会阻塞当前DOM树的继续创建
5. 如果节点是javascript，停止当前DOM树的创建，直到javascript资源加载完成并被javascript引擎执行后才继续进行DOM的创建
   第二阶段：
6. CSS解释器解析CSS文件成内部表示结构，并在DOM树上附加样式信息形成RenderObject树
7. RenderObject节点在创建的同时，webkit会根据网页的层次结构创建RenderLayer树，同时创建一个虚拟的绘图上下文
   第三阶段：
   1.根据生成的绘图上下文和2D或3D图形库生成最终的图像
   对于包含动画和用户交互的动态网页，浏览器的渲染过程会重复的执行，可能会触发不同程度的重排和重绘。

参考文章
https://blog.csdn.net/xiaojinguniang/article/details/86544747
http://caibaojian.com/css-reflow-repaint.html
https://www.cnblogs.com/yadongliang/p/10677589.html