无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-11-03 04:29 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

头部压缩技术介绍,历史演变与Normalize

从本质认识JavaScript的原型继承和类继承

2016/04/06 · JavaScript · 1 评论 · 继承

原文出处: 十年踪迹(@十年踪迹)   

JavaScript发展到今天,和其他语言不一样的一个特点是,有各种各样的“继承方式”,或者稍微准确一点的说法,叫做有各种各样的基于prototype的模拟类继承实现方式。

在ES6之前,JavaScript没有类继承的概念,因此使用者为了代码复用的目的,只能参考其他语言的“继承”,然后用prototype来模拟出对应的实现,于是有了各种继承方式,比如《JavaScript高级程序设计》上说的 原型链,借用构造函数,组合继承,原型式继承,寄生式继承,寄生组合式继承 等等

那么多继承方式,让第一次接触这一块的小伙伴们内心有点崩溃。然而,之所以有那么多继承方式,其实还是因为“模拟”二字,因为我们在说继承的时候不是在研究prototype本身,而是在用prototype和JS特性来模拟别的语言的类继承。

我们现在抛开这些种类繁多的继承方式,来看一下prototype的本质和我们为什么要模拟类继承。

关于CSS Reset那些事(1):历史演变与Normalize.css

2015/08/01 · CSS · CSS Reset, Normalize.css

原文出处: Alsiso   

HTTP/2 头部压缩技术介绍

2015/11/03 · HTML5 · HTTP/2

原文出处: imququ(@屈光宇)   

我们知道,HTTP/2 协议由两个 RFC 组成:一个是 RFC 7540,描述了 HTTP/2 协议本身;一个是 RFC 7541,描述了 HTTP/2 协议中使用的头部压缩技术。本文将通过实际案例带领大家详细地认识 HTTP/2 头部压缩这门技术。

原型继承

“原型” 这个词本身源自心理学,指神话、宗教、梦境、幻想、文学中不断重复出现的意象,它源自民族记忆和原始经验的集体潜意识。

所以,原型是一种抽象,代表事物表象之下的联系,用简单的话来说,就是原型描述事物与事物之间的相似性.

想象一个小孩子如何认知这个世界:

当小孩子没见过老虎的时候,大人可能会教他,老虎啊,就像是一只大猫。如果这个孩子碰巧常常和邻居家的猫咪玩耍,那么她不用去动物园见到真实的老虎,就能想象出老虎大概是长什么样子。

图片 1

这个故事有个更简单的表达,叫做“照猫画虎”。如果我们用JavaScript的原型来描述它,就是:

JavaScript

function Tiger(){ //... } Tiger.prototype = new Cat(); //老虎的原型是一只猫

1
2
3
4
5
function Tiger(){
    //...
}
 
Tiger.prototype = new Cat(); //老虎的原型是一只猫

很显然,“照猫画虎”(或者反过来“照虎画猫”,也可以,取决孩子于先认识老虎还是先认识猫)是一种认知模式,它让人类儿童不需要在脑海里重新完全构建一只老虎的全部信息,而可以通过她熟悉的猫咪的“复用”得到老虎的大部分信息,接下来她只需要去到动物园,去观察老虎和猫咪的不同部分,就可以正确认知什么是老虎了。这段话用JavaScript可以描述如下:

JavaScript

function Cat(){ } //小猫喵喵叫 Cat.prototype.say = function(){ return "喵"; } //小猫会爬树 Cat.prototype.climb = function(){ return "我会爬树"; } function Tiger(){ } Tiger.prototype = new Cat(); //老虎的叫声和小猫不同,但老虎也会爬树 Tiger.prototype.say = function(){ return "嗷"; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Cat(){
 
}
//小猫喵喵叫
Cat.prototype.say = function(){    
  return "喵";
}
//小猫会爬树
Cat.prototype.climb = function(){
  return "我会爬树";
}
 
function Tiger(){
 
}
Tiger.prototype = new Cat();
 
//老虎的叫声和小猫不同,但老虎也会爬树
Tiger.prototype.say = function(){
  return "嗷";
}

所以,原型可以通过描述两个事物之间的相似关系来复用代码,我们可以把这种复用代码的模式称为原型继承。

前言

近期在翻阅陈旧的历史资料,整理之前饱受争议的CSS Reset问题,不过好像十多年过去,现在大家统一了口径,纷纷推荐使用Normalize.css,包括Bootstrap都进行了内置使用,可见它的认可程度之高。

