浏览器的重排和重绘

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


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


布局是一个递归的过程。它从根呈现器<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 =================

我就是我,是不想绽放的烟火!

381 声望
26 粉丝
0 条评论
推荐阅读
【译】深入了解现代web浏览器(三)渲染进程内部工作
渲染器进程涉及web优化的许多方面。由于渲染进程内部发生了很多事情,因此本文只是概述。如果你想更加深入,“web基础知识的性能优化部分”有更多的资源。

silence阅读 1.1k

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

我就是我,是不想绽放的烟火!

381 声望
26 粉丝
宣传栏