别再用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成功。

相关推荐
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_2 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
勤源科技3 小时前
全链路智能运维中的实时流处理架构与状态管理技术
运维·架构
失散134 小时前
分布式专题——43 ElasticSearch概述
java·分布式·elasticsearch·架构
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo4 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li4 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
mit6.8245 小时前
[Backstage] 后端插件 | 包架构 | 独立微服务 | by HTTP路由
架构
浪裡遊6 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php