浏览器的重排和重绘

参考文章:https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

浏览器的高层结构

browser.png


1、用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。
2、浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
3、渲染引擎 - 负责显示请求的内容。
4、网络 - 用于网络调用,比如http请求。
5、用户界面后端 - 用于绘制基本的窗口小部件。
6、javascript解释器 - 用于解析和执行javascript代码。
7、数据存储 - 数据持久化。

和大多数浏览器不同,Chrome 浏览器的每个标签页都分别对应一个渲染引擎实例。每个标签页都是一个独立的进程。

渲染引擎主流程

basic.png


1、 解析 HTML 文档,构建DOM树。解析外部 CSS 文件和行内样式,生成 CSS 规则树。
2、将 DOM 树和 CSS 规则树连接在一起创建了另一个渲染树Render Tree,它是一个带有多个视觉属性的(颜色、尺寸)的矩形,这些矩形的排列顺序就是它们在屏幕上的显示顺序。
3、开始进入“布局”处理阶段,也就是为每个节点分配一个出现在屏幕上的确切坐标。
4、“绘制”阶段,渲染引擎遍历渲染树,由用户后端层将每个节点绘制出来。

主流程示例


main.png

呈现树构建

在 DOM 树构建的同时,浏览器还会构建另一个树结构:呈现树。这是由可视化元素按照其显示顺序而组成的树,也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。

Firefox 将呈现树中的元素称为“框架”。WebKit 使用的术语是呈现器或呈现对象。

呈现器知道如何布局并将自身及其子元素绘制出来。

每一个呈现器都代表了一个矩形的区域,通常对应于相关节点的 CSS 框,它包含诸如宽度、高度和位置等几何信息。

重排 or 布局

渲染引擎在渲染树创建完成的时候,并不包含位置和大小信息。计算这些值的过程称为布局或重排。


HTML采用基于流的布局模型,这意味着大多数情况下只要一次遍历就能计算出几何信息。处于流中靠后位置元素不会影响靠前位置元素的几何特征,因此布局可以按照从左往右,从上往下的顺序遍历文档。


坐标系是相对于根框架而建立的,使用的是上坐标和左坐标。


布局是一个递归的过程。它从根呈现器开始,然后递归遍历部分或所有的框架层次结构,为每一个需要计算的呈现器计算几何信息。


根呈现器的位置左边是0,0,其尺寸为视口(也就是浏览器窗口的可见区域)。


所有的呈现器都会有一个“layout”或“reflow”方法,没一个呈现器都会调用需要布局的子代的layout方法。
**

Dirty 位系统


为避免对所有细小更改都进行整体布局,浏览器采用了一种“dirty 位”系统。如果某个呈现器发生了更改,或者将自身及其子代标注为“dirty”,则需要进行布局。


有两种标记:“dirty”和“children are dirty”。“children are dirty”表示尽管呈现器自身没有变化,但它至少有一个子代需要布局。

全量布局和增量布局

全局布局是指触发了整个呈现树范围的布局,触发原因可能包括:

  1. 影响所有呈现器的全局样式更改,例如字体大小更改。
  2. 屏幕大小调整。


布局可以采用增量方式,也就是只对 dirty 呈现器进行布局。

全局布局往往是同步触发的。
增量布局是异步执行的,webkit有用于执行增量布局的计时器:对呈现树进行遍历,并对dirty呈现器进行布局。

绘制

在绘制阶段,系统会便利呈现树,并调用呈现树的“paint”方法,将呈现树的内容显示在屏幕上。


绘制也分为全局绘制和增量绘制。


增量绘制中,部分呈现器发生了更改,但是不会影响整个树,更改后的呈现器将其在屏幕上对应的矩形区域设为无效,这导致操作系统将其视为一块“dirty区域”,并生成“paint”事件。操作系统会巧妙地将多个区域合并成一个。

绘制顺序

绘制的顺序就是元素进入堆栈样式上下文的顺序。下面是css2规范的绘制流程顺序:

https://drafts.csswg.org/css2/#stacking-context


Within each stacking context, the following layers are painted in back-to-front order:

  1. the background and borders of the element forming the stacking context.
  2. the child stacking contexts with negative stack levels (most negative first).
  3. the in-flow, non-inline-level, non-positioned descendants.
  4. the non-positioned floats.
  5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  7. the child stacking contexts with positive stack levels (least positive first).

重排和重绘区别

重排顾名思义就是重新排列,意味着重新计算文档中元素的位置和几何信息(元素的位置、大小),会影响部分或整个页面的布局。元素的重排将导致DOM中所有子元素和其他兄弟元素重新排列。


重绘是更改元素的可见性,但是不影响元素的布局。例如可见性、背景色、轮廓等。


不管是重排还是重绘都是很“昂贵“的操作。

什么会触发重排和重绘?

  • 添加、删除、更新DOM节点都会触发重排
  • 使用 display: none 隐藏元素会触发重排和重绘
  • 使用 visibility:hidden 只会引起重绘,因为没有布局和位置的变更
  • 移动节点、添加动画都会触发重排和重绘
  • 改变浏览器窗口大小会触发重排
  • 更改元素字体大小会触发重排
  • 添加或者删除样式会触发重排和重绘
  • 操作 DOM 脚本是昂贵的操作,因为每次 document 或者 document的部分改变时,它们都会重新计算。
var bodyStyle = document.body.style; // cache

bodyStyle.padding = "20px"; // reflow, repaint
bodyStyle.border = "10px solid red"; // reflow, repaint

bodyStyle.color = "blue"; // repaint only, no dimensions changed
bstyle.backgroundColor = "#cc0000"; // repaint

bodyStyle.fontSize = "2em"; // reflow, repaint

// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('Hello!'));

如何减少重排和重绘?

  • 不要一个一个更改样式,从健壮性和可维护性来说我们应该改变class名称,而不是直接修改style。如果style是动态的,那么可以编辑 cssText 属性。
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// better 
el.className += " theclassname";

// or when top and left are calculated dynamically...

// better
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
  • 批量更改DOM。使用 documentFragment 保存零时的改变,复制、更新、替换节点,使用display:none(1次重排,1次重绘),然后更改100次,再重新显示(总共2次重排,2次重绘)。
  • 不要重复的请求计算属性(getComputedStyle),将它缓存起来。多次读写都会触发重排。我们要做的是先读取所有内容,然后再写。**

============哎呀,奇奇怪怪的小知识又增加了,2021-02-24 silence =============

你可能感兴趣的:(浏览器的重排和重绘)