基於Nodejs的BigPipe實現

時間 2019-12-12

標籤基於 nodejs bigpipe 實現简体版

原文原文鏈接

簡介php

BigPipe是facebook推出的用於優化網頁加載速度的技術，它突破了傳統網頁的加載方式，經過把網頁內容進行分塊，而後對這些塊進行並行傳輸從，使得瀏覽器的渲染無需等到整個頁面加載完畢，大大提高網頁呈現速度。天貓上首頁就有這種實現。css

Bigpie適用於網頁分塊清晰，且規模達到必定程度。使用bigpipe要達到優化的效果纔有意義。html

實現原理node

利用http1.1中的transfer-encoding:chunked頭消息來進行分塊傳輸，初始時只傳輸網頁的骨架，待到具體分塊到達後，利用js填充骨架，並加載塊所需js、css等資源web

已下是基於Nodejs的BigPipe的簡單實現：express

採用express框架，它默認發送transfer-encoding:chunked頭消息瀏覽器

 1 var express = require('express');
 2 var app = express();
 3 
 4 app.get('/', function (req, res) {
 5     var down = 2;
 6     function end(){
 7         if(--down === 0){
 8             res.end('</body></html>');
 9         }
10     }
11 
12     //第一次輸出，未閉合body標籤，只引入必需的js和css等資源
13     res.write(
14         '<!doctype html>'+
15         '<html><head>' +
16         '<script>' +
17             //填充塊內容並加載塊所需的css,js等資源,這裏只實現內容填充
18             'function onPageletLoaded(id, source){' +
19             'document.getElementById(id).innerHTML = source.content' +
20             '}' +
21         '</script>' +
22         '</head><body>' +
23             '<div id="pagelet1"></div>' +
24             '<div id="pagelet2"></div>'
25     );
26 
27     //模擬生成塊所須要的時間 no.1
28     setTimeout(function(){
29         res.write('<script>onPageletLoaded("pagelet1", {content: "I am pagelet 1!", js: "", css: ""});</script>');
30         end();
31     }, 1000);
32 
33     //模擬生成塊所須要的時間 no.2
34     setTimeout(function(){
35         res.write('<script>onPageletLoaded("pagelet2", {content: "I am pagelet 2!", js: "", css: ""});</script>');
36         end();
37     }, 3000);
38 });
39 
40 var server = app.listen(3000, function () {
41     var host = server.address().address;
42     var port = server.address().port;
43 
44     console.log('Example app listening at http://%s:%s', host, port);
45 });

參考app

BigPipe: Pipelining web pages for high performance(out of the wall)框架

Using Streaming Chunked HTML to Get Node.js to Deliver More Dataoop

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。