Node.js-Lerntutorial HTTP/2-Server-Push-Beispielfreigabe

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum HTTP/2-Server-Push im Node.js-Lernprogramm vor. Der Artikel stellt ihn anhand von Beispielcodes ausführlich vor Wer braucht es? Lassen Sie uns gemeinsam mit dem Herausgeber unten lernen. Ich hoffe, es hilft allen.

Vorwort

Die aktuelle Version von Node.js v8.4+ bringt eine experimentelle Version von HTTP/2, die Sie durch Setzen des Parameters --expose-http2 starten können.

In diesem Artikel werde ich den wichtigsten Aspekt von HTTP/2, Server Push, vorstellen und ein kleines Node.js-Programmbeispiel erstellen, um es zu verwenden. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung.

Über HTTP/2

Der Zweck von HTTP/2 besteht darin, die Latenz durch die Unterstützung des vollständigen Anforderungs- und Antwort-Multiplexings zu reduzieren, den Protokoll-Overhead durch effektive Komprimierung von HTTP-Header-Feldern zu minimieren und Unterstützung für die Anforderungspriorisierung hinzuzufügen und Server-Push.

Server Push

HTTP/2 Server Push ermöglicht es dem Server, Ressourcen an den Browser zu senden, bevor der Browser sie anfordert.

Bevor wir zu HTTP/2 wechseln, sehen wir uns an, wie es mit HTTP/1 funktioniert:

Bei HTTP/1 sendet der Client eine Anfrage an den Server, der Server gibt zurück eine HTML-Datei, die viele Links zu externen Ressourcen (.js-, .css- usw. Dateien) enthält. Wenn der Browser diese anfängliche HTML-Datei verarbeitet, beginnt er, diese Links zu analysieren und sie einzeln zu laden.

Sehen Sie sich unten das Bild des Demo-Ladevorgangs an. Beachten Sie die unabhängigen Anfragen auf der Zeitleiste und die Initiierung dieser Anfragen:

HTTP/1-Ressourcenladen

So funktioniert HTTP/1, das ist wie wir die App im Laufe der Jahre entwickelt haben. Warum es ändern?

Das Problem beim aktuellen Ansatz besteht darin, dass der Benutzer warten muss, bis der Browser die Antwort analysiert, den Link erkennt und die Ressource erhält. Dies verzögert das Rendern und erhöht die Ladezeiten. Es gibt einige Lösungen wie das Inlining einiger Ressourcen, aber das führt auch dazu, dass die erste Reaktion immer größer wird.

Hier kommt die HTTP/2-Server-Push-Funktion ins Spiel, da der Server Ressourcen an den Browser senden kann, bevor der Browser sie anfordert.
Sehen Sie sich das Bild unten einer Website an, die denselben Dienst über HTTP/2 anbietet. Sehen Sie sich die Timeline und den Launcher an. Sie können sehen, dass HTTP/2-Multiplexing die Anzahl der Anfragen reduziert und die Ressourcen sofort mit der ersten Anfrage gesendet werden.

HTTP/2 Server Push

Sehen wir uns noch heute an, wie man HTTP/2 Server Push in Node.js verwendet, um die Ladezeiten von Clients zu beschleunigen.

Ein Node.js HTTP/2-Server-Push-Fall

Durch Laden des integrierten http2-Moduls können wir unseren Server genauso erstellen, wie wir das https-Modul verwenden.

Der interessante Teil besteht darin, die anderen Ressourcen zu pushen, wenn index.html angefordert wird:

const http2 = require('http2') 
const server = http2.createSecureServer( 
 { cert, key },
 onRequest
)

function push (stream, filePath) { 
 const { file, headers } = getFile(filePath)
 const pushHeaders = { [HTTP2_HEADER_PATH]: filePath }

 stream.pushStream(pushHeaders, (pushStream) => {
 pushStream.respondWithFD(file, headers)
 })
}

function onRequest (req, res) { 
 // Push files with index.html
 if (reqPath === '/index.html') {
 push(res.stream, 'bundle1.js')
 push(res.stream, 'bundle2.js')
 }

 // Serve file
 res.stream.respondWithFD(file.fileDescriptor, file.headers)
}

Auf diese Weise werden die Ressourcen bundle1.js und bundle2.js zum Durchsuchen gesendet, noch bevor sie dazu aufgefordert werden für sie Gerät.

Sie können den vollständigen Fall ansehen: https://github.com/RisingStack/http2-push-example

HTTP/2 & Node

HTTP/2 kann helfen Wir optimieren die Kommunikation zwischen unseren Clients und Servern auf vielfältige Weise.

Mit Server Push können wir Ressourcen an den Browser senden und so die anfängliche Ladezeit des Benutzers verkürzen.

Verwandte Empfehlungen:

Erklärung von HTML5-Server-Push-Ereignissen

Detaillierte Einführung von Server-Push-Ereignissen

PHP-Web-Echtzeitnachrichten-Hintergrundserver-Push-Technologie GoEasy

Das obige ist der detaillierte Inhalt vonNode.js-Lerntutorial HTTP/2-Server-Push-Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!