Nodejs implementiert die asynchrone Bigpipe-Ladeseite „solution

Nodejs implementiert die asynchrone Bigpipe-Ladeseite „solution_node.js'.

WBOY

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

Original

1193 Leute haben es durchsucht

Einführung in Bigpipe

Facebooks erste Lösung zum asynchronen Laden von Seiten, die HTTP-Anfragen reduziert und den ersten Bildschirm schnell lädt. Es ist eine Richtung zur Optimierung der Front-End-Leistung.

Vergleich von BigPipe und AJAX

AJAX ist hauptsächlich XMLHttpRequest. Das Frontend fordert den Server asynchron auf, dynamische Daten abzurufen und diese der Webseite hinzuzufügen. Solche Roundtrip-Anfragen brauchen Zeit, und die BigPipe-Technologie muss keine XMLHttpRequest-Anfragen senden, was Zeit spart. Ein weiterer Vorteil der Reduzierung von Anfragen ist eine direkte Reduzierung der Serverlast. Ein weiterer Unterschied besteht darin, dass der Server vor der AJAX-Anfrage wartet. Seite wartet auf Anfrage. BIGPIPE kann am Front- und Backend parallel arbeiten, was ebenfalls Effizienzsteigerungen mit sich bringt.

Nachteile von Bigpipe

SEO-Probleme. Bei den dynamischen Anzeigeinhalten von Facebook handelt es sich hauptsächlich um kundenorientierte personalisierte Seiten. Die Anforderungen an SEO sind nicht hoch. Und wenn die BIGPIPE-Technologie auf Taobao verwendet wird, sind die SEO-Probleme offensichtlich. Ich bin mir nicht sicher, wie gut Baidu die Suche nach dieser Art von dynamischen Seiten unterstützt. Tatsächlich wird es dieses Problem auch geben, wenn ANGULARJS zum dynamischen Binden von Daten verwendet wird , Seiten mit SEO-Anforderungen müssen sorgfältig abwägen, ob sie die BIGPIPE-Technologie verwenden. (Es ist bekannt, dass die GOOGLE-Suche für die SEO von ANGULAR optimiert ist.) Was Baidu betrifft: -Schauen Sie sich das Bild unten an, um es herauszufinden

NODEJS-Implementierung

js von der bigpipe.js-Seite importiert

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

Nach dem Login kopieren

app.js-Servercode

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

Nach dem Login kopieren

index.html-Frontend-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>

Nach dem Login kopieren

Zusammenfassung

Tatsächlich erfordert die spezifische Implementierung der Bigpipe-Technologie die Mitarbeit des Servercodes. Während der Entwicklung sind meiner Meinung nach 20 % und 80 % der Arbeitslast auf die Optimierung zurückzuführen. Ein mögliches Verständnis des gesamten Stacks ist ebenfalls erforderlich. Daher ist Nodejs als mittlere Schicht, die das Front- und Back-End trennt, eine Lösung, die ich persönlich für sinnvoller halte. Wenn das Front-End und das Back-End die mittlere Schichttrennung von NodeJS abschließen, ist die Implementierung der Bigpipe-Technologie eine Optimierung, die das Front-End unabhängig durchführen kann. Verbessern Sie die Ladezeit des ersten Bildschirms. Und die Verbesserung der Ladezeit der gesamten Webseite wird einen gewissen Effekt auf die Erhöhung der Anzahl der Aufrufe haben.