• 1、DNS解析

• 2、TCP连接

• 3、发送HTTP请求

• 4、服务器处理请求并返回HTTP报文

• 5、浏览器解析渲染页面

• 6、连接结束

一、DNS解析：

这个过程实际上是浏览器将输入的url发送到DNS服务器进行查询，DNS服务器会返回当前查询url的IP地址。实际上充当了一个翻译的角色，实现了网址到IP地址的转换，DNS解析是一个递归查询的过程，必须对DNS进行优化

DNS缓存：

DNS存在着多级缓存，从离浏览器距离排序的话有以下几种

• 浏览器缓存
• 系统缓存
• 路由器缓存
• IPS服务器缓存
• 根域名服务器缓存
• 顶级域名服务器缓存
• 主域名服务器缓存

DNS负载均衡：

DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器距离用户地理位置的距离等待，这种过程就是DNS负载均衡，又叫DNS重定向。大家耳熟能详的CDN就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，并提供所需的内容。

二、TCP连接

• 第一次握手：客户端发送第一个包，其中SYN标志位为1, ACK=0，发送顺序号sequence=X(随机int)。客户端进入SYN发送状态，等待服务器确认
• 第二次握手：服务器收到这个包后发送第二个包，其中包SYN、ACK标志位为1，发送顺序号seq=Y(随机int)，接收顺序号ACK=X+1，此时服务器进入SYN接收状态。
• 第三次握手：客户端收到服务器传来的包后，向服务器发送第三个包，SYN=0, ACK=1，接收顺序号ACK = Y+1,发送顺序号seq=X+1。此包发送完毕，客户端和服务器进入ESTABLISHED建立成功状态，完成三次握手。

理解：第一次握手，客户端发起，我要连接了；第二次握手，服务端收到了，给与回应，我收到了；第三次握手，客户端发起，我收到你的回复了。三次握手完毕后，正式通信。按照正常的理解，无须第三次握手，第三次握手是为了防止第一次握手时，由于网络延迟，一直没有收到服务端发回的响应，客户端就会再次发起握手请求，收到了吗，还没收到，我再发…，当网络变好后，客户端就会多次服务端的回应，如果没有第三次握手，资源都浪费了

三、HTTP请求

常用的方法有：GET、POST、PUT、DELETE、OPTIONS、HEAD

请求报头：请求报头允许客户端向服务器传递请求的附加信息和客户端⾃⾝的信息。常⻅ 的请求报头有: Accept , Accept-Charset , Accept-Encoding , Accept-Language , Content-Type , Authorization , Cookie , User-Agent 等。

Accept ⽤于指定客户端⽤于接受哪些类型的信息， Accept-Encoding 与 Accept 类似，它⽤于 指定接受的编码⽅式。 Connection 设置为 Keep-alive ⽤于告诉客户端本次 HTTP 请求结束 之后并不需要关闭 TCP 连接，这样可以使下次 HTTP 请求使⽤相同的 TCP 通道，节省 TCP 连接建⽴的时间。

请求正⽂： 当使⽤ POST, PUT 等⽅法时，通常需要客户端向服务器传递数据。这些数据 就储存在请求正⽂中。在请求包头中有⼀些与请求正⽂相关的信息，例如: 现在的 Web 应⽤通常采⽤ Rest 架构，请求的数据格式⼀般为 json。这时就需要设置 Content-Type: application/json 。

Content-Type：

• application/x-www-form-urlencoded
• multipart/form-data
• application/json

• application/xml 和 text/xml

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

三四两部涉及到缓存：

强缓存：

Expires:

值是一个HTTP日期，根据时间比较，判断是缓存失效，重新获取数据。Expires的优先级在三个Header属性中是最低的。

Cache-Control:

