脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → nodejs实现bigpipe异步加载页面方案

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

 更新时间：2016年01月26日 09:21:16   投稿：hebedich  
本文给大家分享的是使用nodejs结合bigpipe实现异步加载页面的方案，非常的实用，也是以后前端性能优化的一个方向，希望大家能够喜欢。

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技术的实现将会是前端可以独立完成的一个优化。提高首屏加载时间。并且提高整个网页的加载时间，对于浏览量的提升会带来一定效果的。

您可能感兴趣的文章:

相关文章

  • 快速搭建Node.js(Express)用户注册、登录以及授权的方法

    快速搭建Node.js(Express)用户注册、登录以及授权的方法

    这篇文章主要介绍了快速搭建Node.js(Express)用户注册、登录以及授权，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Node.js API详解之 timer模块用法实例分析

    Node.js API详解之 timer模块用法实例分析

    这篇文章主要介绍了Node.js API详解之 timer模块用法,结合实例形式分析了Node.js API中timer模块基本功能、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-05-05
  • Node.js全局可用变量、函数和对象示例详解

    Node.js全局可用变量、函数和对象示例详解

    JavaScript中有一个特殊的对象,称为全局对象(Global Object),它及其所有属性都可以在程序的任何地方访问,即全局变量,下面这篇文章主要给大家介绍了关于Node.js全局可用变量、函数和对象的相关资料,需要的朋友可以参考下
    2023-03-03
  • Node.js安装及npm国内镜像配置的方法实现

    Node.js安装及npm国内镜像配置的方法实现

    本文主要介绍了Node.js安装及npm国内镜像配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 将node安装到其他盘的超详细步骤与说明

    将node安装到其他盘的超详细步骤与说明

    基本现在很多主流的前端框架都用了node.js 但是node装起来确实头疼,下面这篇文章主要给大家介绍了关于如何将node安装到其他盘的超详细步骤与说明,需要的朋友可以参考下
    2023-06-06
  • nodejs更改项目端口号的方法

    nodejs更改项目端口号的方法

    今天小编就为大家分享一篇nodejs更改项目端口号的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • 详解node Async/Await 更好的异步编程解决方案

    详解node Async/Await 更好的异步编程解决方案

    这篇文章主要介绍了详解Async/Await 更好的异步编程解决方案,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 充分发挥Node.js程序性能的一些方法介绍

    充分发挥Node.js程序性能的一些方法介绍

    这篇文章主要介绍了充分发挥Node.js程序性能的一些方法介绍,Node.js是把JavaScript用于服务器端的框架,需要的朋友可以参考下
    2015-06-06
  • Node.js获取本机Mac地址的两种方案

    Node.js获取本机Mac地址的两种方案

    有时候我们的项目中可能会有日志记录的功能或者其他需要ip的功能,于是这时我们需要获取用户的ip地址或mac地址,下面这篇文章主要给大家介绍了关于Node.js获取本机Mac地址的两种方案,需要的朋友可以参考下
    2022-09-09
  • 全面解析node 表单的图片上传

    全面解析node 表单的图片上传

    本文给大家介绍分享node全面解析表单的图片上传，本文给大家介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-11-11

最新评论