由于文章涉及内容较多,会分为系列文章

第一章
整理CSS Reset历史的演变痕迹,从第一份CSS Reset的诞生,到提出No CSS Reset的思想,再到国产CSS Reset 1.0骄傲的诞生;最终时过境迁,CSS Reset被Normalize.css所替代;
随后开始认识Normalize.css,了解它都做了那些事情,诉说与CSS Reset的区别,突出优势,告诉你为什么要使用它。

第二章
由于Normalize.css只提供了英文文档,没有提供对应的中文版本,所以从这章开始对其源码进行翻译整理与解读,本章包含 html与body,HTML5元素,链接,语义化文本标签,内嵌元素,群组元素等内容解读。

第三章,
继续来介绍源码中的表单和表格部分,并且整理一份normalize-zh.css中文注释的版本上传至Github,供大家参考使用,敬请期待

为什么要压缩

在 HTTP/1 中,HTTP 请求和响应都是由「状态行、请求 / 响应头部、消息主体」三部分组成。一般而言,消息主体都会经过 gzip 压缩,或者本身传输的就是压缩过后的二进制文件(例如图片、音频),但状态行和头部却没有经过任何压缩,直接以纯文本传输。

随着 Web 功能越来越复杂,每个页面产生的请求数也越来越多,根据 HTTP Archive 的统计,当前平均每个页面都会产生上百个请求。越来越多的请求导致消耗在头部的流量越来越多,尤其是每次都要传输 UserAgent、Cookie 这类不会频繁变动的内容,完全是一种浪费。

以下是我随手打开的一个页面的抓包结果。可以看到,传输头部的网络开销超过 100kb,比 HTML 还多:

图片 2

下面是其中一个请求的明细。可以看到,为了获得 58 字节的数据,在头部传输上花费了好几倍的流量:

图片 3

HTTP/1 时代,为了减少头部消耗的流量,有很多优化方案可以尝试,例如合并请求、启用 Cookie-Free 域名等等,但是这些方案或多或少会引入一些新的问题,这里不展开讨论。

类继承

几年之后,当时的小孩子长大了,随着她的知识结构不断丰富,她认识世界的方式也发生了一些变化,她学会了太多的动物,有喵喵叫的猫,百兽之王狮子,优雅的丛林之王老虎,还有豺狼、大象等等。

这时候,单纯的相似性的认知方式已经很少被使用在如此丰富的知识内容里,更加严谨的认知方式——分类,开始被更频繁使用。

图片 4

这时候当年的小孩会说,猫和狗都是动物,如果她碰巧学习的是专业的生物学,她可能还会说猫和狗都是脊索门哺乳纲,于是,相似性被“类”这一种更高程度的抽象表达取代,我们用JavaScript来描述:

JavaScript

class Animal{ eat(){} say(){} climb(){} ... } class Cat extends Animal{ say(){return "喵"} } class Dog extends Animal{ say(){return "汪"} }

1
2
3
4
5
6
7
8
9
10
11
12
class Animal{
    eat(){}
    say(){}
    climb(){}
    ...
}
class Cat extends Animal{
    say(){return "喵"}
}
class Dog extends Animal{
    say(){return "汪"}
}

CSS Reset 历史回顾

压缩后的效果

接下来我将使用访问本博客的抓包记录来说明 HTTP/2 头部压缩带来的变化。如何使用 Wireshark 对 HTTPS 网站进行抓包并解密,请看我的这篇文章。本文使用的抓包文件,可以点这里下载。

首先直接上图。下图选中的 Stream 是首次访问本站,浏览器发出的请求头:

图片 5

从图片中可以看到这个 HEADERS 流的长度是 206 个字节,而解码后的头部长度有 451 个字节。由此可见,压缩后的头部大小减少了一半多。

然而这就是全部吗?再上一张图。下图选中的 Stream 是点击本站链接后,浏览器发出的请求头:

图片 6

可以看到这一次,HEADERS 流的长度只有 49 个字节,但是解码后的头部长度却有 470 个字节。这一次,压缩后的头部大小几乎只有原始大小的 1/10。

为什么前后两次差距这么大呢?我们把两次的头部信息展开,查看同一个字段两次传输所占用的字节数:

