从输入URL到界面显示发生了什么(个人笔记)

1,010 阅读4分钟

1.输入网址

  我们向浏览器端输入网址juejin.im/timeline

2. DNS域名解析

这一步主要是为了解析域名获取ip地址。

浏览器会向本地缓存中查找是否有这个ip地址,如果没有就开始向根服务器去问一下有没有这个域名的ip如果没有就向域服务器查找,这个过程是迭代的。这个查找方式就像我现在我们县里面问一下有没有这个人,如果没有就去市里面找,在没有就去省里面找。然后省里面可能不知道这个人但是他知道谁知道,然后就告诉你去找谁谁的过程。最后获得ip地址后他会将这个ip在本地中缓存。

3. TCP连接(三次握手四次挥手)

当你获取ip地址以后这时候就可以进行tcp链接传输数据。这其中建立连接需要三次握手的过程。三次握手我用我自己的方式来说吧。

我们假设两个人张三和李四在马路的左右两次,张三向马路对面的李四说hi我是张三你是李四嘛?(第一次挥手)李四听到以后回应我是李四我听到了,你是张三波。(第二次挥手)。张三确认那是李四后就说是我,我么可以传输数据了。

第一次挥手,客户端向服务端发送一个SNY报文。

第二次挥手,服务端向客户端回应一个SNY和ACK报文。

第三次挥手,客户端接收到SNY和ACK报文,会回应服务端一个ACK报文

这样双方确认了对方的信息,然后就可以传输数据了。

4. 浏览器向web端发送http请求

建立TCP连接之后,发起HTTP请求,请求一般分为三部分

请求方法URI协议/版本

请求头(Request Header)

请求正文

5、服务器端处理

处理各种请求和数据

6. 四次挥手

数据传输完了以后就开始关闭连接。这就是tcp四次挥手。

客户端向服务段说我的这边数据要穿了

服务端说好的,我看看我这边还有数据要传嘛?

服务端说我这边没有数据要穿了。我们关闭连接吧。

客户端说好的,那我关闭连接了。

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

为什么建立连接只需要三次握手,而关闭连接需要四次挥手?

TCP建立连接时之所以只需要"三次握手",是因为在第二次"握手"过程中,服务器端发送给客户端的TCP报文是以SYN与ACK作为标志位的。SYN是请求连接标志,表示服务器端同意建立连接;ACK是确认报文,表示告诉客户端,服务器端收到了它的请求报文。

即SYN建立连接报文与ACK确认接收报文是在同一次"握手"当中传输的,所以"三次握手"不多也不少,正好让双方明确彼此信息互通。

TCP释放连接时之所以需要“四次挥手”,是因为FIN释放连接报文与ACK确认接收报文是分别由第二次和第三次"握手"传输的。为何建立连接时一起传输,释放连接时却要分开传输?

建立连接时,被动方服务器端结束CLOSED阶段进入“握手”阶段并不需要任何准备,可以直接返回SYN和ACK报文,开始建立连接。释放连接时,被动方服务器,突然收到主动方客户端释放连接的请求时并不能立即释放连接,因为还有必要的数据需要处理,所以服务器先返回ACK确认收到报文,经过CLOSE-WAIT阶段准备好释放连接之后,才能返回FIN释放连接报文。

所以是“三次握手”,“四次挥手”。

接下来的就是浏览器端的渲染

7. 解析html

将html解析成一个个的node节点这些节点的都有联系,这些联系和节点就形成了一个DOM树

8.解析css

将css解析成css树

9.合并DOM树和CSS树 生成渲染树

10.布局和绘制渲染

11.加载执行js文件