现在最终加载速度又回到大概 5 秒左右了。实际运行中浏览器先收到 head 部分代码，就去加载三个静态文件，这需要两秒时间，然后到第三秒，出现 Partial 1 部分，第 5 秒出现 Partial 2 部分，网页加载结束。就不给截图了，截图效果和前面 5 秒的截图一样。
但是要注意能实现这个效果是因为 getData.d1 比 getData.d2 快，也就是说，先返回网页中的哪个区块取决于背后的接口异步调用结果谁先返回，如果我们把 getData.d1 改成 8 秒返回，那就会先返回 Partial 2 部分，s1 和 s2 的顺序对调，最终网页的结果就和我们的预期不符了。
这个问题最终将我们引导到 BigPipe 上来，BigPipe 就是能让网页各部分的显示顺序与数据的传输顺序解耦的技术。
其基本思路就是，首先传输整个网页大体的框架，需要稍后传输的部分用空 div（或其他标签）表示：
复制代码 代码如下:
res.render('layout', function (err, str) {
if (err) return res.req.next(err)
res.setHeader('content-type', 'text/html; charset=utf-8')
res.write(str)
res.write('<section></section><section></section>')
})
然后将返回的数据用 JavaScript 写入
复制代码 代码如下:
getData.d1(function (err, s1data) {
res.write('<script>$("#s1").html("' + temp.s1(s1data).replace(/"/g, '\\"') + '")</script>')
--n || res.end()
})
s2 的处理与此类似。这时你会看到，请求网页的第二秒，出现两个空白虚线框，第五秒，出现 Partial 2 部分，第八秒，出现 Partial 1 部分，网页请求完成。
至此，我们就完成了一个最简单的 BigPipe 技术实现的网页。
需要注意的是，要写入的网页片段有 script 标签的情况，如将 s1.jade 改为：
复制代码 代码如下:
h1 Partial 1
.content!=content
script
alert("alert from s1.jade")
然后刷新网页，会发现这句 alert 没有执行，而且网页会有错误。查看源代码，知道是因为 <script> 里面的字符串出现 </script> 而导致的错误，只要将其替换为 <\/script> 即可
复制代码 代码如下:
res.write('<script>$("#s1").html("' + temp.s1(s1data).replace(/"/g, '\\"').replace(/<\/script>/g, '<\\/script>') + '")</script>')
以上我们便说明了 BigPipe 的原理和用 node.js 实现 BigPipe 的基本方法。而在实际中应该怎样运用呢？下面提供一个简单的方法，仅供抛砖引玉，代码如下：
复制代码 代码如下:
var resProto = require('express/lib/response')
resProto.pipe = function (selector, html, replace) {
this.write('<script>' + '$("' + selector + '").' +
(replace === true ? 'replaceWith' : 'html') +
'("' + html.replace(/"/g, '\\"').replace(/<\/script>/g, '<\\/script>') +
'")</script>')
}
function PipeName (res, name) {
res.pipeCount = res.pipeCount || 0
res.pipeMap = res.pipeMap || {}
if (res.pipeMap[name]) return
res.pipeCount++
res.pipeMap[name] = this.id = ['pipe', Math.random().toString().substring(2), (new Date()).valueOf()].join('_')
this.res = res
this.name = name
}
resProto.pipeName = function (name) {
return new PipeName(this, name)
}
resProto.pipeLayout = function (view, options) {
var res = this
Object.keys(options).forEach(function (key) {
if (options[key] instanceof PipeName) options[key] = '<span></span>'
})
res.render(view, options, function (err, str) {
if (err) return res.req.next(err)
res.setHeader('content-type', 'text/html; charset=utf-8')
res.write(str)
if (!res.pipeCount) res.end()
})
}
resProto.pipePartial = function (name, view, options) {
var res = this
res.render(view, options, function (err, str) {
if (err) return res.req.next(err)
res.pipe('#'+res.pipeMap[name], str, true)
--res.pipeCount || res.end()
})
}
app.get('https://www.jb51.net/', function (req, res) {
res.pipeLayout('layout', {
s1: res.pipeName('s1name')
, s2: res.pipeName('s2name')
})
getData.d1(function (err, s1data) {
res.pipePartial('s1name', 's1', s1data)
})
getData.d2(function (err, s2data) {
res.pipePartial('s2name', 's2', s2data)
})
})
还要在 layout.jade 把两个 section 添加回来：
复制代码 代码如下:
section#s1!=s1
section#s2!=s2