一道经典面试题：从输入url到页面显示经历了什么？

这道题太经典了，因为它涉及到太多的知识点。回流重绘、浏览器渲染原理、event loop 和 TCP连接断开的方式等。

主要过程如下。

一、DNS解析：url解析成ip地址和对应的端口号

网络进程会先从DNS数据缓存服务器查找是否缓存过当前域名信息，有则直接返回，否则，会进行DNS解析成对应的ip和端口号。

二、建立TCP连接：通过三次握手与服务器建立连接，然后进行数据传输

第一次握手，发送SYN报文。
客户端主动向服务器发送请求建立连接的报文SYN，客户端会随机初始化一个序列号x，然后把SYN的标志置为1，之后客户端处于SYN-SENT的状态。
SYN=1 seq=x

第二次握手，发送SYN + ACK报文。
服务端接收到客户端的报文后，服务端也会随机初始化一个序列号y，对请求的应答做响应，即ack=x+1，接着把SYN和ACK的标志置为1，之后服务端处于SYN-RCVD状态。
SYN=1 ACK=1 seq=y ack=x+1

第三次握手，发送ACK报文。
客户端接受到服务端的报文后，对应答号进行回应ack=y+1，把ACK的标志置为1，序列号为x+1，返回确认的报文给服务端，服务端接到确认报文后进入连接的状态，此时TCP连接成功。
ACK=1 ack=y+1 seq=x+1

三、客户端发送HTTP请求：把输入的地址封装成HTTP Request请求行，发送给服务器

请求行 = 请求方法 + 请求url + HTTP版本 + 请求头。

四、服务端返回资源

服务器收到请求后，响应报文，返回资源。

五、浏览器渲染页面

1、html被html解析器解析成DOM Tree，css被css解析器解析成CSSOM Tree（并行解析）；
2、DOM Tree 和 CSSOM Tree 合并到一起，形成 Render Tree ；
3、重排，根据渲染树计算出每个节点的几何信息，位置及大小；
4、重绘，绘制渲染出最终的页面。

六、断开TCP连接：通过四次挥手断开连接

第一次挥手，发送FIN报文。
客户端发送FIN=1，序列号seq=x的报文，进入FIN_WAIT_1的状态。

第二次挥手，服务端发送ACK报文。
服务端接受到客户端报文后，会给客户端发送一个ACK的报文，表示收到了。服务端进入CLODED_WAIT状态，客户端进入FIN_WAIT_2状态。

第三次挥手，服务端发送FIN报文。
服务端处理完数据，也会向客户端发送一个FIN报文，服务端进入LAST_ACK状态。

第四次挥手，客户端发送ACK报文。
客户端收到服务端FIN报文后，会向服务端发送一个ACK的报文，表示收到了。然后客户端进入TIME_WAIT状态，服务端收到ACK报文后进入CLOSED状态。至此连接断开。