资讯专栏INFORMATION COLUMN

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

adie / 1312人阅读

摘要:比如首页是一个静态页面,不依赖什么接口列表页涉及到价格日历,筛选,一些提示信息模块等,依赖不同的接口因为使用了,可以实现前后端模板共用。

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

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

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

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

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

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

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

...

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

采用BigPipe的优势就是

提高了首屏的展示速度

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

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

使用前:

使用后:

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82851.html

相关文章

  • 谈谈前端工程化 js加载

    摘要:当年的加载在没有前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。而且对于前后端的技术要求较高,所以对于项目未必是最有效的方案。 当年的 js 加载 在没有 前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。 那个时代我们没有公用的cdn,也没有什么特别好的方法来优化加载j...

    paulli3 评论0 收藏0
  • 为什么facebook主页加载这么快:BigPipe

    摘要:起源来源于公司解决主页面加载速度慢而提出的一项改进技术。流水线方式降低了页面整体的加载时间,而且,通过让一部分页面先显示,让用户感觉页面加载的更快了。将样式表放在顶部,一般放在中,主要作用是避免裸奔,恶化用户体验。 前言 本文是对《BigPipe学习研究》的总结。昨晚刷Quora,看到一个类似的问题,然后今早百度了下,发现了这篇非常细致的额文章,所以精简了下,对理解网页性能优化有很大帮...

    sunnyxd 评论0 收藏0
  • 为什么facebook主页加载这么快:BigPipe

    摘要:起源来源于公司解决主页面加载速度慢而提出的一项改进技术。流水线方式降低了页面整体的加载时间,而且,通过让一部分页面先显示,让用户感觉页面加载的更快了。将样式表放在顶部,一般放在中,主要作用是避免裸奔,恶化用户体验。 前言 本文是对《BigPipe学习研究》的总结。昨晚刷Quora,看到一个类似的问题,然后今早百度了下,发现了这篇非常细致的额文章,所以精简了下,对理解网页性能优化有很大帮...

    jas0n 评论0 收藏0
  • 链家网前端总架构师杨永林:我8年架构师成长之路

    摘要:杨永林,人称教主,八年前端开发经验,原新浪微博前端技术专家,现任链家网前端总架构师。年年底,教主加入链家网,负责前端的整体架构工作。 杨永林,人称教主,八年前端开发经验,原新浪微博前端技术专家,现任链家网前端总架构师。长期研究Web访问性能优化和前端框架搭建。作为初始团队成员,教主参与了新浪微博所有PC版本的开发,其中4~6版以架构师的身份设计了微博PC版的前端架构。在新浪微博任职期间...

    liaosilzu2007 评论0 收藏0
  • Node中间层实践(一)——基于NodeJS全栈式开发

    摘要:总结我觉得,以后基于的全栈式开发的模式将会越来越流行,这也会引领前端步入工程化时代。欢迎继续关注本博的更新中间层实践一基于的全栈式开发中间层实践二搭建项目框架中间层实践三配置中间层实践四模板引擎中间层实践五中间层的逻辑处理 版权声明:更多文章请访问我的个人站Keyon Y,转载请注明出处。 前言 近期公司有个新项目,由于后端人手不足,我果断的提议用node中间层的方案,得到了老大的支持...

    warkiz 评论0 收藏0

发表评论

0条评论

adie

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<