输入url到页面呈现过程

输入url到页面呈现过程

1. DNS解析
2. 浏览器与服务器建立 TCP 连接
3. 发送HTTP请求
4. 服务器处理HTTP请求，并返回HTTP报文
5. 浏览器解析、渲染页面
6. 连接结束，关闭连接

一、DNS域名解析

1. 输入url后，首先要找到这个url域名的服务器IP，浏览器会查找缓存中是否有记录，缓存查找记录为：浏览器缓存->系统缓存->路由器缓存。
2. 缓存中没有则查找系统的hosts文件中是否有记录。
3. 如果没有则查询DNS服务器

浏览器缓存
浏览器缓存是浏览器在本地磁盘对用户最近请求过的特定资源进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载资源，用来减少发送不必要的网络请求，加快页面的加载速度，提高用户的使用体验。强缓存和协商缓存，根据响应的 header 内容来决定。

• 强缓存：
  定义：彻底缓存就是浏览器直接读取缓存，不发出任何请求，性能提升最大
  相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存 在的话，cache-control 的优先级高于 expires。
  Cache-Control 和 Expires 的区别在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用 Cache-Control，

• 协商缓存：
  浏览器启用协商缓存的前提是强缓存失效，但反过来，强缓存失效并不一定导致浏览器启用协商缓存。
  协商缓存就是浏览器向服务器发送一个请求，服务器会检查该资源是否有更新，如果有更新，就返回最新的资源，状态码200，如果没有更新，状态码304，不返回资源，浏览器从缓存中读取资源。
  相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match

强缓存、协商缓存什么时候用哪个
因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我 们还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧 的资源;所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使 用本地的缓存，以最大程度的减少因网络请求而产生的资源浪费。

二、浏览器与服务器建立 TCP 连接

1. 发送端首先发送一个带SNY标志的数据包给对方
2. 接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息
3. 最后再回传一个带ACK标志的数据包代表“握手”结束

三、发送HTTP请求

客户端向服务器发送HTTP请求。

HTTP 请求的内容包括：请求行、请求头和请求体，请求行中包含：方法、地址和 HTTP 版本，如：GET mp.cdn.net HTTP/1.1。

1. 首先作为发送端的客户端在应用层(HTTP协议)发出一个想看某个web页面的HTTP请求
2. 接着，为了传输方便，在传输层（TCP协议）把从应用层处收到的数据（HTTP请求报文）进行分割，并在各个报文上打上标记序号及端口后转发给网络层
3. 在网络层（IP协议），增加作为通信目的地的MAC地址后转发给链路层
4. 接受端的服务器在链路层接收到数据，按顺序往上层发送，一直到应用层。当传输到应用层才算真正接受到由客户端发送过来的HTTP。

http常见请求方法
get、post、put（幂等）、delete、head

get与post区别

1. get请求一般常见是获取数据（也可以提交），post一般则是提交数据
2. get请求可以被缓存，但post请求则不会被缓存
   get请求在浏览器刷新或者回退的时候是无害的；post的话数据会被重新提交
3. get请求只能进行URL编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）
4. get请求会被保存在浏览器历史记录中也可以被收藏为标签，因为参数就在URL中；但post都不行
5. get因为放在URL参数中，所有隐私性，安全性较差，请求的数据长度也是有限制的，不同浏览器和服务器不同，一般长度是在2-8k之间，也常见的是1k以内；但post请求没有数据长度限制，因为post通过request body传递参数，请求数据则是放在body中。
6. get和post都是http请求方式， 底层都是 tcp/IP协议；通常get 产生一个 tcp 数据包；post产生两个 tcp 数据包（但firefox是发送一个数据包）；也就是说对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于post，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 OK（返回数据）。

四、服务器处理HTTP请求，并返回HTTP报文

服务器接收到HTTP请求后做出响应。

相应内容包括：响应行、响应头、响应体。响应行包括：HTTP版本、状态码、状态描述，例如：HTTP/1.1 200 成功。

1XX：临时性消息。如100（继续发送）、101（正在切换协议）
2XX：成功。最典型的是200（ok）、201（创建成功）
3XX：重定向。301（永久重定向）、302（暂时重定向）、304（内容未改变）
4XX:客户端错误。如400（客户端请求错误）、401（认证失败）、403（被禁止）、404（找不到内容）
5XX：服务器错误。如500（服务器内部错误）

五、浏览器解析、渲染页面

在接收到页面资源后，浏览器开始解析。

1. 浏览器解析HTML文件构建DOM树
2. 解析 CSS 文件生成CSSOM 规则树
3. 构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点。
4. 布局阶段，根据所得到的的渲染树，计算它们在设备视图中的具体位置和大小，这一步输出的是一个“盒模型”
5. 最后浏览器将在布局阶段确定的每个节点转化为实际的像素，将元素的可视部分绘制到屏幕上，包括文本，颜色，边框等。

HTML解析的时候遇到了JavaScript标签，会停止解析HTML，而去加载和执行JavaScript代码，Javascript引擎执行脚本完成后，HTML再继续解析，
JavaScript 脚本是依赖样式表的，会先等CSS文件加载并解析完成再执行，因此Javascript对元素的样式是最终生效的。
javascript 会阻塞HTML解析和页面渲染
css解析和HTML解析并行，不会阻塞HTML解析,但是会阻塞页面渲染（但是Javascript执行，会导致CSS的解析，增加HTML解析的时间）

浏览器对每个域的并行下载数量有一定的限制，一般是 4-6 个

六、连接结束，关闭连接

1. 客户端打算断开连接，向服务器发送FIN报文。
2. 服务器收到连接释放报文段(FIN报文)后，就向客户端发送ACK应答报文。
3. 服务器端发完数据，就向客户端发送连接释放(FIN)报文段，主动关闭 TCP 连接。
4. 客户端收到来自服务器的连接释放(FIN)报文段后，会向服务器发送一个ACK应答报文段

为什么TCP连接在断开时是四次挥手而不是三次

因为在客户端停止向服务器发送消息时，也许服务器还有消息向客户端发送，因此在它对客户端的消息进行回应时，不需要立即附加上「我也不再向你发消息」。在消息发送完毕只有，才需要向客户端发送通知。