打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
浅谈前端性能优化(二)——对HTTP传输进行压缩

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传输进行压缩。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
nginx实现tomcat动静分离详解
HTTP协议中你必须知道的三种数据格式
HTTP协议:大文件传输
15、Nginx-网页压缩传输
HTTP 响应字段 Transfer-Encoding 的作用介绍
HTTP 协议中你必须知道的三种数据格式
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服