简介
在前端开发中，我们通常需要通过 HTTP 协议向服务器请求数据。然而，当客户端向服务器发送请求时，服务器可能会返回一个 202 Accepted 的响应，表示服务正在处理请求，但还没有完成。这时，客户端需要等待服务器处理完成后才能获取数据。为了解决这个问题，HTTP/2 规范引入了一个新的概念：server push。server push 允许服务器在客户端请求之前就将所需的资源推送到客户端，从而提高网页的性能和加载速度。
early-hints 是一个 HTTP/2 服务器推送请求头，它可以让服务器在客户端请求之前就向客户端推送一些资源，提高网页的性能。该功能需要服务器和客户端都支持 HTTP/2 协议。
本文将介绍如何使用 NPM 包 early-hints 实现 early-hints 功能。
安装
我们可以通过以下命令在我们的项目中安装 early-hints：
npm install early-hints
如何使用
首先，我们需要创建一个 HTTP2 服务器。我们可以使用 Node 提供的 http2 模块来创建一个 HTTP2 服务器。以下是一个简单的服务器示例：
-- -------------------- ---- -------
----- ----- - ----------------
----- -- - -------------
----- ------- - -
---- ---------------------------
----- ---------------------------
-
----- ------ - ---------------------------------
------------------- -------- -------- -- -
----------------
--------------- -------------
---------- ---
--
----------------- -------
--
------------------- -- -- -
------------------- -- ------ -- ---- ------
--在上面的示例中，我们创建了一个 HTTP2 服务器，并在服务器的 stream 事件中响应客户端请求。
接下来，我们可以使用 early-hints 包来实现 early-hints 功能。以下是更新后的示例：
-- -------------------- ---- -------
----- ----- - ----------------
----- -- - -------------
----- ---------- - ----------------------
----- ------- - -
---- ---------------------------
----- ---------------------------
-
----- ------ - ---------------------------------
------------------- -------- -------- -- -
----- ------------ - -
---------- ----
------- -------------- ------------ ---------
-
------------------ -------------
----------------
--------------- ------------
---------- ---
--
------------------------------- ---------------- --------------------------------------- --------------------------
------------
--
------------------- -- -- -
------------------- -- ------ -- ---- ------
--在上面的示例中，我们首先定义了一个 earlyHeaders 对象，该对象包含 early-hints 的响应头信息，并传递给 earlyHints() 方法。
在 stream.respond() 方法中，我们定义了响应头信息，这里设置了 content-type 和 :status 属性。注意，我们必须在调用 earlyHints() 方法之后才能调用 stream.respond() 方法。
最后，我们向客户端发送一个 HTML 页面，并通过 stream.end() 方法结束响应。
总结
在本文中，我们介绍了如何使用 NPM 包 early-hints 实现 HTTP/2 的 early-hints 功能。通过使用 early-hints，我们可以在客户端请求之前向客户端推送一些资源，提高网页的性能。使用 early-hints 包非常简单，只需要定义一个 earlyHeaders 对象，然后传递给 earlyHints() 方法即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517c81e8991b448cecd9