Wie nodejs Bigpipe zum asynchronen Laden von Seiten implementiert
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Ist NodeJS ein Backend-Framework?
Apr 21, 2024 am 05:09 AM
Node.js kann als Backend-Framework verwendet werden, da es Funktionen wie hohe Leistung, Skalierbarkeit, plattformübergreifende Unterstützung, ein umfangreiches Ökosystem und einfache Entwicklung bietet.
So verbinden Sie NodeJS mit der MySQL-Datenbank
Apr 21, 2024 am 06:13 AM
Um eine Verbindung zu einer MySQL-Datenbank herzustellen, müssen Sie die folgenden Schritte ausführen: Installieren Sie den MySQL2-Treiber. Verwenden Sie mysql2.createConnection(), um ein Verbindungsobjekt zu erstellen, das die Hostadresse, den Port, den Benutzernamen, das Passwort und den Datenbanknamen enthält. Verwenden Sie „connection.query()“, um Abfragen durchzuführen. Verwenden Sie abschließend Connection.end(), um die Verbindung zu beenden.
Was ist der Unterschied zwischen den Dateien npm und npm.cmd im Installationsverzeichnis von nodejs?
Apr 21, 2024 am 05:18 AM
Es gibt zwei npm-bezogene Dateien im Node.js-Installationsverzeichnis: npm und npm.cmd. Die Unterschiede sind wie folgt: unterschiedliche Erweiterungen: npm ist eine ausführbare Datei und npm.cmd ist eine Befehlsfensterverknüpfung. Windows-Benutzer: npm.cmd kann über die Eingabeaufforderung verwendet werden, npm kann nur über die Befehlszeile ausgeführt werden. Kompatibilität: npm.cmd ist spezifisch für Windows-Systeme, npm ist plattformübergreifend verfügbar. Nutzungsempfehlungen: Windows-Benutzer verwenden npm.cmd, andere Betriebssysteme verwenden npm.
Gibt es einen großen Unterschied zwischen NodeJS und Java?
Apr 21, 2024 am 06:12 AM
Die Hauptunterschiede zwischen Node.js und Java sind Design und Funktionen: Ereignisgesteuert vs. Thread-gesteuert: Node.js ist ereignisgesteuert und Java ist Thread-gesteuert. Single-Threaded vs. Multi-Threaded: Node.js verwendet eine Single-Threaded-Ereignisschleife und Java verwendet eine Multithread-Architektur. Laufzeitumgebung: Node.js läuft auf der V8-JavaScript-Engine, während Java auf der JVM läuft. Syntax: Node.js verwendet JavaScript-Syntax, während Java Java-Syntax verwendet. Zweck: Node.js eignet sich für I/O-intensive Aufgaben, während Java für große Unternehmensanwendungen geeignet ist.
Ist NodeJS eine Back-End-Entwicklungssprache?
Apr 21, 2024 am 05:09 AM
Ja, Node.js ist eine Backend-Entwicklungssprache. Es wird für die Back-End-Entwicklung verwendet, einschließlich der Handhabung serverseitiger Geschäftslogik, der Verwaltung von Datenbankverbindungen und der Bereitstellung von APIs.
Welche Beziehung besteht zwischen NodeJS und NPM?
Apr 21, 2024 am 06:09 AM
Node.js ist eine JavaScript-Laufzeitumgebung und npm ist ihr Paketmanager. Die beiden arbeiten zusammen, um Entwicklern das Schreiben serverseitiger Programme in JavaScript, die Verwendung von Modulen von Drittanbietern und die einfache Verwaltung von Modulen zu ermöglichen.
So verbinden Sie NodeJS mit Mycat
Apr 21, 2024 am 06:16 AM
Schritte zum Verbinden von MyCAT in Node.js: Installieren Sie die mycat-ts-Abhängigkeit. Erstellen Sie einen Verbindungspool, geben Sie Host, Port, Benutzernamen, Passwort und Datenbank an. Verwenden Sie die Abfragemethode, um SQL-Abfragen auszuführen. Verwenden Sie die Methode close, um den Verbindungspool zu schließen.
Für welche Projekte ist NodeJS geeignet?
Apr 21, 2024 am 05:45 AM
Node.js eignet sich für die folgenden Projekttypen: Netzwerk- und Serveranwendungen, ereignisgesteuerte Anwendungen, Echtzeitanwendungen, datenintensive Anwendungen, Befehlszeilentools und Skripte, leichte Microservices
