前端性能优化三十八：花裤衩模板gzip

1. why?

①. 如果存在很多过大文件时,会导致可能阻塞后面的进程.

②. 减少包的大小:
    a. 更快的加载速度以及更好的用户体验.

(1). gzip:

①. 是一种 http 请求优化方式:
    a. 通过减少文件体积来提高加载速度
    b. 对于用户量多的网站,开启 gizp 压缩会大大降低服务器压力,提高加载速度、降低服务器流量成本.
    c. 节省了服务器的网络带宽,节约的流量非常可观.

②. 必须浏览器与服务器都支持gzip.

③. gzip算法特性:
    a. 代码相似率越大压缩效率越高.

(2). 工作原理图:

①. 浏览器发送请求:
    a. 在 request header 中设置属性 accept-encoding:gzip
    b. 表示浏览器支持 gzip.

②. 服务器收到请求后:
    a. 判断浏览器是否支持 gzip:
       (1). 如果支持 gzip,则向浏览器传送压缩过的内容.
       (2). 不支持则向浏览器发送未经压缩的内容.
    b. Response headers返回包含 content-encoding:gzip.

③. 浏览器接收响应后判断内容是否被压缩,如果被压缩则解压缩显示页面内容:
    a. 浏览器先解压再使用,对于用户是无感知的.

---

2. 两种 gzip 压缩方式:

①. webpack打包生成 .gz 文件:
    a. 通过 webpack 配置生成对应的 .gz 文件.
    b. 浏览器请求 xx.js/css 等文件时,服务器返回对应的 xxx.js.gz 文件.

②. 服务器实时在线将请求 xx.js 文件进行gzip压缩后传输给浏览器:
    a. 压缩文件过程本身有额外开销.
    b. 服务器压缩的时间开销和 CPU 开销(及浏览器解析压缩文件的开销)为代价,来节省传输过程中的时间开销.