网页渲染的基本过程

电玩女神 2022-07-19 02:18 146阅读 0赞

**早上起来突然想看看网页渲染这一过程的实现，于是几经查阅质料归纳如下**

**网页渲染**必须在很早的阶段进行，可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧，从而避免在实践的过程中遇到性能问题。

**渲染引擎**的主要目的就是从一个网页的URL开始，经过一系列的复杂处理过程之后，变成一个可视化的结果，这一过程就是这里所说的页面渲染的基本过程。

所谓的渲染，就是根据描述或者定义构建数学模型，通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/JavaScript转换成图像结果的模块，如下图所示，输入是URL对应的各种资源，输出是可视化的图像。从这里看，非常的简单和容易理解。  
![这里写图片描述][20160809080457152]

## 渲染模块 ##

那么渲染引擎提供了哪些功能模块来支持页面渲染的呢？下图是一个渲染引擎所包含的基本功能和它们依赖的一些第三方库。  
![这里写图片描述][20160809080533200]  
从图中大致可以看出，一个渲染引擎大致包括HTML解释器，CSS解释器，布局和JavaScript引擎。  
下面依次来描述它们：

**HTML解释器**：解释HTML语言的解释器，本质是将HTML文本解释成DOM（文档对象模型）树。

**CSS解释器**：解释样式表的解释器，其作用是将DOM中的各个元素对象加上样式信息，从而为计算最后结果的布局提供依据。  
布局：DOM之后，需要将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型。

**JavaScript引擎**：JavaScript可以修改网页的内容，也能修改CSS的信息，JavaScript引擎解释JavaScript代码并把代码的逻辑和对DOM和CSS的改动信息应用到布局中去，从而改变渲染的结果。

这些模块依赖很多其他的基础模块，这其中包括网络，存储，2D/3D图形，音频视频和图片解码器等。实际上，渲染引擎中还应该包括如何使用这些依赖模块的部分，这部分的工作其实并不少，因为需要使用它们来高效的渲染网页。例如，利用2D/3D图形库来实现高性能的网页绘制和网页的3D渲染，这个实现非常非常的复杂。最后，当然，在最下面，依然少不了操作系统的支持，例如线程支持，文件支持等等。

## 基本过程 ##

浏览器是如何完成网页渲染？

首先，我们回顾一下网页渲染时，浏览器的动作：

1、根据来自服务器端的HTML代码形成文档对象模型（DOM）。

2、加载并解析样式，形成CSS对象模型。

在文档对象模型和CSS对象模型之上，创建一棵由一组待生成渲染的对象组成的渲染树（在Webkit中这些对象被称为渲染器或渲染对象，而在Gecko中称之为“frame”。）渲染树反映了文档对象模型的结构，但是不包含诸如标签或含有`display:none`属性的不可见元素。在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的DOM对象，或者文本块，还加上计算过的样式。换言之，渲染树是一个文档对象模型的直观展示。  
对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。  
最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。  
当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重复执行，因为网页的内在结构已经发生了改变。

## **Repaint（重绘）** ##

当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。  
\*\*

## Reflow（重排） ##

\*\*  
当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。  
这些改变通常由以下事件触发：

> 1、DOM操作（元素添加、删除、修改或者元素顺序的改变）；  
> 2、内容变化，包括表单域内的文本改变；  
> 3、CSS属性的计算或改变；  
> 4、添加或删除样式表；  
> 5、更改“类”的属性；  
> 6、浏览器窗口的操作（缩放，滚动）；  
> 7、伪类激活（悬停）。  
> 8、浏览器如何优化渲染？

浏览器尽可能将 repaint/reflow 限制在被改变元素的区域内。比如，对于位置固定或绝对的元素，其大小改变只影响元素本身及其子元素，然而，静态定位元素的大小改变会触发后续所有元素的重流。

另一种优化技巧是，在运行几段JavaScript代码时，浏览器会缓存这些改变，在代码运行完毕后再将这些改变经一次通过加以应用。举个例子，下面这段代码只会触发一个reflow和repaint：

var $body = $('body');
    $body.css('padding', '1px'); // reflow, repaint
    $body.css('color', 'red'); // repaint
    $body.css('margin', '2px'); // reflow, repaint
    // only 1 reflow and repaint will actually happen

然而，如前所述，改变元素的属性会触发强制性的重排。如果我们在上面的代码块中加入一行代码，用来访问元素的属性，就会发生这种现象。

var $body = $('body');
    $body.css('padding', '1px');
    $body.css('padding'); // reading a property, a forced reflow
    $body.css('color', 'red');
    $body.css('margin', '2px');

其结果就是，重排发生了两次。因此，你应该把访问元素属性的操作都组织在一起，从而优化网页性能。（[你可以在JSBin查到更为详细的例子][JSBin]）