图片 7

图片 8

对比后可以发现,第二次的请求头部之所以非常小,是因为大部分键值对只占用了一个字节。尤其是 UserAgent、Cookie 这样的头部,首次请求中需要占用很多字节,后续请求中都只需要一个字节。

原型继承和类继承

所以,原型继承和类继承是两种认知模式,本质上都是为了抽象(复用代码)。相对于类,原型更初级且更灵活。因此当一个系统内没有太多关联的事物的时候,用原型明显比用类更灵活便捷。

原型继承的便捷性表现在系统中对象较少的时候,原型继承不需要构造额外的抽象类和接口就可以实现复用。(如系统里只有猫和狗两种动物的话,没必要再为它们构造一个抽象的“动物类”)

原型继承的灵活性还表现在复用模式更加灵活。由于原型和类的模式不一样,所以对复用的判断标准也就不一样,例如把一个红色皮球当做一个太阳的原型,当然是可以的(反过来也行),但显然不能将“恒星类”当做太阳和红球的公共父类(倒是可以用“球体”这个类作为它们的公共父类)。

既然原型本质上是一种认知模式可以用来复用代码,那我们为什么还要模拟“类继承”呢?在这里面我们就得看看原型继承有什么问题——

第一份 CSS Reset

为什么会有CSS Reset的存在呢?那是因为早期的浏览器支持和理解的CSS规范不同,导致浏览器在渲染页面时效果不一致,出现很多兼容性问题。 关于 浏览器的默认样式 请点击查阅!

根据玉伯的文章中透漏,最早的一份CSS Reset来自Tantek 的undohtml.css,从URL中的日期可以看出时间是2004年,Tantek根据自身需要对于一些标签进行了简单的重置,源码如下:

CSS

/* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved. */ :link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote, fieldset,input{ margin:0; padding:0 } a img,:link img,:visited img { border:none } address { font-style:normal }

1
2
3
4
5
6
7
8
9
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

技术原理

下面这张截图,取自 Google 的性能专家 Ilya Grigorik 在 Velocity 2015 • SC 会议中分享的「HTTP/2 is here, let’s optimize!」,非常直观地描述了 HTTP/2 中头部压缩的原理:

图片 9

我再用通俗的语言解释下,头部压缩需要在支持 HTTP/2 的浏览器和服务端之间:

  • 维护一份相同的静态字典(Static Table),包含常见的头部名称,以及特别常见的头部名称与值的组合;
  • 维护一份相同的动态字典(Dynamic Table),可以动态的添加内容;
  • 支持基于静态哈夫曼码表的哈夫曼编码(Huffman Coding);

静态字典的作用有两个:1)对于完全匹配的头部键值对,例如 : method :GET,可以直接使用一个字符表示;2)对于头部名称可以匹配的键值对,例如 cookie :xxxxxxx,可以将名称使用一个字符表示。HTTP/2 中的静态字典如下(以下只截取了部分,完整表格在这里):

Index Header Name Header Value
1 :authority
2 :method GET
3 :method POST
4 :path /
5 :path /index.html
6 :scheme http
7 :scheme https
8 :status 200
32 cookie
60 via
61 www-authenticate

同时,浏览器可以告知服务端,将 cookie :xxxxxxx 添加到动态字典中,这样后续整个键值对就可以使用一个字符表示了。类似的,服务端也可以更新对方的动态字典。需要注意的是,动态字典上下文有关,需要为每个 HTTP/2 连接维护不同的字典。

使用字典可以极大地提升压缩效果,其中静态字典在首次请求中就可以使用。对于静态、动态字典中不存在的内容,还可以使用哈夫曼编码来减小体积。HTTP/2 使用了一份静态哈夫曼码表(详见),也需要内置在客户端和服务端之中。

这里顺便说一下,HTTP/1 的状态行信息(Method、Path、Status 等),在 HTTP/2 中被拆成键值对放入头部(冒号开头的那些),同样可以享受到字典和哈夫曼压缩。另外,HTTP/2 中所有头部名称必须小写。

原型继承的问题

由于我们刚才前面举例的猫和老虎的构造器没有参数,因此大家很可能没发现问题,现在我们试验一个有参数构造器的原型继承:

JavaScript

