node.js实现BigPipe详解
BigPipe是Facebook开发的优化网页加载速度的技术。网上几乎没有用node.js实现的文章,实际上,不止于node.js,BigPipe用其他语言的实现在网上都很少见。以至于这技术出现很久以后,我还以为就是整个网页的框架先发送完毕后,用另一个或几个ajax请求再请求页面内的模块。直到不久前,我才了解到原来BigPipe的核心概念就是只用一个HTTP请求,只是页面元素不按顺序发送而已。
了解了这个核心概念就好办了,得益于node.js的异步特性,很容易就可以用node.js实现BigPipe。本文会一步一步详尽地用例子来说明BigPipe技术的起因和一个基于node.js的简单实现。
我会用express来演示,简单起见,我们选用jade作为模版引擎,并且我们不使用引擎的子模版(partial)特性,而是以子模版渲染完成以后的HTML作为父模版的数据。
先建一个nodejs-bigpipe的文件夹,写一个package.json文件如下:
{ "name":"bigpipe-experiment" ,"version":"0.1.0" ,"private":true ,"dependencies":{ "express":"3.x.x" ,"consolidate":"latest" ,"jade":"latest" } }
运行npminstall安装这三个库,consolidate是用来方便调用jade的。
先做个最简单的尝试,两个文件:
app.js:
varexpress=require('express') ,cons=require('consolidate') ,jade=require('jade') ,path=require('path')
varapp=express()
app.engine('jade',cons.jade) app.set('views',path.join(__dirname,'views')) app.set('viewengine','jade')
app.use(function(req,res){ res.render('layout',{ s1:"Hello,I'mthefirstsection." ,s2:"Hello,I'mthesecondsection." }) })
app.listen(3000)