有时，你必须触发一个强制性重排。比如，我们必须将同样的属性(比如左边距)两次赋值给同一个元素。起初，它应该设置为100px，且不带动效。接着，它必须通过过渡(transition)动效改变为50px。你现在可以在[JSbin][JSBin]上学习这个例子，不过我会在这儿更详细地介绍它。

首先，我们创建一个带过渡效果的CSS类：

.has-transition {
       -webkit-transition: margin-left 1s ease-out;
          -moz-transition: margin-left 1s ease-out;
            -o-transition: margin-left 1s ease-out;
               transition: margin-left 1s ease-out;
    }

然后继续执行：

// our element that has a "has-transition" class by default
    var $targetElem = $('#targetElemId');
    
    // remove the transition class
    $targetElem.removeClass('has-transition');
    
    // change the property expecting the transition to be off, as the class is not there
    // anymore
    $targetElem.css('margin-left', 100);
    
    // put the transition class back
    $targetElem.addClass('has-transition');
    
    // change the property
    $targetElem.css('margin-left', 50);

然而，这个执行无法奏效。所有改变都被缓存，只在代码块末尾加以执行。我们需要的是强制性的重排，我们可以通过以下更改加以实现：

// remove the transition class
    $(this).removeClass('has-transition');
    
    // change the property
    $(this).css('margin-left', 100);
    
    // trigger a forced reflow, so that changes in a class/property get applied immediately
    $(this)[0].offsetHeight; // an example, other properties would work, too
    
    // put the transition class back
    $(this).addClass('has-transition');
    
    // change the property
    $(this).css('margin-left', 50);

现在代码如预期那样执行了。

有关性能优化的实际建议  
总结现有的资料，我提出以下建议：  
创建有效的HTML和CSS文件，不要忘记指明文档的编码方式。样式应该包含在标签内，**脚本代码则应该加在标签末端。**  
尽量简化和优化CSS选择器（这种优化方式几乎被使用CSS预处理器的开发者统一忽视了）将嵌套程度保持在最低水平。以下是CSS选择器的性能排名（从最快者开始）：

> 1、识别器:\#id
> 
> 2、类:.class
> 
> 3、标签：div
> 
> 4、相邻兄弟选择器：a + i
> 
> 5、父类选择器：ul> li
> 
> 6、通用选择器：\*
> 
> 7、属性选择：input\[type=”text”\]
> 
> 8、伪类和伪元素：a:hover

div * {
       ...} // bad
    .list li {
       ...} // bad
    .list-item {
       ...} // good

在你的脚本代码中，尽可能减少DOM操作。缓存所有东西，包括元素属性以及对象（如果它们被重用的话）。当进行复杂的操作时，使用“孤立”元素会更好，之后可以将其加到DOM中（所谓“孤立”元素是与DOM脱离，仅保存在内存中的元素）。  
如果你使用jQuery来选择元素，请遵从jQuery选择器最佳实践方案。  
为了改变元素的样式，修改“类”的属性是奏效的方法之一。执行这一改变时，处在DOM渲染树的位置越深越好（这还有助于将逻辑与表象脱离）。  
尽量只给位置绝对或者固定的元素添加动画效果。  
在使用滚动时禁用复杂的悬停动效（比如，在中添加一个额外的不悬停类）  
了解模块之后，下面就是这些模块如何组织以达成渲染过程的。一般地，一个典型的渲染过程下图所示，这是渲染引擎的核心过程，一切都是围绕着它来的。![这里写图片描述][20160809080557060]  
下面逐个从左至右来解释上图中的这一过程。这一过程的先后关系由图中的实线箭头表示。左上角开始，首先是网页内容，送到HTML解释器。HTML解释器在解释它后形成DOM树，中间如果遇到JavaScript代码则交给JavaScript引擎去处理。如果页面包含CSS，则交给CSS解释器去解析。当DOM建立的时候，接受来自CSS解释的样式信息，构建一个新的内部绘图模型。该模型由布局模块计算模型内部的各个元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制。  
最后解释图中虚线箭头的指向含义。它们表示在渲染过程中，每个阶段可能使用到的其他模块。在网页内容的下载中，需要使用到网络和存储，这个是显而易见地。但计算布局和绘图的时候，需要使用2D/3D的图形模块，同时因为要生成最后的可视化结果，这时候需要开始解码音频视频和图片，同其它内容一起绘制到最后的图像中。  
在渲染完成之后，用户可能需要跟渲染的结果进行交互，或者网页自身有动画，一般而言，这会持续的重新渲染过程。这个过程跟上面类似，不再赘述。

[20160809080457152]: /images/20220718/478c429946334084b86a501caf36c11f.png
[20160809080533200]: /images/20220718/d2448b2e914f4018856c3a21b9c09dd8.png
[JSBin]: http://jsbin.com/duhah/2/edit?html,css,js,output
[20160809080557060]: /images/20220718/bbcee585eddb40c8ac577541df175322.png