HTTP请求的过程
1.DNS解析
2.TCP连接
3.发送HTTP请求
4.服务器处理请求并返回HTTP报文
5.浏览器解析渲染页面
6.连接结束
通信性能区别
HTTP1.0与HTTP1.1
- HTTP1.1持久化连接
- HTTP1.1管线化技术
HTTP2.0与HTTP1.1
- HTTP2.0多路复用
- HTTP2.0HTTP协议头部压缩
HTTP/1.1中的Web优化
HTTP/1.1中大多数的网站性能优化技术都是减少向服务器发起的HTTP请求数。浏览器可以同时建立有限个TCP连接,而通过这些连接下载资源是一个线性的流程:一个资源的请求响应返回后,下一个请求才能发送。这被称为线头阻塞。
因此,Web开发者开始将尽可能多的资源塞进一个连接中,并寻找其他办法来避免浏览器出现线头阻塞。在HTTP/2中,这样的实践事实上会增加页面的加载时间。
HTTP/2中的Web优化
HTTP/2的优化需要不同的思维方式。Web开发者应该专注于网站的缓存调优,而不是担心如何减少HTTP请求数。通用的法则是,传输轻量、细粒度的资源,以便独立缓存和并行传输。这种转变的出现是因为HTTP/2的多路复用和头部压缩特性。
多路复用
多路复用使得不同的请求共用一个TCP连接,允许多个资源并行下载,避免建立多个连接带来不必要的额外开销。它消除了HTTP/1.1中的线头阻塞问题。头部压缩进一步减少了多个HTTP请求的开销,因为每个请求开销都小于未压缩的等价HTTP/1.1请求。
流优先级
通过允许浏览器指定接受资源的顺序,优先处理指定的http请求
服务端推送
也就是服务端渲染,允许服务端主动发送额外的资源。类似于ssr首屏的处理。
PS:文件合并依然可以提高压缩率,但它带来了代价高昂的缓存失效。即使有一行CSS改变了,浏览器也会强制重新加载你 所有的 CSS声明。另外,不是所有页面都使用了合并后的CSS或JavaScript文件中的全部声明或函数。
HTTP2不建议使用内联资源
在极端情况下,这确实能够减少给定网页的HTTP请求数。但是,HTTP/2的机制仍然会由于可以的合并,导致缓存失效问题。
1. 内联意味着浏览器不能缓存单个的资源。
2. 内联同样会破坏流优先级。浏览器无法按照偏好的顺序请求资源,潜在地增加了首次渲染时间。
HTTP2不建议使用细分域名
HTTP2中,细分的域名都会带来额外的DNS查询、TCP连接和TLS握手。
在HTTP/1.1中,这个开销通过资源的并行下载得到了补偿。但在HTTP2中并非如此,
多路复用使得多个资源可以在一个连接中并行下载。域名细分使浏览器不能跨域比较优先级,也就破坏了流优先级。
HTTP常用的优化实践
- 减少DNS查询时间
- 使用CDN
- 利用浏览器缓存
- 最小化HTTP请求大小
- 最小化HTTP响应大小
- 减少不必要的重定向