前端性能优化之gzip 1
背景
如果你是个前端开发人员,你肯定知道线上环境要把js,css,图片等压缩,尽量减少文件的大小,提升响应速度,特别是对移动端,这个非常重要。
压缩
压缩方式
前端压缩的方式很多,依赖java的有ant工具,前端自己打包压缩的有grunt,gulp,webpack,这些压缩也很重要,基本上能压缩50%以上,下面我们对压缩文件来个对比,如图所示,这是未压缩的
这是压缩后的
高能预警!!!gzip能在压缩的基础上再进行压缩50%以上!!!
gzip压缩原理
但是不是每个浏览器都支持gzip的,如果知道客户端是否支持gzip呢,请求头中有个Accept-Encoding来标识对压缩的支持。客户端http请求头声明浏览器支持的压缩方式,服务端配置启用压缩,压缩的文件类型,压缩方式。当客户端请求到服务端的时候,服务器解析请求头,如果客户端支持gzip压缩,响应时对请求的资源进行压缩并返回给客户端,浏览器按照自己的方式解析,在http响应头,我们可以看到content-encoding:gzip,这是指服务端使用了gzip的压缩方式。
那么怎么看有没有用gzip压缩的文件呢,打开f12,查看network,按照下面的方式过滤
content-encoding是gzip的话就说明返回的是gzip
如何启用gzip
前面说过了,启用gzip需要客户端和服务端的支持,如果客户端支持gzip的解析,那么只要服务端能够返回gzip的文件就可以启用gzip了,现在来说一下几种不同的环境下的服务端如何配置
node端
node端很简单,只要加上compress模块即可,代码如下
var compression = require('compression')
var app = express();//尽量在其他中间件前使用compression
app.use(compression());
这是基本用法,如果还要对请求进行过滤的话,还要加上
app.use(compression({filter: shouldCompress}))function shouldCompress (req, res) {if (req.headers['x-no-compression']) {// 这里就过滤掉了请求头包含'x-no-compression'return false}return compression.filter(req, res)
}
更多用法请移步compression文档
如果用的是koa,用法和上面的差不多
const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());
因为node读取的是生成目录中的文件,所以要先用webpack等其他工具进行压缩成gzip,webpack的配置如下
const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',// 目标文件名algorithm: 'gzip',// 使用gzip压缩test: new RegExp('\\.(js|css)$' // 压缩 js 与 css),threshold: 10240,// 资源文件大于10240B=10kB时会被压缩minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩})
);
plugins是webpack的插件
tomcat
tomcat的配置如下
找到tomcat的server.xml文件,找到其中Connector节点然后进行配置修改,具体配置如下
<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>
参数说明:
- compression="on" 打开压缩功能
- compressionMinSize="2048" 启用压缩的输出内容大小,当被压缩对象的大小>=该值时才会被压缩,这里面默认为2KB
- noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器,不启用压缩
- compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 压缩类型
注意:tomcat7以后,js文件的mimetype类型变为了application/javascript,而在tomcat7以下则为text/javascript;具体的tomcat7定义的类型可以在:conf/web.xml文件中找到。
可以在web.xml下搜索,如我搜索javascript会找到如下代码
<mime-mapping><extension>js</extension><mime-type>application/javascript</mime-type>
</mime-mapping>
切记上面的类型不能配置错了,如果配置错了压缩是不会起作用的。
nginx
gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{…..}之间
- gzip on
on为启用,off为关闭 - gzip_min_length 1k
设置允许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。 - gzip_buffers 4 16k
获取多少内存用于缓存压缩结果,‘4 16k’表示以16k*4为单位获得 - gzip_comp_level 5
gzip压缩比(1~9),越小压缩效果越差,但是越大处理越慢,所以一般取中间值; - gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
对特定的MIME类型生效,其中'text/html’被系统强制启用 - gzip_http_version 1.1
识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码 - gzip_vary on
启用应答头"Vary: Accept-Encoding" - gzip_proxied off
nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息) - gzip_disable msie6
(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库
以上代码可以插入到 http {...}整个服务器的配置里,也可以插入到虚拟主机的 server {...}或者下面的location模块内
前端性能优化之gzip 1相关推荐
- 前端性能优化之gzip
gzip是GNUzip的缩写,它是一个GNU自由软件的文件压缩程序.它最早由Jean-loup Gailly和Mark Adler创建,用于UNⅨ系统的文件压缩.我们在Linux中经常会用到后缀为.g ...
- 前端性能优化之 gzip+cache-control
刚刚在Node.js环境下使用gzippo模块进行了测试. 使用gzip的压缩率惊人的好,达到了50%以上. 再加上express的staticCache,配合cache-control max-ag ...
- 前端性能优化之gzip压缩(压缩js、css、HTML,千万不能压缩图片!)
gzip主要用来压缩html,css,javascript等静态文本文件,gzip 压缩的比率通常在3~10 倍之间,压缩后的体积能达到只有原本的30%左右,这样就能大大节省服务器的网络带宽和大大提升 ...
- 前端性能优化:启用 gzip
大家好,我是前端西瓜哥.今天带大家学习如何启用 gzip 来做前端性能优化. HTTP 上的 gzip gzip 是一种优秀的压缩算法,我们可以在 HTTP 请求上对一些文本文件,设置 gzip 压缩 ...
- 深度讲解:web前端性能优化
一.课程简介: 1.课程大纲 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机 ...
- 大型网站技术架构(3):WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- 前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于 性能优化 是个大的面,这篇文章主要涉及到 前端 的几个点,如 前端性能优化 的流程.常见技术手段.工具等. 提及 前端性能优化 ,大家应该都会想到 雅虎军 ...
- 移动H5前端性能优化指南[转]
移动H5前端性能优化指南 米随随2015.01.23 移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
- 前端性能优化最佳实践(转)
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 前端性能优化:使用Data URI代替图片SRC
日期:2013-7-6 来源:GBin1.com 提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量.减少请求可以让你的网站加载更快,而其中一 ...
最新文章
- 趣题:寻找出现了奇数次的数
- 《JavaScript DOM 编程艺术》 读书笔记
- Jupyter notebook中用python matplotlib ax3.plot_surface绘制的三维图(3D图)(三维函数)无法旋转解决办法(%matplotlib notebook)
- 【机器学习】机器学习模型解释神器:Shapash
- 服务器之select
- 【转】CT球管小知识--热容量
- 基于android的团购app设计与实现,基于Android的掌上团购App设计与实现
- 通过CSS样式隐藏百度版权标志
- 缩短与时间服务器同步时间,局域网内时间服务器架设与客户端设置
- C语言九九乘法表的五种输出形式(完整,左上,左下,右上,右下)
- 【网络科普】NAS和SAN - 网络附加存储和存储区域网络
- 共享打印机服务器脱机状态,共享打印机脱机无法打印
- AI软件快捷键操作大全
- 2048游戏DQN实验
- CF Canada Cup 2016 D 优先队列
- 关于解决缓慢渐变维的3种方式
- 对cross-env的理解
- 滑膜炎的表现、诊断与治疗
- 请收下这份秘籍: 这里有关于申请 gTech 职位所需知道的一切
- Java-编写一个类 Book,代表图书
热门文章
- 偷梁换柱“Windows 11安装包”竟成了恶意程序?
- Matplotlib 绘图库从入门到精通
- 今天分享固态硬盘安装以及Win7系统安装流程
- 中文打字速度测试软件hztest_中文打字速度测试软件官方版
- 渗透测试常见弱口令汇总
- openlayers 地图上加图标_Openlayers绘制地图标注
- MYSQL索引3:聚簇索引和非聚簇索引
- matlab 声明gpu,使用MATLAB轻松享受GPU的强大功能
- 老人步履蹒跚,警惕骨关节炎
- xdg在Linux中的用法,linux-如何使用sudo获取XDG变量?