皇家国际娱乐中心HTTP Client Hints 介绍

皇家国际娱乐中心HTTP Client Hints 介绍

HTTP Client Hints 介绍

2015/09/14 · HTML5 ·
算法

最初的文章出处:
imququ(@屈光宇)   

前不久几年各样 Web
技术一贯在爆炸式发展,每日都有恢宏新东西涌现出来。针对那么些场景,行业内部两位大佬近年来先后发文表明了本人的理念:Stop
pushing the web
forward、Is
the web platform getting too
big?。其实很早在此以前作者就发现到以本身眼下的生机,吃透全数Web 新技巧大约是不只怕做到的职分,作者关爱新技巧的关键性放在了品质优化上。

后天本人要向大家介绍的技艺是:HTTP Client
Hints,也与品质优化有关。利用那项技能,HTTP
客户端(日常能够认为是浏览器)能够积极将一部分特征告诉服务端,以便服务端更有针对性地出口内容。这项技艺由大家熟识的
Ilya Grigorik
提议,近日还处于较为早期的等级,较为规范的讲述文书档案能够在此处找到。目前 Chrome
46
(beta) 已补助它,IE
和 Firefox 则还在考虑中。

实际在此以前浏览器已经将许多本身特色放在 HTTP 请求中,例如上面那个尾部字段:

  • User-Agent:提供浏览器类型及版本、操作系统及版本、浏览器内核等新闻;
  • Accept:证明浏览器支持什么 MIME type(例如 Chrome 通过 Accept
    表明自个儿扶助 image/webp 图片格式);
  • Accept-Encoding:评释本浏览器援救什么内容编码格局(例如:gzip、deflate、sdch);
  • Accept-Language:证明本浏览器援助那个语言;

透过上述那些尾部字段,大家早就得以针对不一样客户端输出不相同内容。例如本博客对支撑
Webp 格式的浏览器会利用 Webp 来裁减图片大小;本博客还会因此 User-Agent
针对 IE 老版本禁用 localStorage 缓存策略。

然而有局部浏览器性格,大家不可能直接得到,如荧屏分辨率、设备像素比(devicePixelRatio)、用户带宽等。而在活动
Web
中,为了尽量节约用户流量,要求输出尺寸最合适的图样财富。为了消除这么些难题,常见的方案有:1)使用
JS 获取这个特征,动态拼接图片 UTiggoL;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来兑现响应式图片。方案 1
很简单,那里略过;方案 2
网上有不可胜言相关小说,面生的同班可以自动物检疫索「响应式图片」掌握下。

那里看叁个采纳方案 2 中涉及的 picture、sizes 和 srcset
完毕的响应式图片代码(via):

<picture> <!– serve WebP to Chrome and Opera –> <source
media=”(min-width: 50em)” sizes=”50vw” srcset=”/image/thing-200.webp
200w, /image/thing-400.webp 400w, /image/thing-800.webp 800w,
/image/thing-1200.webp 1200w, /image/thing-1600.webp 1600w,
/image/thing-2000.webp 2000w” type=”image/webp”> <source
sizes=”(min-width: 30em) 100vw” srcset=”/image/thing-crop-200.webp 200w,
/image/thing-crop-400.webp 400w, /image/thing-crop-800.webp 800w,
/image/thing-crop-1200.webp 1200w, /image/thing-crop-1600.webp 1600w,
/image/thing-crop-2000.webp 2000w” type=”image/webp”> <!– serve
JPEGXR to Edge –> <source media=”(min-width: 50em)” sizes=”50vw”
srcset=”/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
/image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
/image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w”
type=”image/vnd.ms-photo”> <source sizes=”(min-width: 30em) 100vw”
srcset=”/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr
400w, /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr
1200w, /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr
2000w” type=”image/vnd.ms-photo”> <!– serve JPEG to others –>
<source media=”(min-width: 50em)” sizes=”50vw”
srcset=”/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
/image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
/image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w”> <source
sizes=”(min-width: 30em) 100vw” srcset=”/image/thing-crop-200.jpg 200w,
/image/thing-crop-400.jpg 400w, /image/thing-crop-800.jpg 800w,
/image/thing-crop-1200.jpg 1200w, /image/thing-crop-1600.jpg 1600w,
/image/thing-crop-2000.jpg 2000w”> <!– fallback for browsers that
don’t support picture –> <img src=”/image/thing.jpg”
width=”50%”> </picture>

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
42
43
44
<picture>
  <!– serve WebP to Chrome and Opera –>
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
  <!– serve JPEGXR to Edge –>
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <!– serve JPEG to others –>
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!– fallback for browsers that don’t support picture –>
  <img src="/image/thing.jpg" width="50%">
