快捷導(dǎo)航

nodejs實(shí)現(xiàn)bigpipe異步加載頁(yè)面方案

更新時(shí)間：2016年01月26日 09:21:16 投稿：hebedich

本文給大家分享的是使用nodejs結(jié)合bigpipe實(shí)現(xiàn)異步加載頁(yè)面的方案，非常的實(shí)用，也是以后前端性能優(yōu)化的一個(gè)方向，希望大家能夠喜歡。

Bigpipe介紹

Facebook首創(chuàng)的一種減少HTTP請(qǐng)求的，首屏快速加載的的異步加載頁(yè)面方案。是前端性能優(yōu)化的一個(gè)方向。

BigPipe與AJAX的比較

AJAX主要是XMLHttpRequest，前端異步的向服務(wù)器請(qǐng)求，獲取動(dòng)態(tài)數(shù)據(jù)添加到網(wǎng)頁(yè)上。這樣的往返請(qǐng)求需要耗費(fèi)時(shí)間，而BigPipe技術(shù)并不需要發(fā)送XMLHttpRequest請(qǐng)求，這樣就節(jié)省時(shí)間損耗。減少請(qǐng)求帶來(lái)的另一個(gè)好處就是直接減少服務(wù)器負(fù)載。還有一個(gè)不同點(diǎn)就是AJAX請(qǐng)求前服務(wù)器在等待。請(qǐng)求后頁(yè)面在等待。BIGPIPE可以前后端并行工作也帶來(lái)了效率上的提升。

Bigpipe缺點(diǎn)

SEO問(wèn)題。Facebook的動(dòng)態(tài)展現(xiàn)內(nèi)容主要是面向客戶的個(gè)性頁(yè)面。對(duì)于SEO的要求并不高。而如果把BIGPIPE技術(shù)用到淘寶上的話SEO的問(wèn)題就會(huì)明顯了，現(xiàn)在不確定百度對(duì)于這種動(dòng)態(tài)頁(yè)面的搜索支持度如何，其實(shí)在使用ANGULARJS動(dòng)態(tài)綁定數(shù)據(jù)的時(shí)候也會(huì)有這方面的問(wèn)題所以對(duì)于SEO有需求的頁(yè)面需要慎重考慮是否使用BIGPIPE技術(shù)。（已知GOOGLE搜索對(duì)于ANGULAR的SEO有優(yōu)化。）至于百度么-。-看下圖就知道了

NODEJS實(shí)現(xiàn)

bigpipe.js頁(yè)面引入的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服務(wù)器代碼

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: "測(cè)試" }, 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  rel="stylesheet">
</head>
<body>
<div id="test1">loading......</div>
<div id="test2">loading......</div>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://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>

總結(jié)

Bigpipe技術(shù)其實(shí)具體實(shí)現(xiàn)需要服務(wù)器的代碼配合，在開發(fā)中我感覺功能占20%，優(yōu)化占80%的工作量，優(yōu)化的難度很多時(shí)候比開發(fā)還高。還需可能對(duì)全棧的了解。所以現(xiàn)在nodejs作為前后端分離的中間層是一個(gè)我個(gè)人認(rèn)為比較合理的一個(gè)解決方案。如果前后端完成nodejs的中間層分離，Bigpipe技術(shù)的實(shí)現(xiàn)將會(huì)是前端可以獨(dú)立完成的一個(gè)優(yōu)化。提高首屏加載時(shí)間。并且提高整個(gè)網(wǎng)頁(yè)的加載時(shí)間，對(duì)于瀏覽量的提升會(huì)帶來(lái)一定效果的。

您可能感興趣的文章: