HTTP2.0新特性
http请求的性能瓶颈:
影响一个HTTP网络请求的因素主要是延迟,延迟来自一下方面:
- 浏览器阻塞(HOL blocking):浏览器会因为一些原因阻塞请求。浏览器对于同一个域名,同时只能有 4-6 个连接(这个根据浏览器内核不同可能会有所差异),超过浏览器最大连接数限制,后续请求就会被阻塞。
- DNS 查询(DNS Lookup):浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用DNS缓存结果来达到减少这个时间的目的。
- 建立连接(Initial connection):HTTP 是基于 TCP 协议的,浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文,达到真正的建立连接,但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显,慢启动则对文件类大请求影响较大。
http1.1存在的问题:
- 请求无法复用:HTTP1.x在传输数据时,每次都需要重新建立连接,无疑增加了大量的延迟时间,特别是在移动端更为突出。
- keep-alive的性能问题:虽然HTTP1.x支持了keep-alive,来弥补多次创建连接产生的延迟,但是keep-alive使用多了同样会给服务端带来大量的性能压力,并且对于单个文件被不断请求的服务(例如图片存放网站),keep-alive可能会极大的影响性能,因为它在文件被请求之后还保持了不必要的连接很长时间。
- 明文传输:所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份,这在一定程度上无法保证数据的安全性
- header头过大、重复:header头携带的内容过大,在一定程度上增加了传输的成本,并且每次请求header基本不怎么变化,尤其在移动端增加用户流量
https对http的改进
HTTPS运行在SSL/TLS之上,SSL/TLS运行在TCP之上,所有传输的内容都经过加密的,因此可以防止运营商对数据的劫持.
端口使用443
http2.0对http1.1的改进
- 二进制分帧:HTTP2.0会将所有传输信息分割为更小的消息和帧,并对它们采用二进制格式的编码将其封装。其中,HTTP1.X中的首部信息header封装到Headers帧中,而request body将被封装到Data帧中,相比文本传输,提高了解析效率,同时减少了传输错误。
- 多路复用:一个 TCP 连接上可以并行处理多个请求,每个请求的帧可以交错发送,再根据流 ID 组装回来,从而消除队头阻塞。
- 头部压缩(HPACK): HTTP/1.1时每次请求都会带大量相同的头信息,比如 Cookie、User-Agent 等,浪费带宽,http2.0引入 HPACK 压缩算法,将头部字段进行编码和压缩,通讯双方各自cache一份header fields表,既避免了重复header的传输,又减小了需要传输的大小。
- 服务器推送: 服务器可以提前推送一些客户端可能需要的资源,比如 HTML 页面请求后,服务器可以主动推送 CSS、JS、图片等资源,减少等待时间。
- 流优先级:允许客户端为不同的流设置优先级,服务器可以根据优先级优化资源分配,比如让关键资源先传输,提高页面加载速度。
如何将现有项目升级为http2.0
- 使用https: HTTP2.0其实可以支持非HTTPS的,但是现在主流的浏览器像chrome,firefox表示还是只支持基于 TLS 部署的HTTP2.0协议
- 配置nginx,启动相关协议:
确认你的 Nginx 支持 HTTP/2(一般 1.9.5 及以上版本支持),并开启 HTTP/2:
1234server {
listen 443 ssl http2;
# 开启 HTTP/2
server_name example.com;
}
服务端push的开启:
Nginx 1.13.9 以前: 使用 http2_push
指令
1 2 3 4 5 | location = /index.html { http2_push /style.css; http2_push /app.js; http2_push /logo.png; } |
Nginx 1.13.10 及以上: 设置 Link
响应头
1 2 3 4 5 | location = /index.html { add_header Link '</style.css>; rel=preload; as=style' , '</app.js>; rel=preload; as=script' , '</logo.png>; rel=preload; as=image' ; } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构