面试官：什么是重绘和回流？

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

了解浏览器的渲染机制

浏览器采用流式布局模型

1、首先浏览器会将HTML解析成DOM，然后再将CSS解析成CSSOM
2、把DOM和CSSOM结合生成render tree渲染树
3、浏览器根据渲染树将节点绘制到页面上

回流

当渲染树中的一些元素的结构或者尺寸等发生改变时，浏览器重新渲染部分或者全部文档的过程
叫做回流。
会导致回流的行为：
	页面初次渲染
	浏览器窗口大小发生改变
	content文本内容变换
	新增删除节点
	激活css伪类

重绘

当页面中元素的样式发生改变时，并且元素的样式改变不会改变元素在文档流中的位置，那么浏览器会将
新样式赋予给元素，这个过程叫做重绘。
会导致重绘的行为：
		background
		visibility
		绝对定位位置修改（使用绝对定位元素会脱离文档流，因此修改位置样式，不会导致回流）

总结

回流的性能消耗比重绘大，回流必导致重绘，而重绘不一定回流。
能用重绘实现的效果就不要使用回流。

结束啦！