function Vector2D(x, y){ this.x = x; this.y = y; } Vector2D.prototype.length = function(){ return Math.sqrt(this.x * this.x this.y * this.y); } function Vector3D(x, y, z){ Vector2D.call(this, x, y); this.z = z; } Vector3D.prototype = new Vector2D(); Vector3D.prototype.length = function(){ return Math.sqrt(this.x * this.x this.y * this.y this.z * this.z); } var p = new Vector3D(1, 2, 3); console.log(p.x, p.y, p.z, p.length(), p instanceof Vector2D);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Vector2D(x, y){
  this.x = x;
  this.y = y;
}
Vector2D.prototype.length = function(){
  return Math.sqrt(this.x * this.x this.y * this.y);
}
 
function Vector3D(x, y, z){
  Vector2D.call(this, x, y);
  this.z = z;
}
Vector3D.prototype = new Vector2D();
 
Vector3D.prototype.length = function(){
  return Math.sqrt(this.x * this.x this.y * this.y this.z * this.z);
}
 
var p = new Vector3D(1, 2, 3);
console.log(p.x, p.y, p.z, p.length(), p instanceof Vector2D);

上面这段代码里面我们看到我们用 Vector2D 的实例作为 Vector3D 的原型,在 Vector3D 的构造器里面我们还可以调用 Vector2D 的构造器来初始化 x、y。

但是,如果认真研究上面的代码,会发现一个小问题,在中间描述原型继承的时候:

JavaScript

Vector3D.prototype = new Vector2D();

1
Vector3D.prototype = new Vector2D();

我们其实无参数地调用了一次 Vector2D 的构造器!

这一次调用是不必要的,而且,因为我们的 Vector2D 的构造器足够简单并且没有副作用,所以我们这次无谓的调用除了稍稍消耗了性能之外,并不会带来太严重的问题。

但在实际项目中,我们有些组件的构造器比较复杂,或者操作DOM,那么这种情况下无谓多调用一次构造器,显然是有可能造成严重问题的。

于是,我们得想办法克服这一次多余的构造器调用,而显然,我们发现我们可以不必要这一次多余的调用:

JavaScript

function createObjWithoutConstructor(Class){ function T(){}; T.prototype = Class.prototype; return new T(); }

1
2
3
4
5
function createObjWithoutConstructor(Class){
    function T(){};
    T.prototype = Class.prototype;
    return new T();    
}

上面的代码中,我们通过创建一个空的构造器T,引用父类Class的prototype,然后返回new T( ),来巧妙地避开Class构造器的执行。这样,我们确实可以绕开父类构造器的调用,并将它的调用时机延迟到子类实例化的时候(本来也应该这样才合理)。

JavaScript

function Vector2D(x, y){ this.x = x; this.y = y; } Vector2D.prototype.length = function(){ return Math.sqrt(this.x * this.x this.y * this.y); } function Vector3D(x, y, z){ Vector2D.call(this, x, y); this.z = z; } Vector3D.prototype = createObjWithoutConstructor(Vector2D); Vector3D.prototype.length = function(){ return Math.sqrt(this.x * this.x this.y * this.y this.z * this.z); } var p = new Vector3D(1, 2, 3); console.log(p.x, p.y, p.z, p.length(), p instanceof Vector2D);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Vector2D(x, y){
  this.x = x;
  this.y = y;
}
Vector2D.prototype.length = function(){
  return Math.sqrt(this.x * this.x this.y * this.y);
}
 
function Vector3D(x, y, z){
  Vector2D.call(this, x, y);
  this.z = z;
}
Vector3D.prototype = createObjWithoutConstructor(Vector2D);
 
Vector3D.prototype.length = function(){
  return Math.sqrt(this.x * this.x this.y * this.y this.z * this.z);
}
 
var p = new Vector3D(1, 2, 3);
console.log(p.x, p.y, p.z, p.length(), p instanceof Vector2D);

这样,我们解决了父类构造器延迟构造的问题之后,原型继承就比较适用了,并且这样简单处理之后,使用起来还不会影响 instanceof 返回值的正确性,这是与其他模拟方式相比最大的好处。

CSS Reset 核心代码与作用

随后加入到CSS RESET的行列的大牛越来越多,比如业界领袖 YUI团队 以及Eric Meyer把这份CSS Reset变的更加充实,但是大家不难发现代码的核心部分还是重置,从此可以结论出早期的CSS Reset的作用就是清除所有浏览器默认样式,让它一切归零!

