其他分享
首页 > 其他分享> > 浏览器渲染机制?什么是回流(reflow)、重绘(repaint)?

浏览器渲染机制?什么是回流(reflow)、重绘(repaint)?

作者:互联网

浏览器的渲染机制
解析 DOM 树

解析 CSSDOM 树

有了 DOM 树,CSSDOM 树,进行渲染,形成 Render Tree

layout 浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置

painting 绘制

reflow 回流

repaint 重绘 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

 

什么是回流(影响布局的情况)
浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,这个过程就是回流

 

什么是重绘(不影响布局的情况)
改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

标签:repaint,浏览器,reflow,渲染,布局,回流,重绘,重画
来源: https://www.cnblogs.com/zhangyue690811/p/14720982.html