本文主要是介绍浏览器渲染只之---回流、重绘，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、回流
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。
在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的DOM元素重新排列，它的影响范围有两种：
全局范围：从根节点开始，对整个渲染树进行重新布局
局部范围：对渲染树的某部分或者一个渲染对象进行重新布局
- 浏览器窗口大小发生改变
- 添加、删除可见DOM元素
- 元素尺寸改变-边距、填充、边框、宽、高
- 元素字体大小变化
- 激活 CSS 伪类，比如 :hover
- 计算offsetWidth和offsetHeight属性
一些常用且会导致回流的属性和方法:
- clientWidth,clientHeight,clientTop,clientLeft
- offsetWidth,offsetHeight,offsetTop,offsetLeft
- scrollWidth,scrollHeight,scrollTop,scrollLeft,scrollIntoView()
2、重绘
当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。
- color、background 相关属性：background-color、background-image 等
- outline 相关属性：outline-color、outline-width 、text-decoration
- border-radius、visibility、box-shadow
3、性能影响
回流比重绘的代价要更高
对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的
position属性设置为absolute或者fixed，将动画脱离文档流，这样他的回流就不会影响到页面了。
这篇关于浏览器渲染只之---回流、重绘的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
