如果你是个前端开发人员,你肯定知道线上环境要把js,css,图片等压缩,尽量减少文件的大小,提升响应速度,特别是对移动端,这个非常重要。常用的前端性能优化方法有如下几种
一、减少http请求
二、css sprites
三、使用cdn加速
四 、css,js代码压缩
五、将样式表放在头部,将脚本放在底部
六 精简javascript
七 避免重定向
八 客户端和服务端开启gzip
下面我们来着重讲一下gzip
前端压缩的方式很多,依赖java的有ant工具,前端自己打包压缩的有grunt,gulp,webpack,这些压缩也很重要,基本上能压缩50%以上,下面我们对压缩文件来个对比,如图所示,这是未压缩的
这是压缩后的
高能预警!!!gzip能在压缩的基础上再进行压缩50%以上!!!
但是不是每个浏览器都支持gzip的,如果知道客户端是否支持gzip呢,请求头中有个accept-encoding来标识对压缩的支持。客户端http请求头声明浏览器支持的压缩方式,服务端配置启用压缩,压缩的文件类型,压缩方式。当客户端请求到服务端的时候,服务器解析请求头,如果客户端支持gzip压缩,响应时对请求的资源进行压缩并返回给客户端,浏览器按照自己的方式解析,在http响应头,我们可以看到content-encoding:gzip,这是指服务端使用了gzip的压缩方式。
那么怎么看有没有用gzip压缩的文件呢,打开f12,查看network,点击“use large rows”表情来查看更多信息。包含了压缩以后的大小和源文件的大小。
奇迹般的,主页从187kb压缩到了59kb。
content-encoding是gzip的话就说明返回的是gzip
还有一点 gzip不压缩图片,因为压缩之后会更大- -,所以一般到是压缩css和js
前面说过了,启用gzip需要客户端和服务端的支持,如果客户端支持gzip的解析,那么只要服务端能够返回gzip的文件就可以启用gzip了,现在来说一下几种不同的环境下的服务端如何配置
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) }
如果用的是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的插件
gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{…..}之间
gzip压缩的出现如此的令人振奋,但是还有以下三个注意点:
- 低版本浏览器:一些浏览器接受压缩文件还是有问题(他们说他们可以但是他们并不行),如果你的站点必须在window95的网景1.0浏览器上,你可能不想要压缩文件。apache mod_deflate设置了一些忽略规则来专门为旧浏览器。
- 已经压缩过的文件:大多数的图片,音乐和视频都已经压缩过了,不要浪费时间来压缩他们了。事实上,你可以只压缩那三巨头(html,css and javarscript)。
- cpu负载:在传输过程中压缩文件耗费cpu但是节省带宽(用空间换时间)。通常压缩速率的选择需要权衡利弊。也存在一些预压缩静态文件的方法,但这要求更多的资源。考虑了cpu的耗费,压缩文件也是利大于弊。通过压缩实现更好的用户体验,更短的留白时间,值!
开启gzip压缩是优化网站最快的方法之一。大胆的用吧,让你的用户体验更棒。
如对本文有疑问, 点击进行留言回复!!
web前端基础之HTML5语义化新标签学习笔记(8)学会用语义化标签
网友评论