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中的fiber(纤程)库详解
Mar 24 NodeJs
nodejs中实现阻塞实例
Mar 24 NodeJs
nodejs 的 session 简单使用
Jun 06 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
详解nodejs 文本操作模块-fs模块(二)
Dec 22 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
nodejs入门教程一:概念与用法简介
Apr 24 NodeJs
Nodejs--post的公式详解
Apr 29 NodeJs
使用nodejs+express实现简单的文件上传功能
Dec 27 NodeJs
NodeJS父进程与子进程资源共享原理与实现方法
Mar 16 NodeJs
nodejs中用npm初始化来创建package.json的实例讲解
Oct 10 NodeJs
Nodejs 微信小程序消息推送的实现
Jan 20 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
Vue表单实例代码
2016/09/05 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python发送邮件功能实现代码
2016/07/15 Python
python线程、进程和协程详解
2016/07/19 Python
快速入门python学习笔记
2017/12/06 Python
Python制作动态字符图的实例
2019/01/27 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
python中K-means算法基础知识点
2021/01/25 Python
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
数据库测试通常都包括哪些方面
2015/11/30 面试题
普通员工辞职信
2014/01/17 职场文书
收银员岗位职责范本
2015/04/07 职场文书
推广普通话主题班会
2015/08/17 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