Brotli 研究实践

简介: 通过配置brotli压缩来提高http请求的压缩率,降低出口带宽,提升访问速度。

一、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这些。

1.png

支持情况查看:https://caniuse.com/?search=brotli

网站支持地址检测:https://www.giftofspeed.com/gzip-test/

2.2、服务端支持情况

服务端 支持 描述
nginx ngx_brotli

通过brotli模块实现:https://github.com/google/brotli.git

https://github.com/google/ngx_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、网上搜集的性能数据

2.png

更详细的一些测试性能数据参考地址: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;



相关文章
|
存储 Java 测试技术
记一次堆内外内存问题的排查和优化
记一次堆内外内存问题的排查和优化
652 0
|
API Apache 数据库
Flink CDC 3.0 正式发布,详细解读新一代实时数据集成框架
Flink CDC 于 2023 年 12 月 7 日重磅推出了其全新的 3.0 版本 ~
108819 8
 Flink CDC 3.0 正式发布,详细解读新一代实时数据集成框架
|
编解码 Linux 编译器
使用 C++ 方式实现 GBK 到 UTF-8 转码 (win / linux)
使用 C++ 的方式处理在 Windows 平台和 Linux 平台,编码字符集从 GBK 到 UTF-8 转码,C++ 存在多种方式实现
3824 1
|
算法 Java 测试技术
Java实现数据压缩所有方式性能测试
Java实现数据压缩所有方式性能测试
754 0
|
6月前
|
自然语言处理 前端开发 安全
指南:Claude 3.7 怎么样?国内如何使用Claude 3.7 Sonnet?
本文主要介绍了Claude 3.7 Sonnet模型的发布教你如何订阅使用Claude 3.7 Sonnect及其新功能,特别是Claude Code工具的推出。
3926 7
|
存储 算法 Linux
Gzip的压缩级别
【4月更文挑战第29天】压缩级别
1027 1
|
存储 编解码 算法
ans介绍学习
【9月更文挑战第5天】
1065 13
|
11月前
|
IDE API 开发工具
沉浸式集成阿里云 OpenAPI|Alibaba Cloud API Toolkit for VS Code
Alibaba Cloud API Toolkit for VSCode 是集成了 OpenAPI 开发者门户多项功能的 VSCode 插件,开发者可以通过这个插件方便地查找API文档、进行API调试、插入SDK代码,并配置基础环境设置。我们的目标是缩短开发者在门户和IDE之间的频繁切换,实现API信息和开发流程的无缝结合,让开发者的工作变得更加高效和紧密。
沉浸式集成阿里云 OpenAPI|Alibaba Cloud API Toolkit for VS Code
|
11月前
|
机器学习/深度学习 前端开发 JavaScript
WebAssembly:让前端性能突破极限的秘密武器
WebAssembly(简称 WASM)作为前端开发的性能加速器,能够让代码像 C++ 一样在浏览器中高速运行,突破了 JavaScript 的性能瓶颈。本文详细介绍了 WebAssembly 的概念、工作原理以及其在前端性能提升中的关键作用。通过与 JavaScript 的配合,WASM 让复杂运算如图像处理、3D 渲染、机器学习等在浏览器中流畅运行。文章还探讨了如何逐步集成 WASM,展示其在网页游戏、高计算任务中的实际应用。WebAssembly 为前端开发者提供了新的可能性,是提升网页性能、优化用户体验的关键工具。
5156 2
WebAssembly:让前端性能突破极限的秘密武器
|
存储 算法 NoSQL
Zstandard (zstd)压缩算法在JAVA上的使用
Zstandard (zstd)压缩算法在JAVA上的使用
1637 0