bigpipe性能优化

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载

背景

当前网速越来越快,但是随着网页内容越来越丰富,其实我们打开网页的速度并未得到什么提升,相反,过多的内容会导致网页打开速度变慢。于是,出现了一些性能优化的方法。 1.合并文件,如css,js等 2.将js文件放在文档的底部 3.将服务器部署到离用户近的地方,如cdn技术 4.缓存技术 5.负载均衡 6.文档直出 等等

有这么多通用的方式能够适用于我们的产品中,每一种实现的技术难度不大,当我们都应用了这些技术,发现网站性能依然不那么乐观的时候,会考虑到一些非常规、适用于某些特定场景的优化技术

另一种思路

Facebook的研究科学家changhao jiang提出了一个优化方案,名字叫做bigpipe,应用了此项技术的facebook首页,访问速度提升一倍。它极大的提升了fackebook的性能。它是怎么做到的。

传统的一个打开页面的步骤

  1. 浏览器发送HTTP请求
  2. 服务器接收到HTTP请求,解析请求,从存储层拉取数据,拼接HTML,发回一个HTTP响应
  3. 这个请求通过网络传输到浏览器
  4. 浏览器解析接收到的数据,构造DOM树,下载CSS和JavaScript
  5. 浏览器下载了CSS之后,开始解析CSS,渲染页面
  6. 下载JavaScript之后,开始解析JavaScript,执行JavaScript

Bigpipe的思路

  1. Request parsing:服务器解析和检查http request
  2. Datafetching:服务器从存储层获取数据
  3. Markup generation:服务器生成html 标记
  4. Network transport : 网络传输response
  5. CSS downloading:浏览器下载CSS
  6. DOM tree construction and CSS styling:浏览器生成DOM 树,并且使用CSS
  7. JavaScript downloading: 浏览器下载页面引用的JS 文件
  8. JavaScript execution: 浏览器执行页面JS代码

看着bigpipe的步骤和普通的方式没什么区别,其实,它只是其中一个模块(pagelet)的流程而已。而一个页面是可以分解成N个模块,多个模块以流水线式的方式运行

demo

一个node实现的demo,实现基本的分块的思想 模拟服务器部分

http.createServer(function(request, response) {
    // Write the document response.writeHead(200, {"Content-Type" : "text/html"});
    response.write('<!DOCTYPE html>');
    response.write('<head><script type="text/javascript">function arrived(id,text) { var b=document.getElementById(id); b = text; }</script>');
    response.write("</head><body><div>Progressive Loading");
    for(var i = 0; i < 6; i++) {
        response.write("<div id='" + i + "'>" + i + "</div>");
    }
    response.write("</div>");

    var down = 6;
    for (i = 0; i < 6; i++) {
        http.get("http://localhost:2000/?id=" + i, function(res) {
            res.on('data', function(chunk) {
                response.write(chunk, 'binary');
            });

            res.on('end', function() {
                console.log("down"+down)
                if((--down )== 0) {
                    response.end();
                }
            })
        });
    }
    response.write("</body></html>");

}).listen(8080);

模拟请求的代码:

http.createServer(function(request, response) {
    // Some delay upto upto 2 seconds
    var delay = Math.round(Math.random() * 2000);

    setTimeout(function() {
        var params = url.parse(request.url, true);
        var id = params.query.id;
        response.writeHead(200, {"Content-Type" : "text/html"});
        var content = "<span>Content of Module " + id + "</span>";
        response.write("<script>" +
            "arrived('" + id + "', '" + content + "');" +
             "</script>");
        response.end();
    }, delay);
}).listen(2000);

一个框架

https://github.com/bigpipe/bigpipe

BigPipe is a radical new web framework for Node.JS. The general idea is to decompose web pages into small re-usable chunks of functionality called Pagelets and pipeline them through several execution stages inside web servers and browsers. This allows progressive rendering at the front-end and results in exceptional front-end performance.

框架会有些重,小型开发场景下可以考虑自己实现

存在的问题

1.seo 设置useagent,爬虫来的时候给完整页面(有淘宝同学说这里存在seo问题,是否有seo问题还待确认,因为本身页面是在一个请求内完成)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序之家

如何入门小程序开发

在上一篇教程中,我们教大家使用微信官方Demo快速搭建了一个小相册,并学会了如何安装开发者工具,如何创建小程序,如何做服务端配置。并利用腾讯云COS实现相册上传...

9.7K80
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native升级指南|v0.40+升级适配经验与心得

React Native作为一个有上千开发者参与的开源项目,自从2015年3月27日第一版发布以来到现在已经有147次版本发布了,平均起来几乎每周都会有新的版本...

40880
来自专栏QQ音乐技术团队的专栏

【QQ音乐web团队】:ReactJS 服务端同构实践

最近在项目中接入了 ReactJS 并在服务端做了同构直出。关于 ReactJS 服务端同构业界已经有不少分享,这篇文章会主要注重实践的内容,把实现细节和遇到的...

36570
来自专栏腾讯开源的专栏

【开源公告】高性能的图片框架 LKImageKit 正式开源

LKImageKit LKImageKit 是一个高性能的图片框架,包括了图片控件,图片下载、内存缓存、磁盘缓存、图片解码、图片处理等一系列能力。合理的架构和...

40040
来自专栏Python爬虫与算法进阶

如何在电脑上多开微信?(windows)

新媒体管家 在电脑上多开微信,在工作中很常见,今天来介绍一种简单的方法。(windows下) 这个问题在百度和知乎上都有许多回答,很多都是:长按Enter 电脑...

46480
来自专栏微信小程序开发

微信小程序开发常见问题(四)

知晓程序员,专注微信小程序开发的程序员! 一、小程序不同页面之间的传值方式 a、URL传值 这种方式最常用,比如: wx.navigateTo({ url...

43550
来自专栏腾讯大讲堂的专栏

ReactJS 服务端同构实践【QQ音乐web团队】

作者:calvin 腾讯 QQ音乐 数字音乐部 工程师 最近在项目中接入了 ReactJS 并在服务端做了同构直出。关于 ReactJS 服务端同构业界已经有...

27150
来自专栏葡萄城控件技术团队

JavaScript 性能优化技巧分享

18260
来自专栏阿炬.NET

jQuery EasyUI 1.3.2 离线API、Demo

31850
来自专栏web前端教室

先行者计划群视频 每周一课 -- 什么是前端组件?(文字简版)

image.png 在今天同学们发我的作业中,我给一个同学回复说,你这不是组件化,只是一个效果的实现。他问我,那还要什么呢?我不是特别理解。 今天咱们先聊一下,...

210100

扫码关注云+社区

领取腾讯云代金券