浏览器从输入URL到渲染的过程

总结使用，之后还会不断更新

1 输入url

判断url类型

• 若输入结构不合法（不满足url结构要求），则由浏览器搜索引擎搜索。

• 若是url，交由网络进程处理。

一个较完整的url结构如下：

协议://域名:端口/路径/?查询字符串#锚点链接

2 DNS解析

DNS解析中主要是查看缓存，没有缓存就向上级服务器发请求。

那么DNS是什么？DNS全称是Domain Names System，中文名是域名系统。是将ip地址和域名相转换的一项互联网服务。

2.1 DNS基础知识

域名是具有层级结构的，如www.qunar.com中，com就是顶级域名，qunar是二级域名，www是三级域名。

而不同级别的域名也会对应了不同级别的服务器，具体有根域名服务器、顶级域名服务器、权限域名服务器、本地域名服务器，等级也依次减小。其中顶级域名服务器就对应了com、cn等域名，而权限域名服务器就对应了qunar。

前面提到过DNS解析时会先查缓存，那么具体有哪些地方有缓存呢？首先浏览器中具有缓存，然后本地操作系统中具有缓存，最后本地域名服务器有缓存。

2.2 DNS查询规则

搞懂了域名和DNS缓存，还需要知道DNS的查询规则。

DNS有两种查询规则：

• 递归查询
• 迭代查询

递归查询可以总结为：只要低级服务器找高级服务器要，高级服务器就一定会给答复。具体流程如下：

本地域名服务器 --> 权限域名服务器 --> 顶级域名服务器 --> 根域名服务器 --(结果返回)-> 顶级域名服务器 --(结果返回)-> 权限域名服务器 --(结果返回)-> 本地域名服务器

迭代查询可以总结为：低级服务器向高级服务器要，虽然高级服务器没有，但是会告诉低级服务器去哪个服务器请求。具体流程如下：

本地域名服务器 --> 根域名服务器 --(告诉本地域名服务器去哪个顶级域名服务器要)-> 本地域名服务器
本地域名服务器 --> 顶级域名服务器 --(告诉本地域名服务器去哪个权限域名服务器要)-> 本地域名服务器
本地域名服务器 --> 权限域名服务器 --(结果返回)-> 本地域名服务器

2.3 DNS解析过程

• 首先查看是否命中了浏览器的DNS缓存，缓存中会有域名和IP地址的对应关系；
• 命中则可以使用，若没有命中则继续查看操作系统缓存；
• 若没有命中则操作系统向本地域名服务器发起递归查询；
• 本地域名服务器查看是否命中缓存，若没有命中则向根域名服务器发起迭代查询；
• 具体迭代查询可见2.2节中提到的，即根域名服务器返回一个顶级域名服务器地址，本地域名服务器向其发起请求，再返回一个权限域名服务器地址，本地域名服务器再向权限域名服务器发起请求，最终得到结果；
• 本地域名服务器拿到结果后进行缓存，并将结果返回给操作系统；
• 操作系统缓存后返回给浏览器；
• 浏览器得到结果并缓存；

3 形成HTTP请求报文

这一步骤是在应用层进行。

HTTP请求报文中主要包含了：请求行、请求头、请求主体。

• 在请求行中，包含了请求方法、请求URL和请求的HTTP版本；

• 请求头，也称为报文头，一般包含了Cookie、User-Agent、Content-Type等等；

• 请求主体，也称为报文主体，包含的是真正要发送的参数；

4 建立TCP三次握手

这一步骤开始进入传输层。

• 第一次握手：客户端给服务端发送报文，SYN=1，seq=x。客户端状态从CLOSE转成SYN_SEND。目的：服务端知道了客户端发送能力正常、自己的接收能力正常；
• 第二次握手：服务端应答客户端，SYN=1，ACK=1，seq=y，ack=x 1。服务器状态转为SYN_RCVD。目的：客户端知道了服务端的发送、接收能力正常，自己的发送、接收能力正常；
• 第三次握手：客户端给服务端发送结束报文，ACK=1，seq=x 1，ack=y 1。客户端和服务器状态都转为ESTABLISHED。目的：服务端知道了客户端的接收能力正常；

5 服务器返回响应

HTTP响应报文中主要包含了：状态行、响应报头、响应正文。

• 状态行由状态码、状态描述组成，如人见人爱的200 OK；
• 响应报头，一般包含Date、Content-Type、Content-Length；
• 响应正文中就包含客户端真正要返回的主体内容；

而状态码一般有五大类：

• 1xx：还需要继续发起请求以继续处理；
• 2xx：成功！！
• 3xx：和重定向相关；
• 4xx：客户端出现错误，如请求报文中的语法错误；
• 5xx：服务器出现错误；

6 渲染页面

在拿到html、css、js等资源后浏览器的Parser模块就会开始解析工作。

下面分步骤看：

6.1 解析html形成DOM树

• 首先将html文件内容进行解码，将字节流解析成Unicode字符结构。

• 然后进行预解析，将Unicode字符流划分成tokens，并创建节点。

• 最后将节点按照html结构关系形成DOM树。

6.2 解析css形成CSSOM树

• 将css文件内容进行解码；
• 创建节点；
• 根据匹配规则形成CSSOM树；

6.3 形成渲染树

渲染树也为render tree，是由DOM树和CSSOM树合并形成。

具体为：

• 遍历DOM树，找到所有的可见节点；
• 在CSSOM树中寻找相应的规则并进行级联；
• 计算这些可视节点的样式；

64 GPU绘制

当渲染树完成后，浏览器会将相应的内容发送到GPU中，然后通过GPU对页面进行绘制。

这篇好文章是转载于：学新通技术网