CSS

* { margin:0; padding:0 }

1
* { margin:0; padding:0 }

不过在此之后一段时间,有人开始批判这种暴力清零的CSS Reset方式,随后部分前端开发者们也传来一些争议声音,比如:

  1. *{ margin:0; padding:0; }会带来性能问题
  2. 使用通配符存在隐性问题
  3. 过渡的标签重置等于画蛇添足
  4. 过渡的标签重置导致语言元素失效

注:由于都是一些陈旧的老问题,就不提供出处了,再此不过多讨论,感兴趣Google~

实现细节

了解了 HTTP/2 头部压缩的基本原理,最后我们来看一下具体的实现细节。HTTP/2 的头部键值对有以下这些情况:

1)整个头部键值对都在字典中

JavaScript

0 1 2 3 4 5 6 7 --- --- --- --- --- --- --- --- | 1 | Index (7 ) | --- ---------------------------

1
2
3
4
5
  0   1   2   3   4   5   6   7
--- --- --- --- --- --- --- ---
| 1 |        Index (7 )         |
--- ---------------------------
 

这是最简单的情况,使用一个字节就可以表示这个头部了,最左一位固定为 1,之后七位存放键值对在静态或动态字典中的索引。例如下图中,头部索引值为 2(0000010),在静态字典中查询可得 : method :GET

图片 10

2)头部名称在字典中,更新动态字典

JavaScript

0 1 2 3 4 5 6 7 --- --- --- --- --- --- --- --- | 0 | 1 | Index (6 ) | --- --- ----------------------- | H | Value Length (7 ) | --- --------------------------- | Value String (Length octets) | -------------------------------

1
2
3
4
5
6
7
8
9
  0   1   2   3   4   5   6   7
--- --- --- --- --- --- --- ---
| 0 | 1 |      Index (6 )       |
--- --- -----------------------
| H |     Value Length (7 )     |
--- ---------------------------
| Value String (Length octets)  |
-------------------------------
 

对于这种情况,首先需要使用一个字节表示头部名称:左两位固定为 01,之后六位存放头部名称在静态或动态字典中的索引。接下来的一个字节第一位 H 表示头部值是否使用了哈夫曼编码,剩余七位表示头部值的长度 L,后续 L 个字节就是头部值的具体内容了。例如下图中索引值为 32(100000),在静态字典中查询可得  cookie ;头部值使用了哈夫曼编码(1),长度是 28(0011100);接下来的 28 个字节是 cookie 的值,将其进行哈夫曼解码就能得到具体内容。

图片 11

客户端或服务端看到这种格式的头部键值对,会将其添加到自己的动态字典中。后续传输这样的内容,就符合第 1 种情况了。

3)头部名称不在字典中,更新动态字典

JavaScript

0 1 2 3 4 5 6 7 --- --- --- --- --- --- --- --- | 0 | 1 | 0 | --- --- ----------------------- | H | Name Length (7 ) | --- --------------------------- | Name String (Length octets) | --- --------------------------- | H | Value Length (7 ) | --- --------------------------- | Value String (Length octets) | -------------------------------

1
2
3
4
5
6
7
8
9
10
11
12
13
  0   1   2   3   4   5   6   7
--- --- --- --- --- --- --- ---
| 0 | 1 |           0           |
--- --- -----------------------
| H |     Name Length (7 )      |
--- ---------------------------
|  Name String (Length octets)  |
--- ---------------------------
| H |     Value Length (7 )     |
--- ---------------------------
| Value String (Length octets)  |
-------------------------------
 

这种情况与第 2 种情况类似,只是由于头部名称不在字典中,所以第一个字节固定为 01000000;接着申明名称是否使用哈夫曼编码及长度,并放上名称的具体内容;再申明值是否使用哈夫曼编码及长度,最后放上值的具体内容。例如下图中名称的长度是 5(0000101),值的长度是 6(0000110)。对其具体内容进行哈夫曼解码后,可得 pragma: no-cache 。

图片 12

客户端或服务端看到这种格式的头部键值对,会将其添加到自己的动态字典中。后续传输这样的内容,就符合第 1 种情况了。

4)头部名称在字典中,不允许更新动态字典

JavaScript

