网页渲染流程详解

本文将该过程分为两部分进行解释

1-3步是url改变发送请求到服务端的处理
4-9是浏览器获取到返回数据后的渲染过程

首先是url改变发送请求到服务端

1.png

一：DNS解析获取IP地址

1. 首先会在浏览器的缓存中查找，是否缓存了URL，如果有，就直接向该URL对应的服务器发送请求；如果没有则进行下一步;
2. 在本地的hosts文件中是否保存了该URL和其对应的IP地址，如果保存了，就直接向该URL对应的服务器发送请求；如果没有则进行下一步；
3. 向本地DNS服务器（一般由本地网络接入服务器提供商提供，比如移动）发送DNS请求，本地DNS服务器会首先查询它的缓存记录，如果有就将该域名对应的IP地址返回给用户，如果没有则进行下一步；
4. 首先向根域名服务器发送DNS查询请求，根域名服务器返回给可能保存了该域名的一级域名服务器地址；本地主机再根据返回的地址，向一级域名服务器发送DNS查询请求；…一直迭代，直到找到对应的域名存放的服务器，向其发送DNS查询请求，该域名服务器返回该域名对应的IP地址；

二：TCP三次握手确定请求合法

2.png

通俗理解TCP

1. 客户端：在干嘛？
2. 服务器：等你
3. 客户端：来了老弟

三：发送http请求

1.加载静态资源：

服务器根据url提供的地址查找文件，当解析到（css，js，html，img等）资源的时候，会再次向服务器发送请求，确定该类型的文件能否通过路由进行解析，如果可以，则服务器会给客户端返回一个HTTP响应(状态行，响应头，响应正文)

2.加载动态资源：

web服务器会调用CGI/VM执行程序完成相应的操作，如查询数据库，然后返回查询结果数据集，并将运行的结果–HTML文件返回给web服务器。Web服务器再将HTML文件返回给用户。

以上是从服务器请求静态资源的过程

接下来是客户端拿到资源后如何进行渲染

客户端拿到服务端发送回来的数据后到使用者看到真实的网页，一共个分为两个阶段，【页面内容加载完成DOMContentLoaded】【页面资源加载完成Load】

• DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片等
• load事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成

四：浏览器渲染

1.浏览器将获取的HTML文档解析成DOM树。

2.处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。

3.将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。

4.渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。

5.将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

不一定按顺序，有时候DOM或者CSS被修改时，涉及到树的重绘，往往在实际操作中，js和css操作往往会多次修改DOM

3.png

五：构建DOM树的过程

1.DOM树在构建过程中可能因为css和js的加载而产生阻塞

2.display：none的元素也会在DOM树种

3.注释也会在DOM树中

4.script标签也会在DOM树中

4.png

当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

六.构建CSSOM规则树

浏览器解析CSS文件并生成cssdom，每个css都被分析称一个stylesheet对象

这个过程可以和DOM解析同步进行，与script的执行互斥，在Webkit中只有js访问css的时候才会互斥

七：构建渲染树（Render Tree）

首先要先建立好DOM树和CSS树，然后从DOM树的根节点开始遍历，对每个结点进行匹配css

注意：Render Tree和DOM Tree不完全对应

• display: none的元素不在Render Tree中
• visibility: hidden的元素在Render Tree中

八：渲染树布局(layout of the render tree)

当渲染树生成，还无法在网页上直接看到，所以浏览器会从渲染书的根节点进行遍历，通过每个结点的大小宽高从而分布在网页上，其中float元素，absoulte元素，fixed元素会发生位置偏移。
我们常说的脱离文档流，其实就是脱离Render Tree。

九：渲染树绘制（Painting the render tree）

在绘制阶段，浏览器会遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。