浅谈前端性能优化（二）——对HTTP传输进行压缩

一、前端性能优化的一点：

对js、css、图片等进行压缩，尽量减少文件的大小，减小文件下载的时间，从而减小网页响应的时间。

 

二、前端性能优化的另外一点：

对HTTP传输进行压缩，即在js，css、图片等资源已经压缩的基础上（其实，文件的压缩与否都可，文件的压缩跟HTTP传输过程的压缩不要紧），在HTTP传输过程当中的再次压缩。

 

三、HTTP1.1的Accept-Encoding和content-Encoding：

从HTTP1.1开始，客户端能够经过Accept-Encoding头来声明浏览器支持的压缩方式，服务端经过content-Encoding来启用压缩，配置压缩的文件类型，压缩方式。当客户端的请求到达服务器，服务器对资源进行压缩后，返回给客户端，客户端按照相应的方式进行解析。

eg：

客户端（HTTP请求头）——accept-encoding: gzip, deflate, sdch, br

服务器（HTTP响应头）——content-encoding:gzip

压缩验证查看效果：

文件传输前的大小——经过属性查看

文件传输过程当中的大小——经过Network中的Size查看

 

四、压缩方式选择：

gzip是GUNzip的缩写，使用无损压缩，压缩效果最佳，已经成为使用最为广泛、支持的浏览器最多的数据压缩格式。

天猫、淘宝、京东、苏宁、腾讯、百度等大型网站都使用gzip压缩方式。

 

五、如何使用gzip压缩

客户端不用作任何配置，在服务端配置便可，不一样服务器的配置方法也不尽相同。

以tomcat服务器的配置为例：

找到tomcat安装目录下的conf文件夹下的server.xml文件，进行以下配置，重启tomcat便可：

①　compress="on" ：表示开启压缩。

②　compressionMinSize="2048"：表示对大于2KB的文件进行压缩

③　compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/png,image/jpeg,image/gif"：表示将进行压缩的文件类型，对js，css，图片压缩能够大大提高压缩效果。

注意：不该该对图片进行再压缩，由于图片自己已经被压缩过，若是再进行gzip压缩，可能获得的结果是和图片自己大小相差不大，纯粹是浪费服务器的CPU资源来作无用功。
 

六、对HTTP传输内容进行压缩的优、缺点：

①　优势：减小HTTP响应时间，提高传输效率。

②　缺点：压缩过程占用服务器额外的CPU周期，客户端也要对压缩文件进行解压缩，这也须要占用部分时间。