新萄京娱乐场.2959.com 6

HTTP2 Server Push的研究

HTTP2 Server Push的研究

2017/01/05 · 基本功技术 ·
HTTP/2

初稿出处:
AlloyTeam   

本文首发地址为-iOS HTTP/2 Server Push 探索 |
李剑飞的博客

一,HTTP2的新特色。

关于HTTP二的新特性,读着能够参照笔者后面包车型大巴稿子,那里就不在多说了,本篇小说首要讲一下server
push那么些特点。

HTTP,HTTP二.0,SPDY,HTTPS你应当精晓的部分事

 


2,Server Push是什么。

一言以蔽之来讲正是当用户的浏览器和服务器在建立链接后,服务器主动将一部分财富推送给浏览器并缓存起来,那样当浏览器接下去请求那些财富时就直接从缓存中读取,不会在从服务器上拉了,进步了速率。举2个例证正是:

若是多个页面有2个能源文件index.html,index.css,index.js,当浏览器请求index.html的时候,服务器不仅重临index.html的剧情,同时将index.css和index.js的剧情push给浏览器,当浏览器下次呼吁那二三个公文时就能够直接从缓存中读取了。

新萄京娱乐场.2959.com 1

三,Server Push原理是怎么着。

要想精晓server
push原理,首先要知道一些定义。我们明白HTTP2传输的格式并不像HTTP壹使用文本来传输,而是启用了贰进制帧(Frames)格式来传输,和server
push相关的帧重要分为那两种档次:

  1. HEADE科雷傲S
    frame(请求重返头帧):那种帧主要指引的http请求头消息,和HTTP一的header类似。
  2. DATA frames(数据帧) :那种帧存放真正的多少content,用来传输。
  3. PUSH_PROMISE
    frame(推送帧):那种帧是由server端发送给client的帧,用来代表server
    push的帧,这种帧是得以实现server push的基本点帧类型。
  4. RST_STREAM(撤消推送帧):这种帧表示请求关闭帧,不难讲正是当client不想接受某个财富照旧收受timeout时会向发送方发送此帧,和PUSH_PROMISE
    frame一起行使时表示拒绝大概关闭server push。

Note:HTTP2.0互为表里的帧其实包涵10种帧,正是因为尾巴部分数据格式的变动,才为HTTP二.0拉动许多的风味,帧的引入不仅有利于压缩数量,也方便数据的安全性和可信赖传输性。

打听了相关的帧类型,上边正是具体server push的贯彻进度了:

  1. 由多路复用大家能够通晓HTTP第22中学对此同1个域名的请求会使用一条tcp链接而用不一样的stream
    ID来分歧各自的央求。
  2. 当client使用stream
    一请求index.html时,server平日处理index.html的央浼,并得以摸清index.html页面还就要会呈请index.css和index.js。
  3. server使用stream 1发送PUSH_PROMISE
    frame给client告诉client笔者那边能够利用stream 2来推送index.js和stream
    三来推送index.css财富。
  4. server使用stream 一平常的发送HEADE奥德赛S frame和DATA
    frames将index.html的内容重临给client。
  5. client接收到PUSH_PROMISE frame得知stream 二和stream
    3来接受推送财富。
  6. server得到index.css和index.js便会发送HEADE福特ExplorerS frame和DATA
    frames将财富发送给client。
  7. client得到push的财富后会缓存起来当呼吁这几个财富时会从平素从从缓存中读取。

下图表示了全套工艺流程:

新萄京娱乐场.2959.com 2

HTTP/2

4,Server Push怎么用。

既然server
push这么神奇,那么大家什么样运用啊?怎么设置服务器push哪些文件呢?

先是并不是有着的服务器都扶助server
push,nginx近来还不支持这一个天性,能够在nginx的合法博客上取得认证,不过Apache和nodejs都已经援救了server
push那七个特点,必要证实某个的是server
push那一个特点是基于浏览器和服务器的,所以浏览器并未提供对应的js
api来让用户直接操作和控制push的剧情,所以不得不是经过header新闻和server的布置来完毕具体的push内容,本文首要以nodejs来验证具体什么运用server
push这一特点。

预备工作:下载nodejs
http2支持,本地运转nodejs服务。

一. 第一大家采取nodejs搭建基本的server:

JavaScript