0 1 2 3 4 5 6 7 --- --- --- --- --- --- --- --- | 0 | 0 | 0 | 1 | Index (4 ) | --- --- ----------------------- | H | Value Length (7 ) | --- --------------------------- | Value String (Length octets) | -------------------------------

1
2
3
4
5
6
7
8
9
  0   1   2   3   4   5   6   7
--- --- --- --- --- --- --- ---
| 0 | 0 | 0 | 1 |  Index (4 )   |
--- --- -----------------------
| H |     Value Length (7 )     |
--- ---------------------------
| Value String (Length octets)  |
-------------------------------
 

这种情况与第 2 种情况非常类似,唯一不同之处是:第一个字节左四位固定为 0001,只剩下四位来存放索引了,如下图:

图片 13

这里需要介绍另外一个知识点:对整数的解码。上图中第一个字节为 00011111,并不代表头部名称的索引为 15(1111)。第一个字节去掉固定的 0001,只剩四位可用,将位数用 N 表示,它只能用来表示小于「2 ^ N – 1 = 15」的整数 I。对于 I,需要按照以下规则求值(RFC 7541 中的伪代码,via):

Python

if I < 2 ^ N - 1, return I # I 小于 2 ^ N - 1 时,直接返回 else M = 0 repeat B = next octet # 让 B 等于下一个八位 I = I (B & 127) * 2 ^ M # I = I (B 低七位 * 2 ^ M) M = M 7 while B & 128 == 128 # B 最高位 = 1 时继续,否则返回 I return I

1
2
3
4
5
6
7
8
9
if I < 2 ^ N - 1, return I         # I 小于 2 ^ N - 1 时,直接返回
else
    M = 0
    repeat
        B = next octet             # 让 B 等于下一个八位
        I = I (B & 127) * 2 ^ M  # I = I (B 低七位 * 2 ^ M)
        M = M 7
    while B & 128 == 128           # B 最高位 = 1 时继续,否则返回 I
    return I

对于上图中的数据,按照这个规则算出索引值为 32(00011111 00010001,15 17),代表  cookie 。需要注意的是,协议中所有写成(N )的数字,例如 Index (4 )、Name Length (7 ),都需要按照这个规则来编码和解码。

这种格式的头部键值对,不允许被添加到动态字典中(但可以使用哈夫曼编码)。对于一些非常敏感的头部,比如用来认证的 Cookie,这么做可以提高安全性。

5)头部名称不在字典中,不允许更新动态字典

JavaScript

0 1 2 3 4 5 6 7 --- --- --- --- --- --- --- --- | 0 | 0 | 0 | 1 | 0 | --- --- ----------------------- | H | Name Length (7 ) | --- --------------------------- | Name String (Length octets) | --- --------------------------- | H | Value Length (7 ) | --- --------------------------- | Value String (Length octets) | -------------------------------

1
2
3
4
5
6
7
8
9
10
11
12
13
  0   1   2   3   4   5   6   7
--- --- --- --- --- --- --- ---
| 0 | 0 | 0 | 1 |       0       |
--- --- -----------------------
| H |     Name Length (7 )      |
--- ---------------------------
|  Name String (Length octets)  |
--- ---------------------------
| H |     Value Length (7 )     |
--- ---------------------------
| Value String (Length octets)  |
-------------------------------
 

这种情况与第 3 种情况非常类似,唯一不同之处是:第一个字节固定为 00010000。这种情况比较少见,没有截图,各位可以脑补。同样,这种格式的头部键值对,也不允许被添加到动态字典中,只能使用哈夫曼编码来减少体积。

实际上,协议中还规定了与 4、5 非常类似的另外两种格式:将 4、5 格式中的第一个字节第四位由 1 改为 0 即可。它表示「本次不更新动态词典」,而 4、5 表示「绝对不允许更新动态词典」。区别不是很大,这里略过。

明白了头部压缩的技术细节,理论上可以很轻松写出 HTTP/2 头部解码工具了。我比较懒,直接找来 node-http2 中的 compressor.js 验证一下:

JavaScript

