前端页面优化之bigpipe

bigpipe是facebook提出的一种优化页面加载速度的解决方案,原理大概是先加载页面的整个框架,不需要数据的一部分,然后把需要数据的部分分成多个pagelet，后台不断的传递数据到前端来,一步步的render页面.

下面我们来说说怎么来实现这种方案,后端以nodejs来实现

因为nodejs是异步非阻塞的,实现这种方案非常有优势.假如是php的话则有难度,因为它是同步阻塞的,一次请求内不允许异步出现，除非自定义扩展.

利用Nodejs来实现bigpipe

首先nodejs需要express,async第三方模块,我们先来初始化package.json文件,然后安装依赖

npm init npm install express --save npm install async --save

然后我们来实现这些东西

1.建立一个web服务器 2.创建用于前端bigpipe效果的静态页 3.定义两个静态文件用于数据源 4.定义前端模拟的一个bigpipe请求
server.use(/bigpipe, express.static(__dirname + /static)); server.use(/lib, express.static(__dirname + /bower_components)); server.listen(4000, function(){ console.log(server is listen on port 4000......);

上面的/bigpipe目录是用来前端页面内资源加载的路径,/lig是用来加载第三方前端库,这个下面会说到

最后打开监听4000端口

建立一个前端请求的页面为bigpipe.html

 !doctype html 

 html 

 head 

 title bigpipe /title 

 meta charset="utf8" 

 link rel="stylesheet" href="/bigpipe/css/base.css" 

 /head 

 body 

 div 

 h1 this is bigpipe demo /h1 

 div id="body1" 

 !-- 此处数据异步加载 -- 

 /div 

 div id="body2" 

 !-- 此处数据异步加载 -- 

 /div 

 footer 

 by feenan

 /footer 

 /div 

 !-- 模板1 -- 

 script type="text/template" id="fileinfo1" 

 %= info% 

 /script 

 !-- 模板2 -- 

 script type="text/template" id="fileinfo2" 

 %= info% 

 /script 

 script src="/lib/jquery/dist/jquery.min.js" /script 

 script src="/lib/underscore/underscore.js" /script 

 script src="/bigpipe/js/bigpipe.js" /script 

 /body 

 /html 

 script 

 var bigpipe = new Bigpipe();

 bigpipe.ready(users, function(data){

 // console.log(data);

 var template = _.template($(#fileinfo1).html());

 $(#body1).html(template({info: data})); 

 bigpipe.ready(info, function(data){

 console.log(data);

 var template = _.template($(#fileinfo2).html());

 $(#body2).html(template({info: data})); 

 /script 

上面的第三方前端库,可以利用bower来安装

bower init bower install jquery --save bower install underscore --save

在根目录下建立static目录,然后分别建立js,css文件夹,这个static为前端资源文件夹

然后在js文件夹里建立bigpipe.js文件,这个主要是用来在前端定义事件,有两方法ready,set,ready主要是前端用来注册事件,set是用来后端触发事件

var Bigpipe = function(){

 this.callbacks = {};

Bigpipe.prototype.ready = function(key, callback){

 this.callbacks[key] = this.callbacks[key] || [];

 this.callbacks[key].push(callback);

Bigpipe.prototype.set = function(key, data){

 console.log(key, data);

 var callbacks = this.callbacks[key] || [];

 for (var i = callbacks.length - 1; i = 0; i--) {

 callbacks[i].call(this, data);

建立一个请求来模拟bigpipe,代码写在app.js里

server.get(/info, function(req, res, next){

 var content = fs.readFileSync(__dirname + /bigpipe.html, utf8);

 res.writeHead(200, {Content-Type: text/html});

 res.write(content);

 // 下面开始加载文件内容

 // 开始并行加载多个文件

 async.parallel([function(callback){

 fs.readFile(__dirname + /data/users.txt, utf8, function(err, data){

 data = data.replace(/\n/g, \\n);

 res.write( script bigpipe.set("users","+ data +"); /script );

 callback(err, data);

 },function(callback){

 fs.readFile(__dirname + /data/info.txt, utf8, function(err, data){

 data = data.replace(/\n/g, \\n);

 console.log(data);

 res.write( script bigpipe.set("info"," + data + "); /script );

 callback(err, data);

 }],function(err, result){

 // if(err) res.end();

 res.end();

上面的/info代表客户端的一个请求,里面先读取bigpipe.html文件就是上面定义的,然后先输出到浏览器,但是此时这个连接没有关闭,后面接着异步请求两个文件分别来用render页面内的两个需要数据填充的部分

async.parallel是用来并行执行方法的,上面的例子里只要有一个方法成功就输出到页面，都成功则结束此次请求调用res.end(),注意这里输出的脚本内容,bigpipe.set,这里就会触发前端页面内注册的相关事件,最后把数据render到页面内.

因为nodejs天生的异步非阻塞的特点，所以利用bigpipe方式可以有效的解决页面初始化空白的问题,而且哪怕页面内有多个数据加载的部分也可以有效的解决.

bigpipe能够有效的解决重数据页面的加载问题,这个比ajax异步加载的好处就是利用一个http连接就能解决多数据加载的问题,相比一个连接一个ajax的方式明显能提高不少服务器端性能.

前端跨域请求方案整理 跨域请求，是前端开发比较常见的问题。通常为了提高的开发效率，项目开发过程中进行前后端分离，各自独立部署，就可能会出现前后端域名不一致，在通讯过程中就会出现跨域的问题。由于项目开发过程中涉及，借此机会对跨域问题进行整理，也是前端面试比较常见的问题。
闲鱼 Weex 页面优化过程详解 闲鱼前端页面的性能常常被人念叨，**凡跳转、必跳鱼 **的印象深入人心，部分页面甚至需要跳四五下才能打开，最近我们对闲鱼前端页面系统性的做了些优化，由于闲鱼前端技术栈相对多元，不同栈技术原理各不相同，优化方案也有所差异，本文主要介绍目前闲鱼占比较重的 Weex 页面的优化过程。
页面优化的方法SEO包括哪些内容 页面搜索引擎优化技术将提升你的排名 在页面上SEO是你可以使用的最重要的过程之一，不仅是为了获得更高的排名，而且是为了运行成功的SEO活动。 网站是所有SEO流程的焦点，如果它没有针对搜索引擎和用户进行适当优化，那么您的成功几率就会降到最低。