图解http

303 阅读4分钟

1.序言

前一段时间就看完了《图解HTTP》这本书,想着写点什么,但一直没有找到一个合适的切入点。之前看王福朋老师的博客,他就说过:“我要写东西,必须又一个我觉得很特别而且很合理、高效的思路,如果没有我宁可不写。”所以,如果脑子里面如果没有一个完整的、合理的思路,真的就宁可不写。

想了很久,我打算以目的作为出发点。在开始看这本书之前我抱着两个目的

  • 1.一次完整的HTTP请求是怎样的?
  • 2.在HTTP请求的整个过程中可以做哪些性能优化?

2.一次完整的HTTP请求

这张图是来自我之前的一篇博客,前端性能优化 ,这张图很清晰的描述了“一个请求从发出到返回结果经历了什么?”,但其中没有讲到HTTP协议在其中起到了什么作用,这次我将重点讲HTTP请求的过程。

2.1.DNS域名解析

首先说下DNS服务器是如何通过domain拿到ip的

  • 1.浏览器缓存
  • 2.操作系统缓存
  • 路由器缓存
  • ISP(网络服务提供者)DNS 缓存,一般来着公司或者学习或者院系都可能是一个ISP
  • 如果上面各项都没有拿到,这时候就需要使用,递归查询了。比如www.baidu.com,首先在根域名服务器进行查询,接着是com域名服务器,然后是baidu.com域名服务器。

2.2.TCP连接

TCP三次握手主要用来保证通信的可靠性,具体过程如下所示:

2.3.HTTP request 和 HTTP response

关于HTTP request和HTTP response,我主要说一下与缓存有关的几个字段。 Cache-Control:(通用首部字段) Expires:(HTTP response) Last-Modified / If-Modified-Since Etag / If-None-Match

Cache-Control(http1.1)

说这个之前,首先得说下:缓存设备:主要包括浏览器和CDN(缓存服务器),其中本地浏览器一般缓存私有资源,cdn上主要放置公共资源。 Cache-Control主要有下面的几个指令:

  • max-age:从请求这个资源开始带max-age不会向服务器发起请求,直接从缓存中取;
  • s-maxage:功能和上面的max-age类似,不同在于s-maxage是从公共缓存服务器中拿资源;
  • no-cache:到服务器去问缓存过期没,没过期就从缓存中取;
  • no-store:完全不使用缓存。

Expires(http1.0)(强浏览器缓存策略)

当Cache-Control和Expires同时存在时,Cache-Control的优先级高

Expires缓存过期时间,指定资源的到期时间,是服务器端的具体时间点。告诉浏览器在过期时间之前浏览器可以直接从浏览器缓存中拿数据,不需要再次请求。

Last-Modified / If-Modified-Since + 需要和Cache-Control一起使用

Cache-Control的max-age过期后,就需要通过这两个字段确定是否能够拿缓存里面的资源,request中带入请求字段If-Modified-Since,服务器通过这个时间进行确定,如果是最新的返回304,浏览器直接从缓存中拿数据,如果不是最新的,返回200,同时Last-Modified中返回最新修改时间。

缺点:不能精确的获取修改时间

Etag / If-None-Match

针对上面的Last-Modified / If-Modified-Since,提出的优化方式,Etag / If-None-Match的值为文件内容的hash值,只要文件的内容发生改变,hash值就会发生变化,相对上面的以时间作为判定原则更为精确。

2.4.管线化

持久连接使得多数请求以管线化方式发送成为可能,从前发送请求后需要等待并受到响应,才能发送下一个请求。管线化就是能够同时并行发送多个请求。

2.5.Nginx(负载均衡 + 反向代理)

负载均衡

将我们的应用服务器部署多台,然后通过负载均衡将用户的请求分发到不同的服务器用来提高网站、应用、数据库或其他服务的性能以及可靠性。

正向代理 + 反向代理

正向代理代理客户端,反向代理代理服务器。 正向代理的优点:(vpn翻墙服务)

  • 访问原来无法访问到的资源。
  • 做缓存优化。
  • 客户端访问控制管理,提高安全性。

反向代理的优点:(nginx负载均衡)

  • 缓存优化。
  • 负载均衡
  • 提高安全性。

3.在HTTP请求的整个过程中可以做哪些性能优化?

通过上面的我们很清楚的发现一次完整的HTTP请求首先 DNS解析拿到IP--> Tcp连接-->HTTP request请求-->HTTP 响应

所以HTTP请求过程中优化的点主要有以下两部分:

3.1.DNS预解析

可以看到,淘宝在link标签中就使用了大量的DNS预解析

3.2.nginx配置实现静态资源的缓存

由于这一章的内容比较多,所以会在下一篇博客中详细的介绍到nginx相关的知识已经nginx静态资源的缓存。