Nodejs implements bigpipe asynchronous loading page solution

Nodejs implements bigpipe asynchronous loading page solution_node.js

WBOY

Release： 2016-05-16 15:18:11

Original

1192 people have browsed it

Introduction to Bigpipe

Facebook's first asynchronous loading page solution that reduces HTTP requests and quickly loads the first screen. It is a direction for front-end performance optimization.

Comparison of BigPipe and AJAX

AJAX is mainly XMLHttpRequest. The front end asynchronously requests the server to obtain dynamic data and add it to the web page. Such round-trip requests take time, and BigPipe technology does not need to send XMLHttpRequest requests, thus saving time. Another benefit of reducing requests is a direct reduction in server load. Another difference is that the server waits before the AJAX request. Page is waiting after request. BIGPIPE can work in parallel on the front and back ends, which also brings efficiency improvements.

Disadvantages of Bigpipe

SEO issues. Facebook's dynamic display content is mainly customer-oriented personalized pages. The requirements for SEO are not high. And if BIGPIPE technology is used on Taobao, SEO problems will be obvious. I am not sure how well Baidu supports the search for this kind of dynamic page. In fact, there will also be this problem when using ANGULARJS to dynamically bind data. Therefore, pages with SEO needs need to carefully consider whether to use BIGPIPE technology. (It is known that GOOGLE search is optimized for ANGULAR's SEO.) As for Baidu -. -Look at the picture below to find out

NODEJS implementation

js imported from bigpipe.js page

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);
  }
}

Copy after login

app.js server code

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);

Copy after login

index.html front-end code

<!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>

Copy after login

Summary

In fact, the specific implementation of Bigpipe technology requires the cooperation of server code. During development, I feel that functions account for 20% and optimization accounts for 80% of the workload. Optimization is often more difficult than development. A possible understanding of the full stack is also required. So now nodejs as the middle layer that separates the front and back ends is a solution that I personally think is more reasonable. If the front-end and back-end complete the middle layer separation of nodejs, the implementation of Bigpipe technology will be an optimization that the front-end can complete independently. Improve first screen loading time. And improving the loading time of the entire web page will have a certain effect on increasing the number of views.