nodejs实现bigpipe异步加载页面方案


Posted in NodeJs onJanuary 26, 2016

Bigpipe介绍

Facebook首创的一种减少HTTP请求的,首屏快速加载的的异步加载页面方案。是前端性能优化的一个方向。

BigPipe与AJAX的比较

AJAX主要是XMLHttpRequest,前端异步的向服务器请求,获取动态数据添加到网页上。这样的往返请求需要耗费时间,而BigPipe技术并不需要发送XMLHttpRequest请求,这样就节省时间损耗。减少请求带来的另一个好处就是直接减少服务器负载。还有一个不同点就是AJAX请求前服务器在等待。请求后页面在等待。BIGPIPE可以前后端并行工作也带来了效率上的提升。

Bigpipe缺点

SEO问题。Facebook的动态展现内容主要是面向客户的个性页面。对于SEO的要求并不高。而如果把BIGPIPE技术用到淘宝上的话SEO的问题就会明显了,现在不确定百度对于这种动态页面的搜索支持度如何,其实在使用ANGULARJS动态绑定数据的时候也会有这方面的问题所以对于SEO有需求的页面需要慎重考虑是否使用BIGPIPE技术。(已知GOOGLE搜索对于ANGULAR的SEO有优化。)至于百度么-。-看下图就知道了

NODEJS实现

bigpipe.js页面引入的js

var Bigpipe=function(){
  this.callbacks={};
}

Bigpipe.prototype.ready=function(key,callback){
  if(!this.callbacks[key]){
    this.callbacks[key]=[];
  }
  this.callbacks[key].push(callback);
}

Bigpipe.prototype.set=function(key,data){
  var callbacks=this.callbacks[key]||[];
  for(var i=0;i<callbacks.length;i++){
    callbacks[i].call(this,data);
  }
}

app.js服务器代码

var express = require('express');
var path = require('path');
var http = require('http');
var ejs = require('ejs');
var app = express();

app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.get('/index.html', function (req, res) {
  res.render('index', { title: "测试" }, function (err, str) {
    res.write(str)
  })
  var Pagelets_list ={
    pagelet1:false,
    pagelet2:false
  }
  var data = {is: "true"};
  function is_end(Pagelets) {
    Pagelets_list[Pagelets]=true;
    for (x in Pagelets_list) {
      if(!Pagelets_list[x]){
        return;
      }
    }
    res.end();
    return;
  }

  function Pagelets(Pagelets) {
    res.write('<script>bigpipe.set("' + Pagelets + '",' + JSON.stringify(data) + ');</script>');
    is_end(Pagelets)
  }
  setTimeout(function(){Pagelets("pagelet1");},1000);
  setTimeout(function(){Pagelets("pagelet2");},3000);
});

http.createServer(app).listen(3000);

index.html前端代码

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>zchq88-bigpipe</title>
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="test1">loading......</div>
<div id="test2">loading......</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script src="/js/bigpipe.js"></script>
<script>
  var bigpipe=new Bigpipe();
  bigpipe.ready('pagelet1',function(data){
    $("#test1").html("test1 ready");
  })
  bigpipe.ready('pagelet2',function(data){
    $("#test2").html("test2 ready");
  })
</script>
</body>
</html>

总结

Bigpipe技术其实具体实现需要服务器的代码配合,在开发中我感觉功能占20%,优化占80%的工作量,优化的难度很多时候比开发还高。还需可能对全栈的了解。所以现在nodejs作为前后端分离的中间层是一个我个人认为比较合理的一个解决方案。如果前后端完成nodejs的中间层分离,Bigpipe技术的实现将会是前端可以独立完成的一个优化。提高首屏加载时间。并且提高整个网页的加载时间,对于浏览量的提升会带来一定效果的。

NodeJs 相关文章推荐
基于NodeJS的前后端分离的思考与实践(五)多终端适配
Sep 26 NodeJs
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
Dec 18 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
NodeJs的fs读写删除移动监听
Apr 28 NodeJs
NodeJS创建最简单的HTTP服务器
May 15 NodeJs
nodejs微信扫码支付功能实现
Feb 17 NodeJs
NodeJS服务器实现gzip压缩的示例代码
Oct 12 NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 NodeJs
通过Nodejs搭建网站简单实现注册登录流程
Jun 14 NodeJs
5分钟教你用nodeJS手写一个mock数据服务器的方法
Sep 10 NodeJs
Nodejs在局域网配置https访问的实现方法
Oct 17 NodeJs
Nodejs 数组的队列以及forEach的应用详解
Feb 25 NodeJs
NodeJS实现阿里大鱼短信通知发送
Jan 17 #NodeJs
实例详解Nodejs 保存 payload 发送过来的文件
Jan 14 #NodeJs
Nodejs express框架一个工程中同时使用ejs模版和jade模版
Dec 28 #NodeJs
深入浅析NodeJs并发异步的回调处理
Dec 21 #NodeJs
基于nodejs+express(4.x+)实现文件上传功能
Nov 23 #NodeJs
Nodejs Express4.x开发框架随手笔记
Nov 23 #NodeJs
Nodejs的express使用教程
Nov 23 #NodeJs
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
django用户登录和注销的实现方法
2018/07/16 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
车间核算员岗位职责
2014/07/01 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
2019年大学推荐信
2019/06/24 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
Golang 结构体数据集合
2022/04/22 Golang
python神经网络ResNet50模型
2022/05/06 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技