前言
在前端开发中，提升网站性能一直是开发者们的追求，除了提高代码质量和减少资源加载，选择合适的网络协议也能极大的优化网站的性能。而 HTTP/2 协议的出现，为我们带来了一个全新的性能优化方向。在 PWA 应用中，我们可以通过使用 HTTP/2 协议来有效提升应用的性能表现。
HTTP/2 协议介绍
HTTP/2 （Hyper Text Transfer Protocol 2）是 HTTP/1.1 的后继版本，于2015年正式发布。HTTP/2 协议主要带来了以下这些特性：
二进制协议：HTTP/2 将请求和相应数据都分割成小块二进制数据帧，而非 HTTP/1.x 的文本数据。这样的好处是降低数据传输体积，缩短响应时间。
多路复用：HTTP/1.x 中每个 TCP 连接只能发送一个请求，在排队进程中只能处理一个请求。而 HTTP/2 可以在单个 TCP 连接中同时发送多个请求，解决了 HTTP/1.x 的队头阻塞问题，减少了 TCP 连接数，降低了延迟。
服务器推送：HTTP/2 可以让服务器在客户端请求之前，提前将客户端需要的资源推送给客户端。这样可以节省客户端多次请求的开销，提高加载速度。
如何在 PWA 应用中使用 HTTP/2 协议
1. 使用域名推送
首先，我们可以使用域名推送的方式，将应用需要的资源提前推送给客户端。这样可以减少客户端多次请求的开销，提升加载速度。
<link rel="preload" href="/styles/main.css" as="style"> <link rel="preload" href="/scripts/main.js" as="script">
2. 将静态资源部署在 CDN 上
其次，我们可以将静态资源部署在 CDN 上。通过使用 CDN，可以将资源缓存到用户最靠近的节点。这样可以快速加载资源，提升性能表现。
<link rel="stylesheet" href="https://cdn.example.com/styles/main.css"> <script src="https://cdn.example.com/scripts/main.js"></script>
3. 在服务器端配置 HTTP/2
最后，我们可以在服务器端配置 HTTP/2 协议。服务器端可以使用 ALPN 进行协议升级，使用更加高效的二进制传输协议。使用 HTTP/2 可以有效减少网络开销，提升应用的性能表现。
# 开启 HTTP/2
server {
listen 443 ssl http2;
#...
}总结
在 PWA 应用中使用 HTTP/2 协议可以提升应用的性能表现。我们可以使用域名推送将需要的资源提前推送给客户端，将静态资源部署在 CDN 上，同时在服务器端配置 HTTP/2 协议。通过使用这些方法，我们可以提升应用的性能表现，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9e3be48841e98945fdcbd