输入url到页面展示的全过程

从输入url到页面展示的全过程

1. 域名解析
2. 建立TCP连接(3次握手)
3. 浏览器发送HTTP请求
4. 服务器响应HTTP请求
5. 页面渲染
6. 关闭连接(4次挥手)

一.域名解析

DNS（Domain Name System，域名系统），因特网上作为域名www.baidu.com和IP地址167.23.10.2相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。

简而言之，域名解析就是从DNS找到对应的ip地址 。

域名解析的步骤:

1. 浏览器缓存

   浏览器查看历史记录或者书签之类,找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址

2. 本地hosts :

   浏览器查看本地hosts,看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。

3. 本地DNS服务器

   如果在本地的 hosts 文件没有能够找到对应的 ip 地址, 浏览器会发出一个 DNS请求到本地DNS服务器 。 本地DNS服务器会首先查询它的缓存记录。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。

4. DNS根服务器

   本地DNS服务器向DNS根服务器进行查询。 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器域服务器的地址 (迭代解析)

5. 域服务器

   本地DNS服务器继续向域服务器发出请求(例如.com域服务器)。.com域服务器收到请求之后,告诉本地DNS服务器，你的域名的解析服务器的地址。

6. 域名的解析服务器

本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系. 本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

二.建立TCP连接(3次握手)

“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”

• 第一次，本机将标识位 SYN 置为 1, seq = x(Sequence number)发送给服务端。此时本机状态为SYN-SENT
• 第二次，服务器收到包之后，将状态切换为SYN-RECEIVED，并将标识位 SYN 和 ACK都置为1, seq = y, ack = x + 1, 并发送给客户端。
• 第三次，客户端收到包后，将状态切换为ESTABLISHED，并将标识位ACK置为1，seq = x + 1, ack = y + 1, 并发送给服务端。服务端收到包之后，也将状态切换为ESTABLISHED。

• 标识位ACK置为1 表示我已确认收到seq为x的包，并回复确认序号ack = x + 1
• 而SYN表示这是我第一次随机生成seq的序列x，此后我每次发送的包都会在上一次发送的基础上增加y（有数据的时候，y是数据的长度，没有的时候y = 1）。*所以，当seq已初始化完成之后，没必要再把SYN置为1

• ACK：确认标识，用于表示对数据包的成功接收。
• SYN：同步标识，表示TCP连接已初始化。
• FIN：完成标识，用于拆除上一个SYN标识。一个完整的TCP连接过程一定会有SYN 和 FIN包。

三.浏览器发送HTTP请求

在应用层，浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。https默认请求端口443， http默认80。

• 请求行：请求行中包括请求的方法，路径和协议版本。
• 请求头：请求头中包含了请求的一些附加的信息，一般是以键值的形式成对存在，比如设置请求文件的类型content-type，以及服务器对缓存的设置。
• 空行：协议中规定请求头和请求主体间必须用一个空行隔开
• 请求主体：对于post请求，所需要的参数都不会放在url中，这时候就需要一个载体了，这个载体就是请求主体。

四.服务器响应HTTP请求

服务端收到请求之后，会根据url匹配到的路径做相应的处理，最后返回浏览器需要的页面资源。浏览器会收到一个响应报文，而所需要的资源就就在报文主体上。与请求报文相同，响应报文也有与之对应的起始行、首部、空行、报文主体，不同的地方在于包含的东西不一样。

• 响应行：响应报文的起始行同样包含了协议版本，与请求的起始行不同的是其包含的还有状态码和状态码的原因短语。
• 响应头：对应请求报文中的请求头，格式一致，但是各自有不同的首部。也有一起用的通用首部。
• 空行
• 报文主体：请求所需要的资源

五.页面渲染

1. 解析HTML标签，构建DOM树
2. 解析CSS标签，构建CSSOM树
3. 把DOM和CSSOM组合成渲染树
4. 对渲染树进行布局(称为重排或者回流)
5. 绘制渲染树(重绘)

来看看webkit的主要流程：

解析:

• dom树包含页面全部元素
• 渲染树≠dom树,例如:header标签或者display:none的元素,不用放到渲染树中
• 若页面的布局结构改变,会发生重排,重排必定重绘
• 若只是与布局无关的样式(例如:颜色变化),只会发生重绘
• 重排和重绘会消耗性能,重排更消耗性能(重排必重绘)

性能优化:

• 用类名操作样式(而不是js代码)
• 离线操作(display:none…display:block)
• 对于频繁操作的元素,可以脱标(定位,单独占一层,不影响其他元素布局)或者用css3中的动画

六.关闭连接

1. 第一次挥手：Client发送一个FIN(完成标识)，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。
2. 第二次挥手：Server收到FIN后，发送一个ACK(确认标识)给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。
3. 第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。
4. 第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。