使用HTTP/2服務(wù)端推送技術(shù)加速Node.js應(yīng)用
四月份，我們宣布了對 HTTP/2 服務(wù)端推送技術(shù)的支持，我們是通過 HTTP 的 Link 頭部來實(shí)現(xiàn)這項(xiàng)支持的。我的同事 John 曾經(jīng)通過一個(gè)例子演示了在 PHP 里支持服務(wù)端推送功能是多么的簡單。
我們想讓現(xiàn)今使用 Node.js 構(gòu)建的網(wǎng)站能夠更加輕松的獲得性能提升。為此，我們開發(fā)了 netjet 中間件，它可以解析應(yīng)用生成的 HTML 并自動(dòng)添加 Link 頭部。當(dāng)在一個(gè)示例的 Express 應(yīng)用中使用這個(gè)中間件時(shí)，我們可以看到應(yīng)用程序的輸出多了如下 HTTP 頭：
本博客是使用 Ghost(LCTT 譯注：一個(gè)博客發(fā)布平臺(tái))進(jìn)行發(fā)布的，因此如果你的瀏覽器支持 HTTP/2，你已經(jīng)在不知不覺中享受了服務(wù)端推送技術(shù)帶來的好處了。接下來，我們將進(jìn)行更詳細(xì)的說明。
netjet 使用了帶有定制插件的 PostHTML 來解析 HTML。目前，netjet 用它來查找圖片、腳本和外部 CSS 樣式表。你也可以用其它的技術(shù)來實(shí)現(xiàn)這個(gè)。
在響應(yīng)過程中增加 HTML 解析器有個(gè)明顯的缺點(diǎn)：這將增加頁面加載的延時(shí)(到加載***個(gè)字節(jié)所花的時(shí)間)。大多數(shù)情況下，所新增的延時(shí)被應(yīng)用里的其他耗時(shí)掩蓋掉了，比如數(shù)據(jù)庫訪問。為了解決這個(gè)問題，netjet 包含了一個(gè)可調(diào)節(jié)的 LRU 緩存，該緩存以 HTTP 的 ETag 頭部作為索引，這使得 netjet 可以非常快的為已經(jīng)解析過的頁面插入 Link 頭部。
不過，如果我們現(xiàn)在從頭設(shè)計(jì)一款全新的應(yīng)用，我們就應(yīng)該考慮把頁面內(nèi)容和頁面中的元數(shù)據(jù)分開存放，從而整體地減少 HTML 解析和其它可能增加的延時(shí)了。
任意的 Node.js HTML 框架，只要它支持類似 Express 這樣的中間件，netjet 都是能夠兼容的。只要把 netjet 像下面這樣加到中間件加載鏈里就可以了。
- var express = require('express');
- var netjet = require('netjet');
- var root = '/path/to/static/folder';
- express()
- .use(netjet({
- cache: {
- max: 100
- }
- }))
- .use(express.static(root))
- .listen(1337);
稍微加點(diǎn)代碼，netjet 也可以擺脫 HTML 框架，獨(dú)立工作：
- var http = require('http');
- var netjet = require('netjet');
- var port = 1337;
- var hostname = 'localhost';
- var preload = netjet({
- cache: {
- max: 100
- }
- });
- var server = http.createServer(function (req, res) {
- preload(req, res, function () {
- res.statusCode = 200;
- res.setHeader('Content-Type', 'text/html');
- res.end('<!doctype html><h1>Hello World</h1>');
- });
- });
- server.listen(port, hostname, function () {
- console.log('Server running at http://' + hostname + ':' + port+ '/');
- });
netjet 文檔里有更多選項(xiàng)的信息。
查看推送了什么數(shù)據(jù)
訪問本文時(shí)，通過 Chrome 的開發(fā)者工具，我們可以輕松的驗(yàn)證網(wǎng)站是否正在使用服務(wù)器推送技術(shù)(LCTT 譯注： Chrome 版本至少為 53)。在“Network”選項(xiàng)卡中，我們可以看到有些資源的“Initiator”這一列中包含了Push字樣，這些資源就是服務(wù)器端推送的。
不過，目前 Firefox 的開發(fā)者工具還不能直觀的展示被推送的資源。不過我們可以通過頁面響應(yīng)頭部里的cf-h2-pushed頭部看到一個(gè)列表，這個(gè)列表包含了本頁面主動(dòng)推送給瀏覽器的資源。
希望大家能夠踴躍為 netjet 添磚加瓦，我也樂于看到有人正在使用 netjet。
Ghost 和服務(wù)端推送技術(shù)
Ghost 真是包羅萬象。在 Ghost 團(tuán)隊(duì)的幫助下，我把 netjet 也集成到里面了，而且作為測試版內(nèi)容可以在 Ghost 的 0.8.0 版本中用上它。
如果你正在使用 Ghost，你可以通過修改 config.js、并在production配置塊中增加 preloadHeaders 選項(xiàng)來啟用服務(wù)端推送。
- production: {
- url: 'https://my-ghost-blog.com',
- preloadHeaders: 100,
- // ...
- }
Ghost 已經(jīng)為其用戶整理了一篇支持文檔。
總結(jié)
使用 netjet，你的 Node.js 應(yīng)用也可以使用瀏覽器預(yù)加載技術(shù)。并且 CloudFlare 已經(jīng)使用它在提供了 HTTP/2 服務(wù)端推送了。
