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

Bertha 。 2022-06-16 05:47 306阅读 0赞

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

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

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

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

3、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查看

4、压缩方式选择：

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

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

5、如何使用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资源来做无用功。

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

①　优点：减少HTTP响应时间，提升传输效率。

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

随着硬件性能不断提高，上述问题正在不断弱化，国内外大型网站都对HTTP传输进行压缩。

发表评论取消回复

表情：

评论列表（有 0 条评论，306人围观）

还没有评论，来说两句吧...

相关阅读

相关关于HTTP超文本传输协议浅谈

![293d35837ced78f790a243342c363168.jpeg][] 什么是协议协议是一种约定，规定好信息的传输格式，如果发送⽅按照这种请求格式发送信息

清疚/ 2024年04月01日 08:54/ 0 赞/ 88 阅读

相关 App性能优化浅谈

前言前段时间给公司的小伙伴们进行了关于app性能优化的技术分享，这里我稍微整理一下也给大家分享一下，关于性能优化这个话题很大，涉及面可以很广，也可以很深入，本人能力有限

曾经终败给现在/ 2022年08月18日 11:50/ 0 赞/ 307 阅读

相关浅谈前端性能优化

1、什么是前端性能优化？从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 2、为什么

╰半夏微凉°/ 2022年06月17日 03:37/ 0 赞/ 301 阅读

相关浅谈前端性能优化（九）——DNS解析优化

1、DNS缓存 DNS查询过程大约消耗20毫秒，在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响，因此需要用到DNS缓存。

淡淡的烟草味﹌/ 2022年06月16日 05:52/ 0 赞/ 411 阅读

相关浅谈前端性能优化（八）——cookie优化

cookie存储在客户端，伴随着HTTP请求在浏览器和服务器之间传递。除了key-value外，cookie还有max-age，path，domain和httponly属性。

小灰灰/ 2022年06月16日 05:52/ 0 赞/ 346 阅读

相关浅谈前端性能优化（七）——图像优化

1、常用的图像类型 1) gif: 适用于动画效果。 2) jpg: 使用有损压缩，将图片的每个像素分解成8\8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附

不念不忘少年蓝@/ 2022年06月16日 05:52/ 0 赞/ 243 阅读

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

1、前端性能优化的一点：对js、css、图片等进行压缩，尽可能减小文件的大小，减少文件下载的时间，从而减少网页响应的时间。 2、前端性能优化的另一点：对HTTP

Bertha 。/ 2022年06月16日 05:47/ 0 赞/ 307 阅读

相关浅谈前端性能优化（五）——减少HTTP请求数

1、图片地图图片地图允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。 1) 优点：把多张图片整合到一张图片中，虽然文件的总体大小不变，但可以减

我会带着你远行/ 2022年06月15日 21:07/ 0 赞/ 246 阅读

相关浅谈HTTPS安全传输原理

　　今天分享的内容是HTTPS安全传输的原理。大家都知道HTTP有很多缺点，比如：通信使用明文，内容可能会被盗窃。不验证通信方身份，因此有可能遭遇伪装。

港控/mmm°/ 2022年06月12日 11:22/ 0 赞/ 238 阅读

相关浅谈网站性能之前端性能优化

> 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能

悠悠/ 2022年04月23日 12:32/ 0 赞/ 329 阅读