其实实现逻辑可以看出 getData.d2 是在 getData.d1 的结果返回后才开始调用,而它们两者并没有这样的依赖关系。我们可以用如 async 之类的处理 JavaScript 异步调用的库来解决这样的问题,不过我们这里就简单手写吧:
app.use(function (req, res) {
var n = 2
, result = {}
getData.d1(function (err, s1data) {
result.s1data = s1data
–n || writeResult()
})
getData.d2(function (err, s2data) {
result.s2data = s2data
–n || writeResult()
})
function writeResult() {
res.render(‘layout’, {
s1: temp.s1(result.s1data)
, s2: temp.s2(result.s2data)
})
}
})
这样就只需 5 秒。

在接下来的优化之前,我们加入 jquery 库并把 css 样式放到外部文件,顺便,把之后我们会用到的浏览器端使用 jade 模板所需要的 runtime.js 文件也加入进来,在包含 app.js 的目录下运行:
mkdir static
cd static
curl http://code.jquery.com/jquery-1.8.3.min.js -o jquery.js
ln -s ../node_modules/jade/runtime.min.js jade.js
并且把 layout.jade 中的 style 标签里的代码拿出来放到 static/style.css 里,然后把 head 标签改为:
head
title Hello, World!
link(href=”/static/style.css”, rel=”stylesheet”)
script(src=”/static/jquery.js”)
script(src=”/static/jade.js”)
在 app.js 里,我们把它们两者的下载速度都模拟为两秒,在app.use(function (req, res) {之前加入:
var static = express.static(path.join(__dirname, ‘static’))
app.use(‘/static’, function (req, res, next) {
setTimeout(static, 2000, req, res, next)
})
受外部静态文件的影响,我们的页面现在的加载时间为 7 秒左右。

如果我们一收到 HTTP 请求就把 head 部分返回,然后两个 section 等到异步操作结束后再返回,这是利用了 HTTP 的分块传输编码机制。在 node.js 里面只要使用 res.write() 方法就会自动加上 Transfer-Encoding: chunked 这个 header 了。这样就能在浏览器加载静态文件的同时,node 服务器这边等待异步调用的结果了,我们先删除 layout.jade 中的这 section 这两行:
section#s1!=s1