var Decompressor = require('./compressor').Decompressor; var testLog = require('bunyan').createLogger({name: 'test'}); var decompressor = new Decompressor(testLog, 'REQUEST'); var buffer = new Buffer('820481634188353daded6ae43d3f877abdd07f66a281b0dae053fad0321aa49d13fda992a49685340c8a6adca7e28102e10fda9677b8d05707f6a62293a9d810020004015309ac2ca7f2c3415c1f53b0497ca589d34d1f43aeba0c41a4c7a98f33a69a3fdf9a68fa1d75d0620d263d4c79a68fbed00177febe58f9fbed00177b518b2d4b70ddf45abefb4005db901f1184ef034eff609cb60725034f48e1561c8469669f081678ae3eb3afba465f7cb234db9f4085aec1cd48ff86a8eb10649cbf', 'hex'); console.log(decompressor.decompress(buffer)); decompressor._table.forEach(function(row, index) { console.log(index 1, row[0], row[1]); });

1
2
3
4
5
6
7
8
9
10
11
12
var Decompressor = require('./compressor').Decompressor;
 
var testLog = require('bunyan').createLogger({name: 'test'});
var decompressor = new Decompressor(testLog, 'REQUEST');
 
var buffer = new Buffer('820481634188353daded6ae43d3f877abdd07f66a281b0dae053fad0321aa49d13fda992a49685340c8a6adca7e28102e10fda9677b8d05707f6a62293a9d810020004015309ac2ca7f2c3415c1f53b0497ca589d34d1f43aeba0c41a4c7a98f33a69a3fdf9a68fa1d75d0620d263d4c79a68fbed00177febe58f9fbed00177b518b2d4b70ddf45abefb4005db901f1184ef034eff609cb60725034f48e1561c8469669f081678ae3eb3afba465f7cb234db9f4085aec1cd48ff86a8eb10649cbf', 'hex');
 
console.log(decompressor.decompress(buffer));
 
decompressor._table.forEach(function(row, index) {
    console.log(index 1, row[0], row[1]);
});

头部原始数据来自于本文第三张截图,运行结果如下(静态字典只截取了一部分):

{ ':method': 'GET', ':path': '/', ':authority': 'imququ.com', ':scheme': 'https', 'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0', accept: 'text/html,application/xhtml xml,application/xml;q=0.9,*/*;q=0.8', 'accept-language': 'en-US,en;q=0.5', 'accept-encoding': 'gzip, deflate', cookie: 'v=47; u=6f048d6e-adc4-4910-8e69-797c399ed456', pragma: 'no-cache' } 1 ':authority' '' 2 ':method' 'GET' 3 ':method' 'POST' 4 ':path' '/' 5 ':path' '/index.html' 6 ':scheme' 'http' 7 ':scheme' 'https' 8 ':status' '200' ... ... 32 'cookie' '' ... ... 60 'via' '' 61 'www-authenticate' '' 62 'pragma' 'no-cache' 63 'cookie' 'u=6f048d6e-adc4-4910-8e69-797c399ed456' 64 'accept-language' 'en-US,en;q=0.5' 65 'accept' 'text/html,application/xhtml xml,application/xml;q=0.9,*/*;q=0.8' 66 'user-agent' 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0' 67 ':authority' 'imququ.com'

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
{ ':method': 'GET',
  ':path': '/',
  ':authority': 'imququ.com',
  ':scheme': 'https',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0',
  accept: 'text/html,application/xhtml xml,application/xml;q=0.9,*/*;q=0.8',
  'accept-language': 'en-US,en;q=0.5',
  'accept-encoding': 'gzip, deflate',
  cookie: 'v=47; u=6f048d6e-adc4-4910-8e69-797c399ed456',
  pragma: 'no-cache' }
1 ':authority' ''
2 ':method' 'GET'
3 ':method' 'POST'
4 ':path' '/'
5 ':path' '/index.html'
6 ':scheme' 'http'
7 ':scheme' 'https'
8 ':status' '200'
... ...
32 'cookie' ''
... ...
60 'via' ''
61 'www-authenticate' ''
62 'pragma' 'no-cache'
63 'cookie' 'u=6f048d6e-adc4-4910-8e69-797c399ed456'
64 'accept-language' 'en-US,en;q=0.5'
65 'accept' 'text/html,application/xhtml xml,application/xml;q=0.9,*/*;q=0.8'
66 'user-agent' 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:41.0) Gecko/20100101 Firefox/41.0'
67 ':authority' 'imququ.com'

可以看到,这段从 Wireshark 拷出来的头部数据可以正常解码,动态字典也得到了更新(62 – 67)。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:头部压缩技术介绍,历史演变与Normalize

关键词: