zoukankan      html  css  js  c++  java
  • 浅谈前端性能优化(二)——对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传输进行压缩。
    ---------------------
    作者:筱葭
    来源:CSDN
    原文:https://blog.csdn.net/zhouziyu2011/article/details/71329379
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    发现个atan2的正确使用方式
    Forward+ Shading架构
    fatal: unable to connect to gitee.com: gitee.com[0: 180.97.125.228]: errno=Unknown error 解决方案
    HDFS HA(高可用性)集群规划
    如何使用RTP引擎对语音编码进行转码
    关于 Angular 应用 tsconfig.json 中的 target 属性
    浅谈 Orbeon form builder 的权限控制
    关于 Angular 应用 tsconfig.json 中的 lib 属性
    orbeon form 通过 url 的方式同第三方应用集成的开发明细
    orbeon form 的配置介绍
  • 原文地址:https://www.cnblogs.com/dreamingbaobei/p/9815871.html
Copyright © 2011-2022 走看看