页面从输入URL到渲染都发生了什么

• DNS解析
• TCP连接
• 发送HTTP请求
• 服务器处理请求并返回结果
• 浏览器解析并渲染页面

DNS解析

全称 Domain Name System 域名系统
因为服务器ip是一串数字，不好记，于是便用域名代替ip，比较有语义，好记。比如头条主页：https://toutiao.com

什么是dns解析：解析域名然后获取对应的ip，流程：

• 首先先找到浏览器有没有dns缓存(之前有访问记录)
• 如果没有，则寻找本地的host文件，看看有没有域名记录，如果有则返回ip
• 如果本地host文件没有则直接向本地DNS服务器请求，如果还是没有，继续向上DNS服务器请求，直至返回。

TCP连接

浏览器拿到ip后，在向服务器发送http请求之前，先要和服务器建立TCP连接；
怎么建立TCP连接：三次握手

• 客户端发送SYN数据包给服务端
• 服务端收到客户端的数据包，返回SYN/ACK数据包给客户端
• 客户端收到服务端的返回后，发送ACK数据包给服务端
  连接建立成功，正是开始传送数据
  两次握手：TCP是可靠的，要保持可靠至少要三次握手

建立连接后怎么断开TCP连接：四次挥手

• 客户端向服务端发出一个FIN，用来关闭连接，此时客户端还能接收数据。
• 服务端在收到这个信号之后会向客户端发出一个ACK，然后服务端就进入了close_wait（关闭等待）状态，客户端收到后，进入fin_wait_2状态，等待服务端主动关闭连接，此时还能接受数据
• 服务端此后没有数据发给客户端时，服务端会向客户端发送一个FIN，关闭服务端到客户端的连接
• 客户端在收到之后会回复一个ACK，服务端收到后，关闭连接，立刻进入closed状态，客户端在等待两个最大段生命周期(MSL)之后，进入closed状态。

挥手成功，关闭连接成功。

为啥挥手是四次？
因为第一次发送FIN时，客户端表明自己没有数据发送，但是还能接收数据，当服务端第二次发送ACK，表明它已经知道客户端没有数据发送了，但是客户端还能接收数据，第三次服务端发送FIN，表明自己也没有数据发送了，等到客户端第四次发送ACK过来，服务端才关闭。

发送HTTP请求

建立好TCP连接后，然后就可以通过发送HTTP请求到服务器请求数据了
一个HTTP请求由 请求行、请求报头、空行、请求数据 组成。

请求行
格式：Method Request-URL HTTP-Version CRLF

GET/test.html HTTP/1.1

请求方法：GET，POST，OPTION，HEAD，PUT，DELETE，CONNECT，TRACE，PATCH

请求报头（request header）
向服务器传输附加信息。常见的请求报头有：Accept，Accept-Charset，Accept-Encoding，Accept-Language，Content-Type，Authorization，Cookie，User-Agent等

Connection设置为Keep-alive，用于高速客户端本次HTTP请求结束之后并不需要关闭TCP连接，这样可以使下次HTTP请求使用相同的TCP通道，节省TCP连接建立的时间

空行
在请求报头和请求数据之间有个空行，表示上面是请求报头，接下来的是请求数据，用以区分二者。

请求数据
客户端向服务端传输的数据
服务端返回的状态码

• 200 请求成功
• 204 请求成功，但没有内容返回
• 301 请求的资源已被永久的移动到新的地方
• 302 请求的资源临时被移动到新的地方
• 304 所请求的资源未修改
• 400 请求语法有问题，服务端无法理解
• 403 服务器收到请求，但是拒绝执行此请求
• 404 未找到资源
• 405 请求方法和服务端定义的方法不一样
• 500 服务器内部错误

浏览器解析
服务端把数据返回给浏览器，浏览器该如何解析。

1. HTML通过HTML解析器解析输出DOM树
2. css样式通过CSS解析器解析输出CSS规则
3. 结合DOM树和css规则，计算出DOM树中每个节点的具体样式，生成渲染树
4. 浏览器根据渲染树开始布局和绘制，会触发回流和重绘
5. 构建图层树，显示页面