别再用HTTP/1这个老古董了,两招帮你升级HTTP/2

头两天分析 SSE 技术的时候简单提过HTTP/2的事儿,毕竟HTTP/1.x协议早已经算是"老古董"级别的了。

升级理由

从HTTP/1.x升级到HTTP/2可以带来多方面的性能提升和优化:

多路复用(Multiplexing)

  • 在HTTP/1.x中,每个TCP连接只能处理一个请求或响应,这导致了所谓的"队头阻塞"问题。而在HTTP/2中,多路复用允许在同一个TCP连接上同时发送多个请求和响应,极大地提高了资源的利用效率,并减少了页面加载时间。

头部压缩(Header Compression)

  • HTTP/2引入了HPACK算法来压缩HTTP头部信息,减少了每次请求和响应所需的传输数据量。这对于移动网络环境尤其有利,因为它能减少延迟时间和带宽使用。

提高安全性

  • 虽然HTTP/2可以在理论上支持明文传输,但所有主流浏览器仅支持通过TLS(通常是HTTPS)实现的HTTP/2。这意味着采用HTTP/2通常也意味着增强了网站的安全性。

升级到HTTP/2能够显著提升网站的加载速度和用户体验,尤其是在高延迟或者低带宽环境下。

总之就是:

升级方法

申请证书

当前大多数现代浏览器只在使用TLS(即HTTPS)时才支持HTTP/2,因此需要网站配置SSL/TLS证书(最好启动强制HTTPS)。

如果没有SSL证书,可以考虑使用Let's Encrypt免费获取一个。(国内几个云产品平台好像也可以)

升级Web服务器

高版本的Web服务器才支持 HTTP/2:

  • Apache:从2.4.17版本开始支持HTTP/2。
  • Nginx:从1.9.5版本开始支持HTTP/2。
  • IIS:Windows Server 2016和Windows 10起支持HTTP/2。

Apache

确保mod_http2模块已经安装并启用。

bash 复制代码
<VirtualHost *:443>
    ...
    
    # 确保启用了SSL
    SSLEngine on
    SSLCertificateFile /path/to/your_domain_name.crt
    SSLCertificateKeyFile /path/to/your_private.key
    SSLCertificateChainFile /path/to/DigiCertCA.crt

    # 启用HTTP/2
    Protocols h2 http/1.1
    
    ...
</VirtualHost>

// 同时支持HTTP/2和HTTP/2的明文版本(h2c)
Protocols h2 h2c http/1.1

注意!大多数浏览器不支持非加密的HTTP/2连接(h2c)。

修改完成以后记得重启!!!

Nginx

先确保Nginx编译时包含了HTTP/2模块。你可以通过运行nginx -V命令检查是否存在--with-http_v2_module。

perl 复制代码
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # 将所有HTTP请求重定向到HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;  # 注意这里的http2参数
    
    ...
}

IIS

如果使用的是Windows Server 2016或Windows 10及更新版本,IIS默认支持HTTP/2。

只需确保你的网站启用了HTTPS,IIS将自动启用HTTP/2支持,无需额外配置。

验证

想要查看自己的网站是否成功开启了HTTP/2的话,打开Chrome控制台,选择NetWork,选择任意接口点击右键。

选择 Header Options,勾选 Protocol,刷新页面。

可以看到 NetWork 中多处一列 Protocol,这里如果显示 h2 则表明开启HTTP/2成功。

相关推荐
拉不动的猪1 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程1 小时前
ES练习册
java·前端·elasticsearch
Asthenia04121 小时前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员3 小时前
layui时间范围
前端·javascript·layui
NoneCoder3 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19703 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴3 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript