重绘和回流
渲染步骤：
1.解析（Parser）HTML，生成DOM树（DOM Tree）
2.同时解析（Parser）CSS，生成样式规则（Style Rules）
3.根据DOM树和样式规则，生成渲染树（Render Tree）
4.进行布局Layout（回流/重排）：根据生成的渲染树，得到所有节点的几何信息（位置、大小），分配网页的空间
5.进行绘制Painting（重绘）：根据计算和获取的信息进行整个页面的绘制
6.Display：展示在页面上
回流/重排：当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程
重绘：由于节点（元素）的样式的改变不影响它在文档流中的位置和文档布局时（如color、background-color、outline等）
注意点：重绘不一定引起回流，但回流一定会引起重绘
会导致回流/重排的操作：
- 页面的首次刷新
- 浏览器的窗口大小发生改变
- 元素的大小和位置发生改变
- 改变字体的大小
- 内容的变化（如：图片的大小）
- 激活css伪类（如：:hover）
- JS操作DOM（添加或删除DOM元素）
简单理解就是，影响到空间信息了，就会有回流
标签：DOM,渲染,Tree,JS,重排,回流,重绘 来源： https://www.cnblogs.com/jzhFlash/p/16433792.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。