</picture>

那段冗长的代码只是为了落到实处一张响应式图片,尽管有一些夸张,实际应用时一般不会写这么全,但从中能够收获贰个结论:在客户端完毕的方针更多,HTML
体量就越大越冗余,可维护性和可读性就越差。

而接纳了 HTTP Client Hints
之后,浏览器在页面发起子财富请求时,会通过新增的一多级底部字段带上分辨率、设备像素比、图片宽度等消息,使得种种复杂的国策能够挪到服务端去完结了。上面来看一看具体细节:

率先,有了支撑 HTTP Client Hints
的浏览器之后,页面上还索要显式启用它。那是因为不是有所服务端都完毕了响应式输出策略,每一趟都发送那个新增的底部或许会招致浪费。

与未来同样,那些效应也能够透过 HTTP 响应头和 meta
标签二种情势拉开并布署:

Accept-CH: DPR, Width, Viewport-Width

1
Accept-CH: DPR, Width, Viewport-Width

或:

<meta http-equiv=”Accept-CH” content=”DPR, Width, Viewport-Width”>

1
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

在启用了 HTTP Client Hints
的页面中,全数子能源请求(无论怎么项目,无论如何做法创设),都会指引Accept-CH 属性中所指明的头顶,例如:

Accept: image/webp,image/*,*/*;q=0.8 Accept-Encoding: gzip, deflate,
sdch Accept-Language:
zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive DPR: 2 Host: qgy18.imququ.com User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36 Viewport-Width:
1280 Width: 128

1
2
3
4
5
6
7
8
9
Accept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive
DPR: 2
Host: qgy18.imququ.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36
Viewport-Width: 1280
Width: 128

有了这一个底部,图片服务器能够知晓客户端的 devicePixelRatio 是
贰 、图片宽度是 128px、支持 Webp 格式,所以输出 256px 的双倍 Webp
图最合适。可是浏览器怎么精通这一个图形须要当作双倍图来利用啊(也便是说依然显得为
128px)?那就要求在响应头中扩张上边那一个字段作为 DP帕杰罗 的应对:

Content-DPR: 2

1
Content-DPR: 2

亟需留意的是,请求头中的 Width 字段,是根据 img 标签上的 sizes
属性算出来的。假诺图片并未点名 sizes,恐怕图片请求是通过 JS
创造的,浏览器不恐怕获知 Width,也就不会带走那些尾部。

骨子里,除了 DPRubicon、Viewport-Width 和 Width
之外,文书档案还显著了五个字段,可是透过自个儿的测试 Chrome 46
并从未帮助它们,那里大概介绍下:

  • Downlink:用来指示当前互连网的下水链路带宽,单位是 Mbps;
  • Save-Data:用来提示当前浏览器是还是不是工作在省流格局之下,取值为 1 或 0;

能够看到那多个本性,也是为了尽可能给用户节省带宽而设计的。能够预知,后续还会有越多字段加到
HTTP Client Hints 协议中来。随着 HTTP/2
的普及,底部压缩使得扩展几个尾部字段带来的开支变得十分的小了。

值得注意的是,使用了 HTTP Client Hints 之后,服务端针对同二个 U奔驰G级L
大概会输出差别的情节,所以不管中间节点,依旧浏览器,在落到实处响应 Cache
时务必小心,需求针对分裂的景色缓存多份内容。那须要用到 HTTP/1 中的 
Vary 响应头,例如:

Vary: DPR, Width, Downlink

1
Vary: DPR, Width, Downlink

标明假设供给缓存这一个响应,在生成缓存 Key 的时候供给将请求头中的
DP大切诺基、Width 和 Downlink 的值总括进去。

好了,HTTP Client Hints 技术就介绍到那里。很安心地阅览,大部分 Web
新技巧都以在给 HTML、CSS 和 JavaScript
扩展效果和本性,而那项技能却是把前面复杂的代码和逻辑未来移,让大家的
HTML
代码能够轻装上阵。一些开源图片处理系列现已早先协助那一个新特性了,海外的一些
CDN 托管服务一定也在跃跃欲试,笔者卓殊梦想它的前途。

1 赞 收藏
评论

皇家国际娱乐中心 1

HTTP Client Hints 介绍

近日几年种种 Web
技术一贯在爆炸式发展,每一天都有雅量新东西涌现出来。针对那一个场景,行业内部两位大佬方今程序发文表明了和睦的理念:Stop
pushing the web forward、Is the web platform getting too
big?。其实很早在此以前笔者就发现到以本人最近的生命力,吃透全体 Web
新技巧大致是不容许做到的职责,小编关爱新技巧的大旨放在了质量优化上。

