当我在浏览器地址栏里输入一个网址后所发生的故事

1、识别URL

包括协议、域名、路径、端口，具体构成为：

（1）请求行

（2）请求头

其中包含很多参数，自行构建请求头时，最常用的如下：

参数	含义
Accept-Charset	浏览器可以接受的字符编码集
Accept-Encoding	指定浏览器可以支持的web服务器返回内容压缩编码类型
Accept-Language	浏览器可接受的语言
Content-Length	请求的内容长度
Content-Length	请求的内容长度
Content-Type	请求的与实体对应的MIME信息
Connection	表示是否需要持久连接。（HTTP 1.1默认进行持久连接）
Host	指定请求的服务器的域名和端口号

（3）请求体

最常见的有四种

参数	含义
application/json	传递普通的json数据
text/xml	提交xml格式的文本数据
application/x-www-form-urlencoded	浏览器表单提交数据
multipart/form-data	提交多文件数据，文件之间通过–boundary分割

2、DNS解析

（1）查看本地hosts文件

先查看本地hosts文件中是否有该域名对应的IP地址，若没有，则询问本地域名服务器。

（2）询问本地域名服务器

本地服务器采用迭代查询。刚开始它先向一个根域名服务器查询。之后就根据返回要查询的域名服务器，进行查询，直到获取对应主机的IP地址。

（3）询问根域名服务器

根域名服务器告诉本地服务器，下一次应查询的顶级域名服务器的IP地址。

（4）询问顶级域名服务器

顶级域名服务器告诉本地服务器，下一次应查询的权限域名服务器的IP地址。

（5）询问权限域名服务器

权限域名服务器告诉本地服务器，所查询的主机的IP地址。

3、网络请求

（1）根据IP地址访问web服务器（三次握手）

建立连接、发送报文、获取服务器返回的报文。当数据传递完后，关闭连接（四次握手）

4、web服务器处理请求

（1）调用后端语言进程来处理 HTTP 请求

调用python、php、node.js等语言，来处理客户端的请求，涉及数据库的操作

（2）返回response

将数据封装好，返回给客户端

5、浏览器处理response

（1）response解析

接收到服务器返回的数据后，进行解析处理

• HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
• CSS，解析CSS会产生CSS规则树。
• Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree

（2）dom渲染

解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。

注意：

• Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
• CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

（3）最后通过调用操作系统Native GUI的API绘制