数据压缩
减少不必要的资源加载之后，我们将剩下的资源进行压缩。
为了解释数据压缩的原则，我们创建一个txt文本，内容如下：
# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 04/04/14
AAAZZBBBBEEEMMM EEETTTAAA现在200字节，怎样压缩？
- 注释方便程序员的阅读和理解，但是对于实际信息没有任何帮助，所以删除之。
- 我们可以用一种更加有效的方式编码headers(上例中也就是format和date)——我们不知道是不是所有的消息都有format和date类型的头部，如果是的话，我们可以将其转化成ID来表示相应的意思。
我们可以将重复的内容压缩的更加高效，例如:将“AAA”变成"3A"，或者是三个A的序列等。
使用我们上面的技术压缩之后变成了下面这样的：
format: secret-cipher
date: 04/04/14
3A2Z4B3E3M 3E3T3A
上面只有56个字节，意味着我们压缩了72%。
上面解释了压缩的原则和压缩的基本原理。针对不同的压缩内容有不同的压缩技术，不同的压缩技术有不同的压缩算法。让我们开始吧。
极简化: 预处理和针对特定内容优化
不影响实际意义的情况下减少大小：
<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container { font-size: 120% }
.awesome-container { width: 50% }
</style>
</head>
<body>
<!-- awesome container content: START -->
<div>…</div>
<!-- awesome container content: END -->
<script>
awesomeAnalytics(); // beacon conversion metrics
</script>
</body>
</html>
- 将各种类型注释都去除，CSS (
/* … */), HTML (<!-- … -->),和 JavaScript (// …)注释. - 将两个相同个css类样式的定义合并成一个，不影响表现效果，还减少了文本大小.
- 空格 (空格键和tab键产生的空格) 去除。
<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>
上面将内容从406字节减少到150字节，虽然压缩后的代码变得不可读，但是我们可以将原来的代码设置成“开发者版本，将压缩后的代码发布到网站上。
使用GZIP进行文本压缩
- GZIP 基于文本内容（ CSS, JavaScript, HTML）压缩表现的最好：
- 所有现代浏览器都只是GZIP压缩，并且给自动请求它
- 你的服务器需要设置来允许GZIP压缩
查看HTML Boilplate项目，包含了 sample configuration files，展示了主流服务器设置允许GZIP的样本操作，压缩后如下
打开Chrome开发者工具下Network面板下的“Size/Content”：Size表示传输时候的文件大小，content表示没有压缩的文件大小。
虽然大部分网站都会进行自动压缩，但是有些CDN需要特别注意。所以，使用这个网站来进行检测吧。
来源：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer?hl=en
时间： 2024-11-05 16:11:30