今日自个儿要向大家介绍的技艺是:HTTP Client
Hints,也与质量优化有关。利用那项技艺,HTTP
客户端(经常能够认为是浏览器)能够积极将一部分风味告诉服务端,以便服务端更有指向地出口内容。那项技艺由我们精通的
Ilya Grigorik
建议,近日还处在较为早期的级差,较为规范的讲述文书档案能够在此地找到。方今Chrome 46 (beta) 已扶助它,IE 和 Firefox 则还在设想中。

实则前边浏览器已经将许多自家特点放在 HTTP 请求中,例如上面这几个尾部字段:

  • User-Agent:提供浏览器类型及版本、操作系统及版本、浏览器内核等音信;
  • Accept:注解浏览器协理什么 MIME type(例如 Chrome 通过 Accept
    评释自个儿帮助 image/webp 图片格式);
  • Accept-Encoding:注明本浏览器援救什么内容编码方式(例如:gzip、deflate、sdch);
  • Accept-Language:注脚本浏览器匡助那多个语言;

因此上述那么些底部字段,我们已经足以针对分化客户端输出差异内容。例如本博客对支撑
Webp 格式的浏览器会采纳 Webp 来减弱图片大小;本博客还会因此 User-Agent
针对 IE 老版本禁止使用 localStorage 缓存策略。

不过有一些浏览器性子,大家不能直接得到,如显示器分辨率、设备像素比(devicePixelRatio)、用户带宽等。而在活动
Web
中,为了尽只怕节约用户流量,需求输出尺寸最合适的图样能源。为了消除这些标题,常见的方案有:1)使用
JS 获取那么些特征,动态拼接图片 U驭胜L;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来落实响应式图片。方案 1
非常粗略,那里略过;方案 2
网上有成都百货上千生死相依小说,不明白的同桌能够自行检索「响应式图片」理解下。

此地看二个使用方案 2 中提到的 picture、sizes 和 srcset
达成的响应式图片代码(via):

HTML<picture>
  <!-- serve WebP to Chrome and Opera -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
  <!-- serve JPEGXR to Edge -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <!-- serve JPEG to others -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!-- fallback for browsers that don't support picture -->
  <img src="/image/thing.jpg" width="50%">
</picture>

那段冗长的代码只是为着完结一张响应式图片,就算有局地言过其实,实际行使时相似不会写那样全,但从中可以获得多少个定论:在客户端达成的国策越来越多,HTML
体量就越大越冗余,可维护性和可读性就越差。

而利用了 HTTP Client Hints
之后,浏览器在页面发起子能源请求时,会因此新增的一种类尾部字段带上分辨率、设备像素比、图片宽度等音信,使得种种繁复的国策能够挪到服务端去落实了。下边来看一看具体细节:

首先,有了支撑 HTTP Client Hints
的浏览器之后,页面上还索要显式启用它。那是因为不是兼具服务端都落到实处了响应式输出策略,每趟都发送这个新增的头顶大概会招致浪费。

与以后一致,那个职能也能够透过 HTTP 响应头和 meta
标签三种格局拉开并配备:

Accept-CH: DPR, Width, Viewport-Width

或:

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

在启用了 HTTP Client Hints
的页面中,全部子资源请求(无论怎么样项目,无论怎么办法创立),都会指点
Accept-CH 属性中所指明的底部,例如:

BASHAccept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive
DPR: 2
Host: qgy18.imququ.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36
Viewport-Width: 1280
Width: 128

有了那个底部,图片服务器能够精通客户端的 devicePixelRatio 是
② 、图片宽度是 128px、辅助 Webp 格式,所以输出 256px 的双倍 Webp
图最合适。但是浏览器怎么知道这么些图形需求当作双倍图来选取啊(也正是说照旧呈现为
128px)?那就须求在响应头中扩大上边这几个字段作为 DP索罗德 的答问:

Content-DPR: 2

急需注意的是,请求头中的 Width 字段,是依照 img 标签上的 sizes
属性算出来的。假若图片并未点名 sizes,恐怕图片请求是由此 JS
创造的,浏览器不可能获悉 Width,也就不会引导那几个底部。

实质上,除了 DP宝马X3、Viewport-Width 和 Width
之外,文书档案还规定了多少个字段,不过透过作者的测试 Chrome 46
并没有扶助它们,那里差不多介绍下:

  • Downlink:用来提醒当前网络的下行链路带宽,单位是 Mbps;
  • Save-Data:用来提示当前浏览器是或不是工作在省流情势之下,取值为 1 或 0;

