前言
在前端开发中，提高页面加载速度是一项重要任务。spdy-push 是一个 npm 包，它可以通过发送服务器推送，优化页面加载体验，加快页面渲染速度。在这篇文章中，我们将学习如何使用 spdy-push，以及如何通过它来优化前端页面性能。
spdy-push 的基本介绍
spdy-push 是一个 node.js 模块，它可以让服务器在向客户端发送一个请求的同时，把一些其它资源也推送到客户端，以缩短等待响应的时间，提高页面加载速度。
spdy-push 使用的协议是 SPDY，而不是 HTTP。这是因为 SPDY 协议支持服务器主动推送数据，而 HTTP 协议不支持。为了使用 spdy-push，我们需要使用 SPDY 协议的服务器。
安装 spdy-push
安装 spdy-push 的方式和其它 npm 包一样，使用 npm 安装命令即可：
npm install spdy-push
在安装 spdy-push 前，请确保您的 node.js 版本大于 0.8.0。
使用 spdy-push
下面是一个使用 spdy-push 的示例代码。
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- ------ - -------------------
---- --------------------------------------- --------------
----- --------------------------------------- --------------
-- ------------- ---- -
------------------ ---------------- ------------ -------- --------
-------------- --------
---
------------------ ---------- -
------------------- --------- -- ---- - - -----------------------
---
-- -------
----------------- -------- --------------- -- -
-- ------------------------- --- --------------- -
--------------------------------------------- ---------------- -------------
- ---- -- ------------------------- --- -------------- -
-------------------------------------------- ---------------- ---------------
-
---在这个示例中，我们启动了一个 SPDY 协议的服务器，并发布了一个推送事件，在 event handler 中，我们通过判断 requestHeaders[':path'] 的值是否为 /styles.css 或 /image.jpg，来确定推送哪些资源给客户端。
实战演示
为了更好地理解如何使用 spdy-push，我们来实现一个简单的示例。
首先，我们需要一个支持 SPDY 协议的服务器。Node.js 的 spdy 模块可以让我们很容易地实现一个 SPDY 服务器。
我们可以使用下面的代码建立一个 SPDY 服务器。这个服务器所做的事情很简单，就是返回一个 HTML 文件和两个推送文件，分别是一个 CSS 文件和一个图片文件。
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- ------- - -
---- ------------------------------------ -----------------
----- ------------------------------------ -----------------
--
----- ------ - -------------------------- ----- ---- -- -
------------------ --------------------- ------------- -------------
-------------------------------- ---------------- ----- ----- -- -
-- ----- -
-------------------
------ -------------- ------- ----------- ---------
-
------------------ ---------------- --------------
--------------
---
---
------------------- --- -- -
-- ----- -
-------------------
------ ----------------
- ---- -
------------------- ------- -- -------------------------
-
---
----------------- -------- -------- -- -
-- ----------------- --- ------------ -
-------------------------------- -------------- ----- ----- -- -
-- ----- -
-------------------------- ------
-------------
-------
-
---- -
------------------------------- ----------- ---------- ------
-----------------
-
---
- ---- -- ----------------- --- ------------- -
-------------------------------- --------------- ----- ----- -- -
-- ----- -
-------------------------- ------
-------------
-------
-
---- -
------------------------------- ------------- ---------- ------
-----------------
-
---
-
---上面的代码可以说是非常简单了。我们通过调用 spdy.createServer 方法创建了一个 SPDY 服务器，然后在服务器建立时，向客户端发送 index.html 的内容。
在服务器发送 index.html 的响应时，我们为 HTTP 响应头设置了 Content-Type。
接下来，我们在服务器上订阅了一个 push 事件，以便我们有机会在客户端请求 index.html 文件时推送图片和 CSS 样式。
当我们收到 push 事件时，我们可以通过检查 request headers 来决定我们要推送哪些文件。
在这个例子中，我们发送了一个 /main.css 样式表和 /image.jpg 图片。这是通过 stream.respond 方法完成的。
通过 stream.respond 方法，我们可以设置文件名、文件类型、HTTP 状态码以及响应内容。
结论
在这篇文章中，我们介绍了 spdy-push 的基本用法，并提供了一个实例可以帮助我们更好的理解它的使用。使用 spdy-push 可以减少页面加载时间，提高用户体验。需要注意的是，spdy-push 只支持 SPDY 协议。要使用 SPDY 协议进行开发，必须考虑浏览器的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69297