页面渲染：重绘，回流/重排，重塑

最新推荐文章于 2022-05-22 16:10:01 发布

众乐-Ryan

最新推荐文章于 2022-05-22 16:10:01 发布

阅读量2.3k

点赞数

分类专栏： web前端文章标签： web前端

web前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原文：Rendering: repaint, reflow/relayout, restyle

标题包含5个R开头的单词，很酷不是吗？让我们讨论下页面渲染--页面的生命周期 2.0的一个阶段，有的时候是在发生在下载组件的过程中。

给定大量的HTML，CSS也可能有JavaScript，浏览器是如何在屏幕上展现页面的呢？

渲染的过程

不同的浏览器的渲染原理不一样，但是一旦浏览器将你页面的代码下载下来后，下面的图表给出了大致的原理，或多或少是跨浏览器一致的。

Rendering process in the browser

1、浏览器解析HTML源代码（各个标签），并且构造一棵DOM树 -- 一个数据表示，每一个HTML标签都在里面有一个对应的节点，标签间的文本块也都有一个对应的文本节点表示。DOM树中的根节点是documentElement(HTML标签)。

2、然后浏览器开始解析CSS代码，搞清楚CSS代码里给定的各种可能的Hack，并果断忽略大量的-moz，-webkit前缀和其他浏览器并不懂的扩展。样式信息渲染的先后顺序为：

在用户代理里面（浏览器默认）的基本规则；然后是可能的用户自己的样式，作者（在作者页面）的样式 -- 外部的，导入的，行内的，最后是嵌入在HTML标签的style属性里的样式代码。

3、接下来是很有意思的部分 -- 构造渲染树。渲染树在一定程度上和DOM树比较类似，但和DOM树并不完全匹配。渲染树知道DOM的样式，因此如果你用display:none;来隐藏了一个元素，它就不会出现在渲染树中。类似的，像其他可见元素也不在渲染树中，比如head以及head内的所有元素。另一方面，在渲染树中有的元素被多于一个的节点表示 -- 像文本节点，在<p>元素里的每一行文本都需要一个渲染节点来表示。一个渲染树中的节点被称为一个结构，或者一个盒子（在CSS盒子中，依据的是盒模型）。每一个这些节点都有对应的CSS盒属性 -- width, height, border, margin等等。

4、一旦渲染树被构造完成，浏览器就可以在页面上去绘制渲染树。

森林与树

让我们举个例子。

HTML代码：

<html>
<head>
  <title>Beautiful page</title>
</head>
<body>
    
  <p>
    Once upon a time there was 
    a looong paragraph...
  </p>
  
  <div style="display: none">
    Secret message
  </div>
  
  <div><img src="..." /></div>
  ...
 
</body>
</html>

代表HTML文档结构的DOM树基本上每一个标签都有一个节点，每一个在节点间的文本都有一个文本节点相对应（简单起见，我们忽略空格也是文本节点的事实）：

documentElement (html)
    head
        title
    body
        p
            [text node]
		
        div 
            [text node]
		
        div
            img
		
        ...

渲染树是DOM树视觉的一部分。它缺少了一些东西 -- head以及隐藏的div，但是对于多行的文本它有额外的节点（又叫结构，也叫盒子）：

root (RenderView)
    body
        p
            line 1
	    line 2
	    line 3
	    ...
	    
	div
	    img
	    
	...

渲染树的根节点是包含所有其他元素的结构（或盒子）。你可以把它认为是浏览器窗口内部的部分，因为这是页面往外蔓延的禁区。从技术上讲，Webkit内核的浏览器叫根节点为RendView，它对应着CSS 最初始的包含块，基本上视口矩形范围是从页面的左上角(0,0)到(window.innerWidth, window.innerHeight)。

要弄清楚如何在屏幕上展示页面，包含一个对渲染树的递归遍历的过程。