能够看到那八个属性,也是为着尽量给用户节省带宽而设计的。能够预见,后续还会有越来越多字段加到
HTTP Client Hints 协议中来。随着 HTTP/2
的推广,尾部压缩使得扩大多少个尾部字段带来的付出变得十分小了。

值得注意的是,使用了 HTTP Client Hints 之后,服务端针对同三个 U奇骏L
只怕会输出不一致的始末,所以不管中间节点,照旧浏览器,在落到实处响应 Cache
时务必��心,须求针对不相同的状态缓存多份内容。那须要用到 HTTP/1 中的
Vary 响应头,例如:

Vary: DPR, Width, Downlink

标明倘诺急需缓存这么些响应,在生成缓存 Key 的时候需求将请求头中的
DPPRADO、Width 和 Downlink 的值总结进去。

好了,HTTP Client Hints 技术就介绍到此处。很欣慰地观察,大部分 Web
新技巧都以在给 HTML、CSS 和 JavaScript
增添效益和特点,而这项技能却是把在此之前复杂的代码和逻辑今后移,让大家的
HTML
代码能够轻装上阵。一些开源图片处理系统现已起来支持那些新特点了,国外的一对
CDN 托管服务一定也在捋臂将拳,作者可怜盼望它的以往。

本文永久更新链接地址:

Client Hints 介绍 方今几年各个 Web
技术一直在爆炸式发展,每一日都有大气新东西涌现出来。针对那几个现象,行业内部两位大佬方今先后发文表…

近期几年各样 Web
技术一贯在爆炸式发展,每一天都有大气新东西涌现出来。针对那些场所,行业内部两位大佬近年来先后发文表明了和睦的意见:Stop
pushing the web
forward、Is
the web platform getting too
big?。其实很早以前作者就意识到以自作者眼下的生机,吃透全数Web 新技巧差不离是不或然毕其功于一役的职分,小编关注备至新技巧的本位放在了质量优化上。

今天自家要向大家介绍的技术是:HTTP Client
Hints,也与品质优化有关。利用那项技能,HTTP
客户端(经常能够认为是浏览器)能够主动将一些特征告诉服务端,以便服务端更有针对地出口内容。那项技能由大家明白的
Ilya Grigorik
建议,如今还地处较为早期的等级,较为专业的描述文书档案可以在此地找到。目前
Chrome 46
(beta)
已协理它,IE 和 Firefox 则还在设想中。

实际上后面浏览器已经将洋洋小编特色放在 HTTP 请求中,例如上边那些底部字段:

  • User-Agent:提供浏览器类型及版本、操作系统及版本、浏览器内核等新闻;
  • Accept:申明浏览器援助什么 MIME type(例如 Chrome 通过 Accept
    申明自个儿援助 image/webp 图片格式);
  • Accept-Encoding:申明本浏览器支持什么内容编码形式(例如:gzip、deflate、sdch);
  • Accept-Language:评释本浏览器支持那多少个语言;

透过以上这几个尾部字段,大家早已足以本着不相同客户端输出分化内容。例如本博客对帮助Webp 格式的浏览器会选用 Webp 来压缩图片大小;本博客还会透过 User-Agent
针对 IE 老版本禁止使用 localStorage 缓存策略。

唯独有一部分浏览器个性,我们鞭长莫及直接得到,如显示器分辨率、设备像素比(devicePixelRatio)、用户带宽等。而在运动
Web
中,为了尽量节约用户流量,须要输出尺寸最合适的图纸能源。为了消除这么些标题,常见的方案有:1)使用
JS 获取这个特色,动态拼接图片 UCRUISERL;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来达成响应式图片。方案 1
很粗略,那里略过;方案 2
网上有很多有关小说,面生的同班能够活动物检疫索「响应式图片」领悟下。

此处看二个用到方案 2 中关系的 picture、sizes 和 srcset
完结的响应式图片代码(via):

HTML<picture>
  <!-- serve WebP to Chrome and Opera -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
  <!-- serve JPEGXR to Edge -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <!-- serve JPEG to others -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!-- fallback for browsers that don't support picture -->
  <img src="/image/thing.jpg" width="50%">
</picture>

那段冗长的代码只是为了兑现一张响应式图片,就算有一部分夸张,实际应用时一般不会写那样全,但从中能够获得三个定论:在客户端落成的方针越来越多,HTML
体量就越大越冗余,可维护性和可读性就越差。

而选用了 HTTP Client Hints
之后,浏览器在页面发起子财富请求时,会通过新增的一文山会海底部字段带上分辨率、设备像素比、图片宽度等音信,使得各个复杂的国策可以挪到服务端去达成了。上边来看一看具体细节:

发表评论

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

网站地图xml地图