Dieser Artikel zeigt Ihnen eine Lösung zur Verwendung von NodeJS in Kombination mit Bigpipe zum asynchronen Laden von Seiten. Dies ist sehr praktisch und bietet auch eine Richtung für die zukünftige Optimierung der Front-End-Leistung.
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 zwischen BigPipe und AJAX
AJAX ist hauptsächlich XMLHttpRequest. Das Frontend fordert den Server asynchron auf, dynamische Daten abzurufen und sie 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 einfach das Bild unten an
NODEJS-Implementierung
js eingeführt von der Seite 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);
}
}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);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>
<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('pagelet1',function(data){
$("#test1").html("test1 ready");
})
bigpipe.ready('pagelet2',function(data){
$("#test2").html("test2 ready");
})
</script>
</body>
</html>Zusammenfassung
Tatsächlich erfordert die spezifische Implementierung der Bigpipe-Technologie die Mitarbeit des Servercodes. Während der Entwicklung sind meiner Meinung nach 20 % der Funktionen und 80 % die Optimierung erforderlich Der Arbeitsaufwand ist oft schwieriger als die Entwicklung. 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 voneinander 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.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Einführung in Node.js, das eine Verbindung zu PostgreSQL herstellt und Datenoperationen durchführt
nodejs verwendet Ztree, um zwischen zwei Divs zu wechseln
Das obige ist der detaillierte Inhalt vonWie nodejs Bigpipe zum asynchronen Laden von Seiten implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
