Web 性能一直都是前端开发者关注的重点之一。当我们讨论性能优化时，一般会涉及到缓存、gzip 压缩等知识点。在现代化的 Web 应用中，HTTP 1.1 已经不能完全满足我们的需求了。本文将介绍 HTTP2 协议和服务端推送技术，以帮助读者在前端项目中优化性能。
HTTP2 的优势
HTTP2 协议是一种新的 HTTP 版本，它是由 Google 开发的 SPDY 协议改进而来。相比于 HTTP 1.1，HTTP2 具有以下优势：
多路复用
HTTP2 可以在同一个连接上呈现多个请求和响应。这就意味着，无论是在加载大量图片还是其他资源时，仅需单个连接即可完成操作。多路复用降低了请求和响应的延迟，进而改善了用户体验。
二进制协议
与 HTTP 1.1 的文本协议不同，HTTP2 是一种二进制协议。它将头信息和消息体分开传输，有效地提高了传输速度。这也使得网络包的大小更小，减轻了服务器和客户端的负担。
流控制
HTTP2 具有流控制的功能，不同于 HTTP 1.1 只能使用 TCP 慢启动算法。这使得 HTTP2 可以控制每个连接上的数据流量，避免了连接因为某个原因而崩溃。
优化 Header 压缩
一个 HTTP 1.1 的请求，往往需要包含大量的 Header 信息。HTTP2 通过 HPACK 算法来压缩 Header 信息。虽然这个过程需要消耗一些 CPU 和内存资源，但压缩后的信息包更小了，可以减少带宽使用量。
服务端推送
服务端推送是一个针对 HTTP2 协议的优化技术。在基于 HTTP2 协议的应用中，服务端会主动向客户端预加载服务端所能推送的资源。这个预加载的工作通常是在浏览器仍在解析 HTML 时开始执行的。这就可以实现在浏览器请求某个资源时已经有了该资源了的目的，减少用户等待时间。
使用服务端推送的前提条件是，服务端必须配置正确定义的 HTTP2 服务器。下面的示例将使用 Node.js 作为 HTTP2 服务器，来实现服务端推送的效果。
示例代码
-- -------------------- ---- ------- ----- ----- - ----------------- ----- -- - -------------- ----- ---- - ---- ----- ------- - - ---- ------------------------------------ ----- ------------------------------------ -- ----- ------ - ---------------------------------- -- --------- -------------------- ------ -- - ----- -------- - --------------------------------- - --- - -------------------------- -------------------------- ---------------- -------- ----------------- --- -- ------------ -- -------- ------------------- -------- ----------------- -- ------------ -- - ------------------------------ ---------------- -------- ----------------- --- -- ------------- ----------------------------------------------------------- --- --- --------------------展开代码
如上所述，代码取消息会打开一个 HTTP2 安全服务。在这个服务器上，我们监听 session 事件，并调用 pushStream 函数来发送额外的资源。这里使用了一个 stylesheet.css 资源来作为示例。在使用这个服务器时，一个 HTTP GET 请求会触发服务端推送 stylesheet.css。
总结
HTTP2 和服务端推送是 Web 性能优化领域的新趋势。本文介绍了这两种技术的优势和基本用法，也提供了一些示例代码帮助读者了解如何在自己的 Web 项目中使用。在实践过程中，我们可以进一步深入学习这些技术，从而使更快更好的 Web 体验成为可能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aba69badd4f0e0ff54fccf
