重绘
元素的外观改变出发的浏览器行为,浏览器会根据元素的新属性重新绘制,是元素外观重新展示。重绘不会重新布局。
重排
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
引起重排的属性和场景
- 增删可见的dom元素
- 元素的位置改变
- 元素的尺寸改变
- 页面渲染初始化
- 浏览器窗口大小改变
- 设置style属性
- 改变文字大小
- 激活伪类
- 操作class属性
- 内容改变
- 添加删除样式表
请简述浏览器渲染页面的过程,并给出下方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为例描述浏览器渲染原理,浏览器渲染过程主要分为三个阶段,先详述如下:
第一阶段:
- 用户输入URL时,webkit依赖网络模块加载网页或资源数据
- 网页被交给HTML解释器转变成一系列的词语
- 解释器根据词语构建节点并形成DOM树
- 如果节点是CSS、图片、视频等资源,会调用资源加载器加载他们,因该类资源加载是异步的,不会阻塞当前DOM树的继续创建
- 如果节点是javascript,停止当前DOM树的创建,直到javascript资源加载完成并被javascript引擎执行后才继续进行DOM的创建
第二阶段: - CSS解释器解析CSS文件成内部表示结构,并在DOM树上附加样式信息形成RenderObject树
- 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