简介
BigPipe是facebook推出的用于优化网页加载速度的技术，它突破了传统网页的加载方式，通过把网页内容进行分块，然后对这些块进行并行传输从，使得浏览器的渲染无需等到整个页面加载完毕，大大提升网页加载速度。天猫上首页就有这种实现。
Bigpie适用于网页分块清晰，且规模达到一定程度。简单说就是使用bigpipe要达到优化的效果才有意义。
实现原理
利用http1.1中的transfer-encoding:chunked头消息来进行分块传输，初始时只传输网页的骨架，待到具体分块到达后，利用js填充骨架。
已下是基于Nodejs的BigPipe的简单实现：
采用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 res.write(‘<!doctype html>‘);
7 res.write(‘<html><head>‘);
8 res.write(‘<script>‘ +
9 ‘function loaded(id, content){‘ +
10 ‘document.getElementById(id).innerHTML = content‘ +
11 ‘}‘ +
12 ‘</script></head>‘);
13
14 setTimeout(function(){
15 res.write(‘<div id="pagelet1"></div>‘);
16 res.write(‘<script>loaded("pagelet1", "I am pagelet 1!")</script>‘);
17
18 if(--down === 0){
19 res.end(‘</body></html>‘);
20 }
21 }, 1000);
22
23 setTimeout(function(){
24 res.write(‘<div id="pagelet2"></div>‘);
25 res.write(‘<script>loaded("pagelet2", "I am pagelet 2!")</script>‘);
26 if(--down === 0){
27 res.end(‘</body></html>‘);
28 }
29 }, 3000);
30 });
31
32 var server = app.listen(3000, function () {
33 var host = server.address().address;
34 var port = server.address().port;
35
36 console.log(‘Example app listening at http://%s:%s‘, host, port);
37 });
时间： 2024-10-14 07:54:27