前端代码获取文件大小_加快前端页面加载速度 性能优化之gzip

加快前端页面加载速度 性能优化之gzip

通常在看一些面试题问到前端有哪些性能优化手段的时候，可能会提到一个叫做gzip压缩的方法。正好最近在学习node文件流操作和zlib模块的时候，对gzip压缩有了一个新的认识。今天就和大家一起分享一下，gzip是什么，从浏览器请求到收到服务端数据发生了什么。

由于之前的题目《你知道前端性能优化gzip的工作原理吗？》有些歧义，我本来想说的工作原理是这个过程中发生了什么，而很多点进来的大佬想看到的是压缩算法实现。所以将标题改为《前端性能优化gzip初探》，可能后续会对gzip压缩实现的一些粗浅的认识补上。小弟不甚惶恐，请大家见谅。

什么是gzip

兄弟你听说winRAR吗？听说过360压缩，快压，好压吗？都听说过，那你听过GNUzip吗？

对，没有错，gzip就是GNUzip的缩写，也是一个文件压缩程序，可以将文件压缩进后缀为.gz的压缩包。而我们前端所讲的gzip压缩优化，就是通过gzip这个压缩程序，对资源进行压缩，从而降低请求资源的文件大小(详细的工作原理xnyh，后面会讲到)。

gzip压缩优化在业界的应用有多么普遍呢，基本上你打开任何一个网站，看它们的html，js，css文件都是经过gzip压缩的(即使js，css这类文件经过了混淆压缩之后，gzip仍然可以明显的优化文件体积。)。

Tips：通常gzip对纯文本内容可压缩到原大小的40%。但png、gif、jpg、jpeg这类图片文件并不推荐使用gzip压缩(svg是个例外)，首先经过压缩后的图片文件gzip能压缩的空间很小。事实上，添加标头，压缩字典，并校验响应体可能会让它更大。

比如现在，你正在访问的掘金，打开调试工具，在网络请求Network中，选择一个js或css，都能在Response Headers中找到 content-encoding: gzip 键值对，这就表示了这个文件是启用了gzip压缩的。

gzip压缩过程

上面我们可以看到，这里是掘金网站引入的一个growingIO数据分析的文件，经过了gzip压缩，大小是25.3K。现在我们把这个文件下载下来，建一个没有开启gzip的本地服务器，看看未开启gzip压缩这个文件是多大(其实下载下来就已经能看到文件大小了，是88.73k)。

此处我们用原生node写一个服务，便于我们学习理解，目录和代码如下：

const http = require("http");const fs = require("fs");const server = http.createServer((req, res) => { const rs = fs.createReadStream(`static${req.url}`); //读取文件流 rs.pipe(res); //将数据以流的形式返回 rs.on("error