HTTP2 Server Push的研究

HTTP2 Server Push的研究

HTTP2 Server Push的研究。2017/01/05 · 基础技术 ·
HTTP/2

原稿出处:
AlloyTeam   

标题:加载3个页面所需的能源,要求频仍伸手。例如加载index必要请求三回:index.html、index.js、index.css。

HTTP/2 Server Push 详解(下)

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

初稿出处: 亚洲城ca88网页版登录,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将在开发者工具的网络发起栏中显得推送的资源。

亚洲城ca88网页版登录 1

Chrome显示服务器推送的能源(大图)

更进一步,假设把鼠标悬停在互连网请求瀑布图中的能源上,将收获有关该推送能源的事无巨细耗费时间音信:

亚洲城ca88网页版登录 2

Chrome呈现推送财富的详实耗费时间消息(大图)

Firefox对推送能源则标识地没那么强烈。假如贰个能源是被推送的,则浏览器开发者工具的网络音信里,会将其意况展现为3个淡红圆点。

亚洲城ca88网页版登录 3

Firefox对推送财富的来得(大图)

只要您在查找三个保证能识别财富是或不是为推送的艺术,可以动用 nghttp
命令行客户端来检查是否来自 HTTP/2
服务器,像这么:

nghttp -ans

1
nghttp -ans https://jeremywagner.me

其一命令会显示出会话中颇具财富的集聚结果。推送的能源将在输出中体现3个星号(*),像这样:

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是什么。

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

只要3个页面有二个财富文件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地图