Comment nodejs implémente le chargement asynchrone des pages bigpipe-js tutoriel-php.cn

Comment nodejs implémente le chargement asynchrone des pages bigpipe

不言

Libérer： 2018-06-30 14:17:22

original

1590 Les gens l'ont consulté

Cet article partage avec vous une solution pour utiliser nodejs combiné avec bigpipe pour charger des pages de manière asynchrone et constitue également une orientation pour l'optimisation future des performances front-end.

Présentation de 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 entre BigPipe et AJAX

AJAX est principalement XMLHttpRequest Le front-end demande au serveur de manière asynchrone 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 de 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 connaître

Implémentation de NODEJS

js introduit par 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(&#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);

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

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 serveur Lors du développement, j'ai l'impression que les fonctions comptent pour 20%. , et l'optimisation représente 80 % de la charge de travail. Optimisation La difficulté est souvent plus élevée 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode de lecture et d'écriture des fichiers et répertoires système de node.js basée sur le module fs

Introduction à Node.js se connectant à postgreSQL et effectuant des opérations sur les données

nodejs utilise ztree pour se déplacer entre deux divs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!