• private：客户端可以缓存
• public：客户端和代理服务器均可缓存；
• max-age=xxx：缓存的资源将在 xxx 秒后过期；
• no-cache：需要使用协商缓存来验证是否过期；
• no-store：不可缓存
• must-revalidate:使用 must-revalidate 指令，代理会向源服务器再次验证即将返回的响应缓存目前是否仍有效。另外，使用 must-revalidate 指令会忽略请求的 max-stale 指令。
• proxy-revalidate：指令要求所有的缓存服务器在接收到客户端带有该指令的请求返回响应之前，必须再次验证缓存的有效性
• s-maxage：缓存的生存时间可以使用新的“s-maxage”（s 是 share 的意思，注意 maxage 中间没有“-”），只限定在代理上能够存多久，而客户端仍然使用“max-age”。
• no-transform：代理有时候会对缓存下来的数据做一些优化，比如把图片生成 png、webp 等几种格式，方便今后的请求处理，而“no-transform”就会禁止这样做，不许“偷偷摸摸搞小动作”。

Pragma:

• Pragma 只有一个属性。就是no-cache，效果和cache-control中的no-cache一致，不使用强缓存，需要与服务器端来验证缓存是否新鲜，在3个头部属性中优先级最高。

协商缓存：

协商缓存是由服务器来确定缓存资源是否可用。 主要涉及到两对属性字段，都是成对出现的，即第一次请求的响应头带上某个字, Last-Modified 或者 Etag，则后续请求则会带上对应的请求字段 If-Modified-Since或者 If-None-Match，若响应头没有 Last-Modified 或者 Etag 字段，则请求头也不会有对应的字段。

Last-Modified/If-Modified-Since 二者的值都是GMT格式的时间字符串， Last-Modified 标记最后文件修改时间， 下一次请求时，请求头中会带上 If-Modified-Since 值就是 Last-Modified 告诉服务器我本地缓存的文件最后修改的时间，在服务器上根据文件的最后修改时间判断资源是否有变化， 如果文件没有变更则返回 304 Not Modified ，请求不会返回资源内容，浏览器直接使用本地缓存。当服务器返回 304 Not Modified 的响应时，response header 中不会再添加的 Last-Modified 去试图更新本地缓存的 Last-Modified， 因为既然资源没有变化，那么 Last-Modified 也就不会改变；如果资源有变化，就正常返回返回资源内容，新的 Last-Modified 会在 response header 返回，并在下次请求之前更新本地缓存的 Last-Modified，下次请求时，If-Modified-Since会启用更新后的 Last-Modified。

Etag/If-None-Match， 值都是由服务器为每一个资源生成的唯一标识串，只要资源有变化就这个值就会改变。服务器根据文件本身算出一个哈希值并通过 ETag字段返回给浏览器，接收到 If-None-Match 字段以后，服务器通过比较两者是否一致来判定文件内容是否被改变。与 Last-Modified 不一样的是，当服务器返回 304 Not Modified 的响应时，由于在服务器上ETag 重新计算过，response header中还会把这个 ETag 返回，即使这个 ETag 跟之前的没有变化。
 

五、浏览器解析渲染页面

首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到页面上，这个过程涉及到重制（回流）、重绘

reflow回流 ： DOM 节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计 算其位置和⼤⼩等，这个过程称为 reflow

repain重绘： 当盒模型的位置, ⼤⼩以及其他属性，如颜⾊, 字体, 等确定下来之后，浏览器 便开始绘制内容，这个过程称为 repain

JS解析是由浏览器的JS解析引擎完成的。JS是单线程，也就是说，在同一个时间内只做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所有需要一种机制可以先执行排在后面的任务 ，这就是：同步任务、异步任务

JS的执行机制就可以看做是一个主线程加上一个任务队列。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈；异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时会先依次运行执行栈，然后从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫事件循环Event loop

六、连接结束 

四次挥手

为什么两次握手不行？  
因为第二次握手，主机B还不能确认主机A已经收到确认请求，也是说B认为建立好连接，开始发数据了，结果发出去的包一直A都没收到，那攻击B就很容易了，我专门发包不接收，服务器很容易就挂了

为什么建立连接协议是三次握手，而关闭连接却是四次握手呢？
建立连接时，ACK和SYN可以放在一个报文里来发送。而关闭连接时，被动关闭方可能还需要发送一些数据后，再发送FIN报文表示同意现在可以关闭连接了，所以它这里的ACK报文和FIN报文多数情况下都是分开发送的。