一、Brotli简介
Brotli最初发布于2015年,用于网络字体的离线压缩,brotli这个名字来自瑞士的烘培产品。Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本,特别侧重于HTTP压缩。其中的编码器被部分改写以提高压缩比,编码器和解码器都提高了速度,流式API已被改进,增加更多压缩质量级别。新版本还展现了跨平台的性能改进,以及减少解码所需的内存。
与常见的通用压缩算法不同,Brotli使用一个预定义的120千字节字典。该字典包含超过13000个常用单词、短语和其他子字符串,这些来自一个文本和HTML文档的大型语料库。预定义的算法可以提升较小文件的压缩密度。Brotli是基于LZ77算法的一个现代变体、霍夫曼编码和二阶上下文建模等方式进行数据压缩。一个 Brotli 压缩⽂件由 元块(meta-blocks) 集合组成。每个元块最多可容纳 16MiB,由两部分组成:一个 数据部分(data part),它存储 LZ77 压缩的放⼊块,以及一个 标题(header),每个块的压缩遵循经典的 LZ77 压缩⽅案并由计算具有良好的熵的 LZ77 解析和计算 LZ 短语的简洁编码这两个主要阶段组成。Brotli压缩数据格式的规范在RFC7932中定义,使用brotli取代deflate,gzip来对文本文件压缩通常可以增加20%的压缩密度,而压缩与解压缩速度则大致不变。与其他压缩算法相比(如zip,gzip等),无论是压缩时间,还是压缩体积上看,它都有着更高的效率使用Brotli进行流压缩的内容编码类型已被提议使用“br”。Brotli 的编码器库提供了 12 个质量级别(从 0 到 11)。它们是⽤压缩速度换取压缩效率的压缩模式:更⾼质量的级别速度较慢,但会产⽣更好的压缩⽐。
简言之,Brotli是开源的一种新型压缩算法,Brotli压缩比Gzip压缩性能更好。开启Brotli压缩功能后,CDN节点会对资源进行智能压缩后返回,缩小传输文件大小,提升文件传输效率,减少带宽消耗。
- 当源站文件的大小在1 KB-10 MB时,您可以使用智能压缩或Brotli压缩来压缩文件(即1 KB以下、10 MB以上大小的文件不做压缩)。
- Brotli压缩支持的文件类型有text/xml、text/plain、text/css、application/javascript、application/x-javascript、application/rss+xml、text/javascript、image/tiff、image/svg+xml、application/json、application/xml。
- 服务端响应携带响应头
Content-Encoding: br
:服务端响应的内容是经过Brotli压缩后的资源。 - 客户端请求携带请求头
Accept-Encoding: br
:客户端希望获取对应资源时进行Brotli压缩。 - github地址:
https://github.com/google/ngx_brotli#brotli_ratio
https://github.com/google/brotli
二、Brotli的发展情况
2.1、浏览器端支持情况,
目前国内外的主流的浏览器都已经支持br压缩,比较早期的浏览器版本就不支持,像IE这些。
支持情况查看:https://caniuse.com/?search=brotli
网站支持地址检测:https://www.giftofspeed.com/gzip-test/
2.2、服务端支持情况
服务端 | 支持 | 描述 |
nginx | ngx_brotli | 通过brotli模块实现:https://github.com/google/brotli.git |
apache | mod_brotli | 文档说明:https://www.lanmper.cn/apache/t8858 |
java | commons-compress | 通过https://commons.apache.org/proper/commons-compress/ 实现 |
node.js | express-static-gzip | 可以通过https://www.npmjs.com/package/express-static-gzip 来支持 |
2.3、CDN及公有云支持情况
厂商 | ||||||
国内 | 火山云 | 华为云 | 天翼云 | 网宿 | 腾讯云 | |
国外 | cloudflare | aws | azure | 谷歌云 | ||
其他 | AMD cpu支持 |
2.4、手机端的支持情况
类型 | |||||||
浏览器 | chrome | safari | uc | 华为浏览器 | qq浏览器 | 百度浏览器 | 微信浏览器 |
主流APP | 目前大部份app的都基于系统的浏览器内核进行调用,目前主流的手机端浏览器均已支持。而少部分app是基于自己开发的浏览器,这部分的支持情况暂不清晰。 而针对app开发这一块可以参考: https://blog.csdn.net/weixin_44158429/article/details/130252308 https://blog.csdn.net/weixin_39397471/article/details/126135907 |
2.5、主流网站的支持情况
网站 | |||||||||
国内 | 百度 | 淘宝 | 京东 | 汽车之家 | 今日头条 | 知乎 | CSDN | 微信 | bilibili |
三、性能及测试数据
3.1、网上搜集的性能数据
更详细的一些测试性能数据参考地址:https://quixdb.github.io/squash-benchmark/unstable/
3.2、实际压测的性能数据
【1】html类型测试:
类型 |
压缩机级别 |
源文件 |
压缩后 |
平均请求时间 |
压缩比【压缩后数据大小/源数据大小】 |
gzip |
1 |
1084k |
154k |
38ms |
14.206% |
gzip |
5 |
1084k | 132k |
46ms |
12.177% |
gzip |
9 |
1084k |
127k |
51ms |
11.715% |
brotli |
1 |
1084k |
174k |
33ms |
16.051% |
brotli |
5 |
1084k |
97.5k |
43ms |
8.994% |
brotli |
6 |
1084k |
96k |
52ms |
8.856% |
brotli |
9 |
1084k | 90.9k |
90ms |
8.385% |
brotli |
11 |
1084k | 82.8k |
2.52s |
6.202% |
注:html 的gzip 9级别转brotli 6级别,可以节省24.41%左右的带宽。
【2】js类型测试:
类型 |
压缩机级别 |
源文件 |
压缩后 |
平均请求时间 |
压缩比【压缩后数据大小/源数据大小】 |
gzip |
9 |
1188k |
354k |
105ms |
29.797% |
brotli |
5 |
1188k | 331k |
103ms |
27.861% |
brotli |
6 |
1188k |
326k |
115ms |
27.441% |
brotli |
9 |
1188k |
320k |
162ms |
26.936% |
注:js gzip 9级别转brotli 6级别,可以节省7.90%左右的带宽。
【3】css类型测试:
类型 |
压缩机级别 |
源文件 |
压缩后 |
平均请求时间 |
压缩比【压缩后数据大小/源数据大小】 |
gzip |
9 |
352k |
51.1k |
41ms |
14.517% |
brotli |
5 |
352 |
47.3k |
31ms |
13.437% |
brotli |
6 |
352k |
45.8k |
33ms |
13.011% |
brotli |
9 |
352k |
43.6k |
50ms |
12.386% |
注:gzip 9级别转brotli 6级别,可以节省10.371%左右的带宽。
www页面元素构成流量比例:
类型 | 流量占比 |
html | 87% |
js | 9% |
css | 1% |
图片 | 2.9% |
其他 | 0.1% |
其他content-type类型由于在www机页面中的占比不超过0.01%,未对其进行测试。
四、brotli的配置及使用说明
5.1、安装
第一步:
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli/deps
rm -rf brotli
git clone https://github.com/google/brotli.git
cd ngx_brotli
git submodule update --init
第二步:
nginx 编译安装是加上参数:--add-module=../ngx_brotli/
注:代码地址:https://github.com/google/ngx_brotli#brotli_ratio
https://github.com/google/brotli
5.2、配置
在nginx.conf的gzip配置之前贴上该段配置。
brotli on;
brotli_comp_level 5;
brotli_buffers 16 8k;
brotli_min_length 20;
brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml image/tiff;