使用BigPipe优化页面的加载速度实践

说起网页速度优化，想必大家都能说上几句，最知名的莫过于雅虎的23条了。这里有一系列的小建议和优化策略，但是治病也得看症状，对症下药才是关键。

比如淘宝卖家中心首页速度优化的这个场景，就是一个很突出的例子。文章里针对首页展示优化策略做个一个全面的对比，这里我就不多逼逼了，关于BigPipe这种分块传输的原理，这里也有很好的说明，也没必要多说。

在我实际的工作中，也遇到这样的场景，虽然没有上述的这么明显，但是却也有着更复杂的场景。

1. 比如首页是一个静态页面，不依赖什么接口

2. 列表页涉及到价格日历，筛选，一些提示信息模块等，依赖不同的接口

3. 因为使用了node，可以实现前后端模板共用。同样也可以实现是html片段是前端拼接还是node层拼接，前端拼接的好处是模板可以缓存，传输数据的数据量相对少一些。node层拼接的好处是减少了前端的运算量，拼接好的html片段可以在服务端缓存

4. 有些前端接口可能需要整合多个后端接口的数据

5. ...

针对这些，在实践中我基于express做了一层包装，可以完美支持以上各种场景，当然更开心的使用 bigPipe 是其中很重要的目的.

采用BigPipe的优势就是

1. 提高了首屏的展示速度

2. 单页面有多接口多模块的时候，可以在一个长连接中通过chunk的方式分批返回，减少了http请求的压力

3. 前后端模板公用，同时可以实现服务端渲染，对搜索引擎更加友好

使用前：

使用后：

妈的，怎么感觉像卖药的。这是我基于实践写的bigape, 里面有更加详细的使用说明， 一个更加丰满的express框架，写的仓促，如有问题欢迎拍砖，同时欢迎 star 和贡献代码 (^__^)