nodejs實作bigpipe非同步載入頁面的方法-js教程-PHP中文網

nodejs實作bigpipe非同步載入頁面的方法

不言

發布： 2018-06-30 14:17:22

原創

1590 人瀏覽過

本文要跟大家分享的是使用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(&#39;express&#39;);
var path = require(&#39;path&#39;);
var http = require(&#39;http&#39;);
var ejs = require(&#39;ejs&#39;);
var app = express();

app.set(&#39;port&#39;, process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, &#39;public&#39;)));
app.engine(&#39;.html&#39;, ejs.__express);
app.set(&#39;view engine&#39;, &#39;html&#39;);
app.get(&#39;/index.html&#39;, function (req, res) {
  res.render(&#39;index&#39;, { 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(&#39;<script>bigpipe.set("&#39; + Pagelets + &#39;",&#39; + JSON.stringify(data) + &#39;);</script>&#39;);
    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>
<p id="test1">loading......</p>
<p id="test2">loading......</p>
<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(&#39;pagelet1&#39;,function(data){
    $("#test1").html("test1 ready");
  })
  bigpipe.ready(&#39;pagelet2&#39;,function(data){
    $("#test2").html("test2 ready");
  })
</script>
</body>
</html>

登入後複製

總結

Bigpipe技術其實具體實現需要伺服器的程式碼配合，在開發中我感覺功能佔20%，優化佔80%的工作量，優化的難度很多時候比開發還高。還需可能對全端的了解。所以現在nodejs作為前後端分離的中間層是一個我個人認為比較合理的一個解。如果前後端完成nodejs的中間層分離，Bigpipe技術的實作將會是前端可以獨立完成的一個最佳化。提高首屏載入時間。並且提高整個網頁的載入時間，對於瀏覽量的提升會帶來一定效果的。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！