【综合】从输入地址到页面加载完成发生了什么?

[Dliling]

1、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
2、DNS解析URL对应的IP。
3、根据IP建立TCP连接（三次握手）。
4、HTTP发起请求。
5、服务器处理请求，浏览器接收HTTP响应。
6、渲染页面，构建DOM树。
7、关闭TCP连接（四次挥手）。

下面来想说以上几条：
缓存
根据是否向服务器发送请求，可分为强制缓存和对比缓存。

强制缓存：根据请求首部字段判断：Expires和cache-control。
Expires是服务器时间，浏览器检查当前时间，若没有到过期时间，直接使用缓存。存在服务器和浏览器时间不一致的问题。
cache-control中的max-age保存了一个相对时间，以浏览器收到文件开始算起。
同时有Expires和cache-control时，浏览器优先使用cache-control。

对比缓存：通过last-modified和Etag判断。
last-modified表示请求的资源最后以此更新的时间。下次请求时添加If-Modified-Since标记，用来询问服务器该时间之后文件是否有修改。若没有修改，则返回304，使用缓存。
Etag：资源内容变化时，Etag更新。服务器根据Etag是否发生变化，未变化返回304，变化则返回新资源。

DNS域名解析
简单来说，就是将域名解析成IP地址的过程。

TCP连接
获取到IP地址后，会进行一次连接，是TCP协议通过三次握手完成的。
第一次握手：建立连接时，浏览器发送一个带有SYN标志的数据包给服务器
第二次握手：服务器收到后，发送一个带有SYN/ACK（确认报文）标志的数据包来确认
第三次握手：浏览器再回传一个带有ACK标志的数据包，代表三次握手的结束。

HTTP发起请求
请求html等文件。

服务器处理请求，浏览器接收HTTP响应
1XX：信息性状态码

2XX：成功状态码
200：OK 请求正常处理

3XX：重定向状态码

4XX：客户端错误状态码
403：Forbidden 访问被拒绝
404：Not Found 无法找到请求资源

5XX：服务器错误状态码

渲染页面
按顺序解析html文件，构建DOM树，有外部CSS和JS文件时，向服务器发起请求，下载JS文件，会阻塞浏览器对html的解析。

关闭TCP连接
四次挥手关闭连接
第一次：浏览器发送完数据，发送FIN（请求释放连接）。
第二次：服务器向浏览器发送ACK，表示同意。
第三次：服务器可能还有数据向浏览器发送，发送ACK同时也发送FIN。
第四次：浏览器接收返回的ACK，表示数据传输完成。

推荐：
前端都该懂的浏览器工作原理，你懂了吗？