前端性能优化之gzip

Nino 发布于2019-08-21 18:23 / 406人阅读

摘要：客户端请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。建议设置成大于的字节数，小于可能会越压越大。

背景

如果你是个前端开发人员，你肯定知道线上环境要把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节点然后进行配置修改，具体配置如下

参数说明：

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会找到如下代码


    js
    application/javascript

切记上面的类型不能配置错了，如果配置错了压缩是不会起作用的。

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模块内

服务器托管超融合服务器前端性能优化前端开发性能优化性能优化前端优化

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

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

前端性能优化之gzip

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

jzzlee 2019-08-23 15:11 评论0 收藏0
前端性能优化之gzip

摘要：客户端请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。建议设置成大于的字节数，小于可能会越压越大。背景如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。压缩压缩方式前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，webp...

张利勇 2019-08-29 14:06 评论0 收藏0
PHP 进阶之路 - 亿级 pv 网站架构实战之性能压榨

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

SnaiLiu 2019-06-28 13:18 评论0 收藏0
「Vue实践」武装你的前端项目

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

曹金海 2019-05-23 17:30 评论0 收藏0
[ 性能优化 ] Yahoo前端优化规则规则 (1)

摘要：自己是做前端开发的，在性能方面，根据的调查，后台只占，而前端高达之多，其中有的东西是可以优化的。相信很多人都听过优化网站性能的条规则。淘宝和阿里巴巴中文站目前都是这样做的。目前的浏览器都能良好地支持。相信互联网已经越来越成为人们生活中不可或缺的一部分。Ajax，flex等等富客户端的应用使得人们越加幸福地体验着许多原先只能在C/S实现的功能。比如Google机会已经把最基本的o...

xiaolinbang 2019-08-28 18:07 评论0 收藏0