HTTP2 Server Push的研究

HTTP2 Server Push的研究

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

原作出处:
AlloyTeam   

难题:加载2个页面所需的能源,须求频仍请求。例如加载index需求请求一次:index.html、index.js、index.css。

HTTP/2 Server Push 详解(下)

2017/04/23 · 基本功技术 ·
HTTP

HTTP2 Server Push的研究。原稿出处: Jeremy
Wagner   译文出处:AlloyTeam   

接上篇 HTTP/2 Server Push 详解(上)

翻译注:上文介绍了 HTTP/2 Server Push
的基本概念和用法,上面继续深刻实际使用的性质和勘验。

任用待用,修改转发已取得腾讯云授权

1,HTTP2的新性格。

至于HTTP2的新天性,读着能够参见笔者事先的篇章,那里就不在多说了,本篇文章重要讲一下server
push这么些特点。

HTTP,HTTP2.0,SPDY,HTTPS你应有知道的片段事

 

消除思路:Server在收到到加载index请求时,同时再次来到index.html、index.js、index.css。

怎么分辨 Server Push 是或不是见效

现阶段,大家已经因而 Link
首部来报告服务器推送一些能源。剩下的标题是,我们怎么知道是否见效了啊?

那还要看分化浏览器的状态。最新版本Chrome将在开发者工具的互连网发起栏中展现推送的财富。

图片 1

Chrome展现服务器推送的财富(大图)

更进一步,假若把鼠标悬停在互连网请求瀑布图中的能源上,将赢得有关该推送财富的详实耗费时间音信:

图片 2

Chrome展现推送能源的详尽耗费时间新闻(大图)

Firefox对推送能源则标识地没那么鲜明。若是多个财富是被推送的,则浏览器开发者工具的网络信息里,会将其情景显示为一个黑古铜色圆点。

图片 3

Firefox对推送能源的显得(大图)

若果你在寻找四个管教能辨别能源是不是为推送的主意,能够应用 nghttp
命令行客户端来检查是或不是来自 HTTP/2
服务器,像那样:

nghttp -ans

1
nghttp -ans https://jeremywagner.me

这几个命令会展现出会话中有着财富的集中结果。推送的财富将在输出中显得贰个星号(*),像这样:

id responseEnd requestStart process code size request path 13 +50.28ms
+1.07ms 49.21ms 200 3K / 2 +50.47ms * +42.10ms 8.37ms 200 2K
/css/global.css 4 +50.56ms * +42.15ms 8.41ms 200 157
/css/fonts-loaded.css 6 +50.59ms * +42.16ms 8.43ms 200 279 /js/ga.js 8
+50.62ms * +42.17ms 8.44ms 200 243 /js/load-fonts.js 10 +74.29ms *
+42.18ms 32.11ms 200 5K /img/global/jeremy.png 17 +87.17ms +50.65ms
36.51ms 200 668 /js/lazyload.js 15 +87.21ms +50.65ms 36.56ms 200 2K
/img/global/book-1x.png 19 +87.23ms +50.65ms 36.58ms 200 138
/js/debounce.js 21 +87.25ms +50.65ms 36.60ms 200 240 /js/nav.js 23
+87.27ms +50.65ms 36.62ms 200 302 /js/attach-nav.js

1
2
3
4
5
6
7
8
9
10
11
12
id  responseEnd requestStart  process code size request path
13     +50.28ms      +1.07ms  49.21ms  200   3K /
  2     +50.47ms *   +42.10ms   8.37ms  200   2K /css/global.css
  4     +50.56ms *   +42.15ms   8.41ms  200  157 /css/fonts-loaded.css
  6     +50.59ms *   +42.16ms   8.43ms  200  279 /js/ga.js
  8     +50.62ms *   +42.17ms   8.44ms  200  243 /js/load-fonts.js
10     +74.29ms *   +42.18ms  32.11ms  200   5K /img/global/jeremy.png
17     +87.17ms     +50.65ms  36.51ms  200  668 /js/lazyload.js
15     +87.21ms     +50.65ms  36.56ms  200   2K /img/global/book-1x.png
19     +87.23ms     +50.65ms  36.58ms  200  138 /js/debounce.js
21     +87.25ms     +50.65ms  36.60ms  200  240 /js/nav.js
23     +87.27ms     +50.65ms  36.62ms  200  302 /js/attach-nav.js

这里,我在友好的站点上应用了
nghttp,有三个推送的财富(至少在写那篇小说时)。推送的财富在 requestStart
栏左边以星号标记了出去。

当今我们掌握了什么样分辨推送的资源,接下里具体看看对实在站点的个性有啥实际影响。


2,Server Push是什么。

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

只要一个页面有三个财富文件index.html,index.css,index.js,当浏览器请求index.html的时候,服务器不仅再次来到index.html的内容,同时将index.css和index.js的情节push给浏览器,当浏览器下次呼吁那2多少个公文时就足以一贯从缓存中读取了。

Client:

测量 Server Push 性能

度量任何性质进步的作用都亟需很好的测试工具。Sitespeed.io 是一个可从
npm
获取的不错工具,它可以自动地质度量试页面,收集有价值的天性数据。有了相当熟谙的工具,大家来不慢过一下测试方法吧。

译者:TAT.Johnny

网站地图xml地图