目录

Document Object Model (DOM)

CSS Object Model (CSSOM)

Render Tree

Rendering Sequence

Layout operation

Paint operation

Compositing operation

界面渲染顺序图

Browser engines

Rendering Process in browsers

Parsing and External Resources

Parser-Blocking Scripts

Render-Blocking CSS

Document’sDOMContentLoadedEvent

Window’sloadevent

有时候我们在使用某个网站的时候会出现影响用户体验的共性问题，例如：网站加载速度过慢、一直在等待文件的加载、加载出来了界面却没有样式等。为了避免开发人员开发这种网站，我们需要深入理解浏览器渲染界面的生命周期。

Document Object Model (DOM)

首先我们需要理解什么是DOM，浏览器向服务器发送请求获取HTML数据，服务器以二进制字节流的形式向浏览器返回HTML文本，这个response的header中有这样的attribute：Content-Type:text/html;charset=UTF-8。text/html是一种MIME Type，它告知浏览器这种MIME Type是HTML Document。charset=UTF-8告知浏览器该MIME Type文件需要使用UTF-8的编码方式解码。根据这些信息，浏览器就能将二进制字节流转化为我们看到的HTML Document。

如果丢失response header中的text/html，浏览器就不能理解怎样处理该MIME Type，这个时候二进制字节流将会被渲染普通文本格式。但是如果一切正常，经过浏览器对该MIMET Type文件的转化，典型的HTML Document最终看起来会是这样：

    
        
      
        
        
    
    
        

          
Hello World!
          
This is a sample paragraph.
        
      
        
        
    

在上面的代码段中，该网页依赖于为网页提供样式的style.css和为网页提供操作的main.js。在style.css添加一些炫酷的样式，我们的网页看起来如下图所示：

但是问题仍然存在啊，浏览器是怎样将平平无奇的只包含文本的HTML文件渲染成如此炫酷的界面呢？为了解决这个问题我们需要从DOM、CSSOM、Render Tree入手。

无论何时浏览器解析HTML代码，遇到HTML、body、div等元素，他都会创建与之对应的JavaScript Node对象浏览器打不开单个网址，最终所有的元素都会被转化为JavaScript对象。由于每个HTML元素都有不同的属性，因此将通过不同的类（构造函数）创建Node对象。例如：div对应的Node对象HTMLDivElement继承自Node类，我们可以使用chrome的DevTools来做如下测试：

浏览器为每个元素创建完对象之后，它将会为这些Node对象创建一个树形结构。由于在HTML文档中元素之间互相嵌套，所以浏览器需要复制文档中的元素但是使用之前创建的Node对象来创建树形结构。这个步骤将有助于浏览器在整个生命周期内有效地呈现和管理网页。

这就是DOM Tree。其结构如上图所示。

DOM Tree最顶端的元素是html，其分支是元素在文档中出现和嵌套来显示的。不论什么时候解析到HTML元素，浏览器都会创建与之对应的Node对象。

DOM节点并不一定总是HTML元素。 当浏览器创建DOM树时，它还将诸如注释，属性，文本之类的内容另存为树中的单独节点。 但为简单起见，我们仅考虑HTML元素（又称为DOM元素）的DOM节点。想要了解DOM节点类型可以参考这里

DOM Tree通过实例对象的七个属性描述节点之间的关系，构成层次结构

1） ownerDocument属性： 该属性指向整个节点树中的文档节点

2） parentNode属性： 该属性指向节点树中该节点的父节点

3） previousSibling属性： 该属性指向节点树中该节点的左兄弟节点

4） nextSibling属性： 该属性指向节点树中该节点的右兄弟节点

5） childNodes属性： 该属性指向节点树中该节点的子节点NodeList集合

6） firstChild属性： 该属性指向节点树中该节点的子节点NodeList集合中的第一个字节点

7） lastChild属性： 该属性指向节点树中该节点的子节点NodeList集合中的最后一个字节点

可以通过Chrome DevTools来观察节点之间的继承关系：

JavaScript不知道什么是DOM，DOM不是JavaScript规范的一部分。DOM是浏览器提供的高级Web API，用于高效地呈现网页并将其公开显示给开发人员，以便开发者动态操纵DOM元素。

使用DOM API开发人员可以对HTML元素进行增删改查的操作，可以在内存中创建或者拷贝HTML元素，在不渲染DOM Tree的情况下操作HTML元素。这使开发人员能够构建具有丰富用户体验的高度动态的网页。

CSS Object Model (CSSOM)

当我们设计网站的时候，我们需要将其设计地尽善尽美。为了达到这个目标我们在HTML元素上提供一些样式。在本页面中我们使用的是Cascading Style Sheets(级联样式)。使用CSS选择器我们能够定向操纵目标元素的样式。

外部CSS文件、通过内嵌CSS样式、在HTML元素上使用style属性、使用JavaScript 应用在HTML元素上的方法是不同的，但是最终浏览器繁琐地将CSS样式应用在DOM元素上。

在构建好DOM Tree之后浏览器打不开单个网址，浏览器会加载所有的CSS样式(外部CSS文件，内嵌样式，行内style属性，用户代理样式等)来构建一个CSSOM。CSSOM是一个树形结构的CSS对象模型。

CSSOM Tree上的每一个节点都会保存CSS样式信息，最终会被应用DOM Tree的目标元素上。CSSOM不包含无法在屏幕上显示的、