前端性能优化-gzip
为什么要开启GZIP
我们需要下载一个100KB的Javascript文件,正常的下载量就是100KB,如果我们把文件在服务端压缩一下,压缩成30kb,下载到客户端再进行解压,这样就减少了大量的HTTP的传输时间,这就是GZIP的作用。
如何开启服务器的GZIP
我们以windows版的Apache2.4为例,打开httpd.conf文件,因为开启GZIP需要mod_deflate.so,所以首先把解注mod_deflate.so,然后增加下面的配置项:
#开启GZIP

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# example of how to compress ONLY html, plain text and xml
# AddOutputFilterByType DEFLATE text/plain text/html text/xml
# Don't compress binaries
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|iso|tar|bz2|sit|rar) no-gzip dont-vary
# Don't compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) no-gzip dont-vary
# Don't compress PDFs
SetEnvIfNoCase Request_URI .pdf no-gzip dont-vary
# Don't compress flash files (only relevant if you host your own videos)
SetEnvIfNoCase Request_URI .flv no-gzip dont-vary
# Netscape 4.X has some problems
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
# Setup custom deflate log
DeflateFilterNote Input instr
DeflateFilterNote Output outstr
DeflateFilterNote Ratio ratio
LogFormat '"%r" %{outstr}n/%{instr}n %{ratio}n%%' DEFLATE
CustomLog logs/deflate_log DEFLATE
</IfModule>

重启Apache,配置生效!
对比测试
我们以jquery-1.7.1.js为例,在不开启GZIP和开启GZIP下的文件大小进行对比
1.开启GZIP,文件传输大小为32.7KB
2.未开启GZIP,文件的传输大小为92.0KB,即文件的实际大小
前端性能优化-gzip的更多相关文章
- 前端性能优化之gzip
前言: 如果你是个前端开发人员,你肯定知道线上环境要把js,css,图片等压缩,尽量减少文件的大小,提升响应速度,特别是对移动端,这个非常重要.常用的前端性能优化方法有如下几种 一.减少http请求 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化教程04:压缩组件
本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...
- Web前端性能优化教程07:精简JS 移除重复脚本
本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看: 一.精简javascript 基础知识 精简:从javascript代码中 ...
- 移动H5前端性能优化指南(转载)
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...
随机推荐
- UML解析
1.1 UML基础知识扫盲 UML这三个字母的全称是Unified Modeling Language,直接翻译就是统一建模语言,简单地说就是一种有特殊用途的语言. 你可能会问:这明明是一种图形,为什 ...
- 未在本地计算机上注册 Microsoft.ACE.OLEDB.12.0 提供程序
Visual Studio 8使用了Access数据库,provider选择了ACE.OLEDB,但是运行时出现了错误,提示未在本地计算机上注册"Microsoft.ACE.OLEDB.12 ...
- ARRINC424—MORA(GRID)格式
每一整数经.纬度为一格,每格MORA值3位数字,表示百英尺.无法获知MORA值得网格一UNK表示. 经纬网格起始点坐标,每个网格从左下角开始计数,每经纬度一度切分一个网格.每行数据代表某一维度上往东或 ...
- AngularJS入门之如何快速上手
概述: AngularJS(ng)是一个纯JS框架,AngularJS易于构建CRUD应用(CRUD意思是增删改查) 适用于以数据操作为主的SPA(Single Page Application) ...
- vb和dos批处理创建或生成快捷方式
https://www.cnblogs.com/gszhl/archive/2009/04/23/1441753.html vb和dos批处理创建或生成快捷方式 首先说我现在用的一种,最有效的也是 ...
- ssh框架整合其他方式(没有hibernate核心配置文件)
- 关于service和线程的区别
主要有两方面,访问控制和功能区别 首先,service是运行在主线程上的,并不是一个新的线程 其次,service在运行的时候可以被多个activity访问和控制,而线程是不可以的 最后,servic ...
- HDU 4912 LCA + 贪心
题意及思路 说一下为什么按LCA深度从深到浅贪心是对的.我们可以直观感受一下,一条的路径会影响以这个lca为根的这颗树中的链,而深度越深,影响范围越小,所以先选影响范围小的路径. #include & ...
- Codeforces 1136F Cooperative Game (神仙题)
这种题就是难者不会,会者不难. 博客讲的很详细了 代码: #include <bits/stdc++.h> using namespace std; string s; int read( ...
- Codeforces 1142D(dp)
题目传送 先给出设计dp的结论: dp[i][j]:以第i个位置.以rankj的数拓展出去的方案数.意会一下,我实在想不好语言-- 其中所谓rankj=真·rank%11 找到拓展的规律,转移也就顺理 ...