运用BigPipe优化页面的加载速率实践

提及网页速率优化,想必人人都能说上几句,最着名的莫过于雅虎的23条了。这里有一系列的小建媾和优化战略,然则治病也得看病症,对症下药才是症结。

比方淘宝卖家中间首页速率优化的这个场景,就是一个很凸起的例子。文章里针对首页展现优化战略做个一个周全的对照,这里我就不多逼逼了,关于BigPipe这类分块传输的道理,这里也有很好的申明,也没必要多说。

在我现实的工作中,也碰到如许的场景,虽然没有上述的这么显著,然则却也有着更庞杂的场景。

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

  2. 列表页涉及到价钱日历,挑选,一些提醒信息模块等,依靠差别的接口

  3. 由于运用了node,能够完成前后端模板共用。一样也能够完成是html片断是前端拼接照样node层拼接,前端拼接的优点是模板能够缓存,传输数据的数据量相对少一些。node层拼接的优点是减少了前端的运算量,拼接好的html片断能够在服务端缓存

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

针对这些,在实践中我基于express做了一层包装,能够圆满支撑以上种种场景,固然更高兴的运用 bigPipe 是个中很主要的目标.

采纳BigPipe的上风就是

  1. 提高了首屏的展现速率

  2. 单页面有多接口多模块的时刻,能够在一个长衔接中经由过程chunk的体式格局分批返回,减少了http要求的压力

  3. 前后端模板公用,同时能够完成服务端衬着,对搜索引擎越发友爱

运用前:
《运用BigPipe优化页面的加载速率实践》

运用后:
《运用BigPipe优化页面的加载速率实践》

妈的,怎样觉得像卖药的。这是我基于实践写的bigape, 内里有越发细致的运用申明, 一个越发饱满的express框架,写的急急,若有题目迎接拍砖,同时迎接 star 和孝敬代码 (^__^)

    原文作者:norfish
    原文地址: https://segmentfault.com/a/1190000009305101
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