var http二 = require(‘http2’);   var url=require(‘url’); var
fs=require(‘fs’); var mine=require(‘./mine’).types; var
path=require(‘path’);   var server = http二.createServer({   key:
fs.readFileSync(‘./zs/localhost.key’),   cert:
fs.readFileSync(‘./zs/localhost.crt’) }, function(request, response) {
    var pathname = url.parse(request.url).pathname;     var realPath =
path.join(“my”, pathname);    //那里设置本人的文件名称;       var
pushArray = [];     var ext = path.extname(realPath);     ext = ext ?
ext.slice(1) : ‘unknown’;     var contentType = mine[ext] ||
“text/plain”;       if (fs.existsSync(realPath)) {  
        response.writeHead(200, {             ‘Content-Type’:
contentType         });  
        response.write(fs.readFileSync(realPath,’binary’));       } else
{       response.writeHead(404, {           ‘Content-Type’: ‘text/plain’
      });         response.write(“This request URL ” + pathname + ” was
not found on this server.”);       response.end();     }   });  
server.listen(443, function() {   console.log(‘listen on 443’); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var http2 = require(‘http2’);
 
var url=require(‘url’);
var fs=require(‘fs’);
var mine=require(‘./mine’).types;
var path=require(‘path’);
 
var server = http2.createServer({
  key: fs.readFileSync(‘./zs/localhost.key’),
  cert: fs.readFileSync(‘./zs/localhost.crt’)
}, function(request, response) {
    var pathname = url.parse(request.url).pathname;
    var realPath = path.join("my", pathname);    //这里设置自己的文件名称;
 
    var pushArray = [];
    var ext = path.extname(realPath);
    ext = ext ? ext.slice(1) : ‘unknown’;
    var contentType = mine[ext] || "text/plain";
 
    if (fs.existsSync(realPath)) {
 
        response.writeHead(200, {
            ‘Content-Type’: contentType
        });
 
        response.write(fs.readFileSync(realPath,’binary’));
 
    } else {
      response.writeHead(404, {
          ‘Content-Type’: ‘text/plain’
      });
 
      response.write("This request URL " + pathname + " was not found on this server.");
      response.end();
    }
 
});
 
server.listen(443, function() {
  console.log(‘listen on 443’);
});

这几行代码正是简单搭建七个nodejs
http二服务,打开chrome,咱们得以看出有着请求都走了http2,同时也得以作证多路复用的特色。

新萄京娱乐场.2959.com 3

此地供给留意几点:

  1. 创制http2的nodejs服务必须时依照https的,因为明天主流的浏览器都要扶助SSL/TLS的http2,证书和私钥能够团结通过OPENSSL生成。
  2. node http二的相关api和寻常的node httpserver相同,能够间接行使。

  3. 安装我们的server push:

JavaScript

var pushItem = response.push(‘/css/bootstrap.min.css’, {        request:
{             accept: ‘*/\*’        },       response: {
            ‘content-type’: ‘text/css’      } });
pushItem.end(fs.readFileSync(‘/css/bootstrap.min.css’,’binary’));

1
2
3
4
5
6
7
8
9
var pushItem = response.push(‘/css/bootstrap.min.css’, {
       request: {
            accept: ‘*/\*’
       },
      response: {
            ‘content-type’: ‘text/css’
     }
});
pushItem.end(fs.readFileSync(‘/css/bootstrap.min.css’,’binary’));

我们设置了bootstrap.min.css来通过server
push到大家的浏览器,大家能够在浏览器中查阅:

新萄京娱乐场.2959.com 4

能够看到,运维server push的能源timelime异常的快,大大加快了css的得到时间。

此间须求专注上面几点:

  1. 我们调用response.push(),正是一定于server发起了PUSH_PROMISE
    frame来告诉浏览器bootstrap.min.css将会由server push来博取。
  2. response.push()再次来到的指标时三个正规的ServerResponse,end(),writeHeader()等方式都能够健康调用。
  3. 此地1旦针对某些财富调用response.push()即发起PUSH_PROMISE
    frame后,要做好容错机制,因为浏览器在下次呼吁那一个能源时会且只会等待那一个server
    push回来的财富,那里要抓牢超时和容错即上面包车型客车代码:
  4. JavaScript

    try {
        pushItem.end(fs.readFileSync(‘my/css/bootstrap.min.css’,’binary’));
        } catch(e) {        response.writeHead(404, {           
    ‘Content-Type’: ‘text/plain’        });        response.end(‘request
    error’); }   pushItem.stream.on(‘error’, function(err){
        response.end(err.message); });   pushItem.stream.on(‘finish’,
    function(err){    console.log(‘finish’); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    try {
        pushItem.end(fs.readFileSync(‘my/css/bootstrap.min.css’,’binary’));
        } catch(e) {
           response.writeHead(404, {
               ‘Content-Type’: ‘text/plain’
           });
           response.end(‘request error’);
    }
     
    pushItem.stream.on(‘error’, function(err){
        response.end(err.message);
    });
     
    pushItem.stream.on(‘finish’, function(err){
       console.log(‘finish’);
    });

    上边的代码你也许会发现众多和符合规律nodejs的httpserver不一样的事物,那就是stream,其实全部http二都是以stream为单位,那里的stream其实能够明白成一个呼吁,更加多的api能够参考:node-http2。

  5. 谈起底给我们推荐一个老外写的专门服务http二的node
    server有兴趣的能够尝试一下。

HTTP/2 Server Push 是什么

当用户的浏览器和服务器在建立链接后,服务器主动将部分能源推送给浏览器并缓存起来,那样当浏览器接下去请求这个能源时就一贯从缓存中读取,不会在从服务器上拉了,提高了速率。举二个例子正是:

假诺二个页面有一个能源文件index.html,index.css,index.js,当浏览器请求index.html的时候,服务器不仅再次回到index.html的始末,同时将index.css和index.js的内容push给浏览器,当浏览器下次乞请那二四个文本时就能够直接从缓存中读取了。

一般来说图所示:

新萄京娱乐场.2959.com 5

Apple-http2ServerPush

伍,Server Push相关问题。

  1. 我们领略将来大家web的能源壹般都以放在CDN上的,那么CDN的优势和server
    push的优势有啥差别吧,到底是哪些比较快吧?这几个题材作者也直接在研讨,本文的有关demo都只可以算做二个示范,具体的线上进行还在展开中。
  2. 鉴于HTTP二的某个新特点例如多路复用,server
    push等等都以基于同三个域名的,所以那或许会对大家前边对于HTTP一的片段优化措施例如(能源拆分域名,合并等等)不肯定适用。
  3. server
    push不仅能够当作拉取静态能源,大家的cgi请求即ajax请求同样可以利用server
    push来发送数据。
  4. 最周密的结果是CDN域名帮衬HTTP贰,web server域名也同时协理HTTP二。

 

参考资料:

  1. HTTP2官方正规:
  2. 维基百科:
  3. 1 赞 1 收藏
    评论

新萄京娱乐场.2959.com 6

HTTP/2 Server Push 原理是怎么样

要想明白server
push原理,首先要驾驭壹些概念。大家领略HTTP/2传输的格式并不像HTTP一使用文本来传输,而是启用了贰进制帧(Frames)格式来传输,和server
push相关的帧首要分为那二种档次:

  1. HEADE奥迪Q五S
    frame(请求重返头帧):那种帧首要带领的http请求头音信,和HTTP一的header类似。
  2. DATA frames(数据帧) :那种帧存放真正的多寡content,用来传输。
  3. PUSH_PROMISE
    frame(推送帧):那种帧是由server端发送给client的帧,用来表示server
    push的帧,那种帧是促成server push的机要帧类型。
  4. RST_STREAM(打消推送帧):这种帧表示请求关闭帧,简单讲便是当client不想接受有些能源依旧接受timeout时会向发送方发送此帧,和PUSH_PROMISE
    frame一起使用时表示拒绝也许关闭server push。

(PS:HTTP/二相关的帧其实包罗10种帧,正是因为尾部数据格式的更动,才为HTTP/二带来很多的表征,帧的引进不仅有益于压缩数量,也有益数据的安全性和可相信传输性。)

问询了相关的帧类型,上边便是现实server push的完毕进程了:

  1. 由多路复用我们得以明白HTTP/2中对于同二个域名的请求会使用一条tcp链接而用区别的stream
    ID来区分各自的乞请。
  2. 当client使用stream
    一请求index.html时,server平常处理index.html的央求,并能够识破index.html页面还将要会呈请index.css和index.js。
  3. server使用stream 1发送PUSH_PROMISE
    frame给client告诉client小编那边能够接纳stream 二来推送index.js和stream
    三来推送index.css能源。
  4. 新萄京娱乐场.2959.com ,server使用stream 一正常的出殡和埋葬HEADE凯雷德S frame和DATA
    frames将index.html的始末再次回到给client。
  5. client接收到PUSH_PROMISE frame得知stream 二和stream
    三来收纳推送财富。
  6. server获得index.css和index.js便会发送HEADECR-VS frame和DATA
    frames将能源发送给client。
  7. client获得push的财富后会缓存起来当呼吁那么些财富时会从直接从从缓存中读取。

Server Push 怎么用

发表评论

电子邮件地址不会被公开。 必填项已用*标注