8

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

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

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

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

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

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

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

  5. ...

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

采用BigPipe的优势就是

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

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

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

使用前:
WX20170505-113742@2x.png

使用后:
WX20170505-113718@2x.png

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


norfish
417 声望3 粉丝

一个不安分的前端工程师