资讯专栏INFORMATION COLUMN

前端性能优化(3)--使用gzip

davidac / 2529人阅读

摘要:之后看了下之类的网站,发现图片之类的文件,确实都是没有启动的。综上所述,再部署前端资源的时候,建议为资源开启即可,不需要为图片资源启用。

话不多说,直接上两张图对比下
[未启用gzip的Size]

[用了gzip以后]

html文件 5.2/10.5 50.5%

css文件 1,9/5.4 35.2%

png图片 101/102 几乎没有变化

js文件 31.6/99.8 31.7%(代码压缩过) 12.8/54.7 23.4%(代码没压缩过)

附nginx配置

http {
    ...
    gzip  on; // 开启gzip
    gzip_min_length 1k; // 最小1k的文件才使用gzip
    gzip_buffers 4 8k; // 代表以8k为单位,按照原始数据大小以8k为单位的4倍申请内存
    gzip_comp_level 5; // 1 压缩比最小处理速度最快,9 压缩比最大但处理最慢(传输快但比较消耗cpu)
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; // 支持的文件类型
    gzip_disable "MSIE [1-6]."; // IE6一下 Gzip支持的不好,故不实用gzip
    ...
}

搜索了相关的资料,说是图片本身已经是压缩过了的,gzip并没有多大用处,反而增加了服务器的负担,某些情况下,文件的大小还会变大,所以并不推荐使用。之后看了下baidu之类的网站,发现图片之类的文件,确实都是没有启动gzip的。但意外的发现bmp图片(不多见)类型的,压缩效率确实很高,我试了一张图片,3.8M的,用gzip之后,大小为992k,压缩率为25.5%,倒是很高,不知道是因为原图没压缩过的原因还是其他,但我一时找不到压缩bmp的工具,所以没法验证,大家自己实际应用的时候验证下再用。

综上所述,再部署前端资源的时候,建议为html, js, css资源开启即可,不需要为图片资源启用gzip。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58169.html

相关文章

  • Java Web 前端性能优化(二)

    摘要:在高性能服务器上该配置将非常有用。小结前端高性能优化一二总结了前端性能问题定位以及图片优化的几种方式,将它们归结起来,在读者需要的时候,可以查看本文的内容,相信按照本文的方法,可以辅助读者进行前端性能优化。 一.上文回顾 上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码、GZIP压缩、懒加载与预...

    yvonne 评论0 收藏0
  • 前端性能优化gzip

    摘要:协议上的编码是一种用来改进应用程序性能的技术。目前主流的浏览器等都支持该协议。启用或禁用响应。可接受的值范围为到。设置将被压缩的响应的最小长度。长度仅由响应头字段确定。而里面的只是表示前端用户浏览器支持的压缩方式。 gzip是GNUzip的缩写,它是一个GNU自由软件的文件压缩程序。它最早由Jean-loup Gailly和Mark Adler创建,用于UNⅨ系统的文件压缩。我们在Li...

    jzzlee 评论0 收藏0
  • PHP 进阶之路 - 亿级 pv 网站架构实战之性能压榨

    摘要:业务和架构不分家,架构是建立在对业务的理解之上的。主键最好保持顺序递增,随机主键会导致聚簇索引树频繁分裂,随机增多,数据离散,性能下降。没有索引的更新,可能会导致全表数据都被锁住。 本博客并非全部原创,其实是一个知识的归纳和汇总,里面我引用了很多网上、书上的内容。也给出了相关的链接。 本文涉及的知识点比较多,大家可以根据关键字去搜索相关的内容和购买相应的书籍进行系统的学习。不对的地方...

    SnaiLiu 评论0 收藏0
  • 前端性能优化与上线

    摘要:看下状态可以看到我已经有一些镜像了我已经删除了拉镜像正常即可,中间那段是中国镜像源,我们成功下来了的镜像。攻破像我这样屌丝的服务器一般都买的,大的资源文件不住,一个动辄的文件这很蛋疼,不上很难受。 4000字长文,多图预警!!!流量慎入!! 性能优化 - 屌丝前端性能优化、上线一条龙 大家好我又来了,本章给大家带来的内容是:上线和上线后的性能优化 项目地址 实战预览地址 实战项目地址...

    wupengyu 评论0 收藏0
  • 「Vue实践」武装你的前端项目

    摘要:所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中,需要用实例的方法清除可当你有多个时,就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积,传输速度更快。本文目录 接口模块处理 Vue组件动态注册 页面性能调试:Hiper Vue高阶组件封装 性能优化:eventBus封装 webpack插件:真香 本文项目基于Vue-Cli3,想知...

    曹金海 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<