从输入url到页面渲染全过程

一、 发起请求

1. 输入地址

在浏览器地址栏中输入大致上可以分为两种：

• 输入关键字（搜索内容）；

• 输入请求url；

  不管是哪种，在浏览器中都会对其内容进行检测，自动组装成一个完整的url（加上默认的协议头、拼接成默认的搜索引擎的搜索url等...）并交由网络进程发送请求。

2. DNS解析

在互联网中是通过ip进行寻址的，但由于ip对于人们来说是一串没有实际意义的数字组成，不易记住。所以机智的人们发明了具有实际意义、便于记住的域名对IP进行映射，而DNS解析便是实现将域名翻译对应ip的角色。

DNS解析的过程是一个从右向左、逐级向上、递归查询的过程。

如上图所示，DNS解析会优先从本地缓存中查找，如果查找不到则会根据域名右到左查找出对应的DNS服务器，找到对应的ip后便会将对应的记录跟新进本地的DNS服务器缓存中并返回给客户端。

3. TCP链接

当客户端拿到访问的ip地址后便需要通过TCP建立起链接。

TCP三次握手

• 第一次握手： 客户端向服务端携带有客户端数据通讯初始序列号的报文，并进入SYN-SENT状态，当客户端收到数据时证明服务端知道：客户端的发送能力、服务端的接受能力正常。

• 第二次握手： 服务端将响应客户端数据通讯初始序列号和服务端数据通讯初始序列号放入报文中一起发送给客户端。发送结束后服务端进入SYN-RECEIVED状态。当客户端接受到数据证明在客户端的角度上知道：客户端和服务端的发送、接收能力是正常的。

• 第三次握手： 客户端向服务端发送一个确认应答，并进入ESTABLISHED状态，服务端收到应答后也进入ESTABLISHED状态完成三次握手。这时候在服务端知道：服务端的发送能力、客户端的接收能力正常。

  抽象出来就是下图：

  

第三次握手的必要性

第三次握手除了让服务端知道，服务端发送能力和客户端的接收能力正常之外，还可以防止数据报延迟带来的不必要的资源消耗：

当客户端发起tcp第一次握手的请求时，因为网络问题滞留在网络中，这时候客户端因为等待太久没有响应所以自动重发了握手请求并完成了所有数据请求关闭了与服务端的链接，这时候服务端才接收到第一次滞留在网络中的握手请求，服务端会向客户端发送第二次握手并处于等待第3次握手状态，客户端接收到第二次握手请求后发现是过期的请求就可以通过停止发送第三次握手，服务端一段时间没接到第三次握手请求会自动关闭请求监听。

三次握手成功后，便建立起链接，https还需要传输层安全性协议（TLS）

4. TLS

TLS工作于传输层之上，应用层之下，默认作用于服务端的443端口,在TLS中可以分成两种加密技术：

• 对称性加密：客户端和服务端拥有相同的密钥，通过密钥对密文解密。用于密文通讯

• 非对称性加密：在该模式下，密钥分为公钥和私钥，用公钥加密的数据必须用私钥解密，用私钥加密的数据需要用公钥解密，公钥可以通过服务端发送给各个客户端，私钥则只由服务端持有，所有该模式主要用于传递对称性密钥阶段。

  加密流程如下图：

其中数字证书是由服务端生成的非对称加密公钥和数字签名组成加密形成，数字签名是服务器在第三方机构注册校验服务器身份的数据，当客户端接收到数字证书是可以通过比对第三方机构注册的信息从而判断该报文是否是从目标服务器中传出来，从而确定公钥是否被调包。如果比对成功，客户端会生成对称性加密的密钥通过服务端派发的公钥进行加密传输给服务端，之后的信息传递就通过这个密钥进行对称性加密传输。

二、响应请求

到这里，服务端开始接收到我们输入url的请求。服务端将接收到的报文进行解析，封装成HTTP Request对象，并交由后端程序计算，并把计算后的结果（资源）封装成HTTP Response对象返回给客户端。HTTP Response包含了状态行，响应报头，响应报文组成，状态行包含了协议版本号，状态码，状态描述。而响应报头包含一些cookie,地址，数据等相关数据，而服务器的计算结果（资源）则放入报文中。

HTTP响应常用状态码

1. 2xx 成功

• 200(ok): 请求正确处理。

• 204(No content): 请求成功 没有响应实体的主体部分。

• 205(Reset Content): 请求成功 没有响应实体的主体部分,需要请求方重置内容

• 206(Partial Content): 范围请求结果。

2. 3xx 重定向

• 301(moved permanently): 永久性重定向。

• 302(found): 临时重定向。

• 303(see other): 结果在另外的url中，需要重新get到对应的url才能获得结果。

• 304(not modified): 服务器允许访问该结果，但是缺少访问条件。

3. 4xx 客户端错误

• 400(bad request): 请求报文出错。

• 401(unauthorized): 没有权限。

• 403(forbidden): 服务器拒绝访问该url。

• 404(not found): 服务器找不到对应url。

4. 5xx 服务端错误

• 500(internal sever error): 服务端脚本出错。

• 503(service unavailable) : 服务器停机维护，无法响应。

TCP四次挥手

客户端接收到服务端发送响应请求后便需要通过4次握手关闭链接，释放服务器资源。

1. 客户端发送申请关闭链接请求，此时客户端进入FIN-WAIT-1状态。

2. 服务端收到关闭链接请求后便向客户端发送ACK确认包，并进入CLOSE-WAIT状态，客户端接收到ACK确认包后进入 FIN-WAIT-2状态。

3. 服务端发送完所有未发送的数据后便向客户端发送FIN数据包，并进入LAST-ACK状态。

4. 客户端收到服务端发送的FIN数据包后便向服务端发送确认包并进入TIME-WAIT状态，并自动在2MSL时钟后关闭链接监听，服务端再接收到确认包后直接关闭监听。

三、页面渲染

浏览器拿到服务器传回的HTML资源后首先会逐行解析HTML，生成对应DOM Tree，解析CSS， 生成对应的CSS Tree，接着合并DOM Tree和CSS Tree，生成Render Tree。根据Render Tree计算显示对象的位置和尺寸(回流),最后根据Render Tree绘制出相应的内容。

四、最后

以上就是从输入url后到页面加载大致上的过程，希望通过了解这个过程可以让大家更好了解浏览器的机制，对web性能优化提供参考方向。

最后祝大家，牛年大吉！