Nodejs implémente la page de chargement asynchrone bigpipe solution

Nodejs implémente la page de chargement asynchrone bigpipe solution_node.js

WBOY

Libérer： 2016-05-16 15:18:11

original

1160 Les gens l'ont consulté

Introduction au Bigpipe

La première solution de chargement de page asynchrone de Facebook qui réduit les requêtes HTTP et charge rapidement le premier écran. Il s'agit d'une direction pour l'optimisation des performances frontales.

Comparaison de BigPipe et AJAX

AJAX est principalement XMLHttpRequest. Le front-end demande de manière asynchrone au serveur d'obtenir des données dynamiques et de les ajouter à la page Web. De telles requêtes aller-retour prennent du temps et la technologie BigPipe n'a pas besoin d'envoyer des requêtes XMLHttpRequest, ce qui permet de gagner du temps. Un autre avantage de la réduction des requêtes est une réduction directe de la charge du serveur. Une autre différence est que le serveur attend avant la requête AJAX. La page est en attente après la demande. BIGPIPE peut fonctionner en parallèle sur les front-ends et back-ends, ce qui apporte également des améliorations d'efficacité.

Inconvénients du Bigpipe

Problèmes de référencement. Le contenu d'affichage dynamique de Facebook est principalement constitué de pages personnalisées orientées client. Les exigences en matière de référencement ne sont pas élevées. Et si la technologie BIGPIPE est utilisée sur Taobao, les problèmes de référencement seront évidents. Je ne sais pas dans quelle mesure Baidu prend en charge la recherche de ce type de page dynamique. En fait, il y aura également ce problème lors de l'utilisation d'ANGULARJS pour lier dynamiquement des données. , les pages ayant des besoins en matière de référencement doivent soigneusement réfléchir à l'opportunité d'utiliser la technologie BIGPIPE. (On sait que la recherche GOOGLE est optimisée pour le référencement d'ANGULAR.) Quant à Baidu -. -Regardez l'image ci-dessous pour le découvrir

Implémentation de NODEJS

js importé de la page bigpipe.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);
  }
}

Copier après la connexion

code du serveur 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);

Copier après la connexion

code frontal 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>

Copier après la connexion

Résumé

En fait, la mise en œuvre spécifique de la technologie Bigpipe nécessite la coopération du code du serveur. Lors du développement, j'ai l'impression que les fonctions représentent 20 % et l'optimisation 80 % de la charge de travail. L'optimisation est souvent plus difficile que le développement. Une éventuelle compréhension de la pile complète est également requise. Alors maintenant, nodejs en tant que couche intermédiaire qui sépare les extrémités avant et arrière est une solution que je pense personnellement plus raisonnable. Si le front-end et le back-end complètent la séparation de la couche intermédiaire de nodejs, la mise en œuvre de la technologie Bigpipe sera une optimisation que le front-end pourra réaliser indépendamment. Améliorez le temps de chargement du premier écran. Et l'amélioration du temps de chargement de l'ensemble de la page Web aura un certain effet sur l'augmentation du nombre de vues.