从服务端优化来说,通过对服务端做压缩配置可以大大减小文本文件的体积,从而使加载文本的速度成倍的加快。目前比较通用的压缩方法是启用gzip压缩。它会把浏览器请求的页面,以及页面中引用的静态资源以压缩包的形式发送到客户端,然后在客户端完成解压和拼装.下图是使用相关工具检测没有开启网页压缩的效果。

检测地址:

http://www.whatsmyip.org/http-compression-test/?url=d3d3LmZlbmd6aWdhbWUuY29t

windows下apache开启GZIP

实现步骤:
1.找到并打开apache/conf目录中的httpd.conf文件
2.httpd.conf中打开deflate_Module和headers_Module模块,具体做法为将 如下两句前面的#去掉:
  LoadModule deflate_module modules/mod_deflate.so
  LoadModule headers_module modules/mod_headers.so

3.在httpd.conf文件底部加入如下代码配置需要压缩的文件:

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/php
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilter DEFLATE js css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/gif image/png image/jpe image/swf image/jpeg image/bmp
# Don’t compress images and other #排除不需要压缩的文件
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI .(?:html|htm)$ no-gzip dont-varySetEnvIfNoCase
#SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
</IfModule>

4.重启apache服务端。通过firebug查看头信息Accept-Encoding是否为gzip。

Web服务器处理

HTTP压缩的过程如下:

Web服务器接收到浏览器的HTTP请求后,检查浏览器是否支持HTTP压缩(Accept-Encoding 信息);

如果浏览器支持HTTP压缩,Web服务器检查请求文件的后缀名;

如果请求文件是HTML、CSS等静态文件,Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件;

如果请求文件的压缩文件不存在,Web服务器向浏览器返回未压缩的请求文件,并在压缩缓冲目录中存放请求文件的压缩文件;

如果请求文件的最新压缩文件已经存在,则直接返回请求文件的压缩文件;

如果请求文件是动态文件,Web服务器动态压缩内容并返回浏览器,压缩内容不存放到压缩缓存目录中。

mod_gzip 和mod_deflate的主要区别是什么?(来自互联网)

首先一个区别是安装它们的Apache Web服务器版本的差异。Apache 1.x系列没有内建网页压缩技术,所以才去用额外的第三方mod_gzip 模块来执行压缩。而Apache 2.x官方在开发的时候,就把网页压缩考虑进去,内建了mod_deflate 这个模块,用以取代mod_gzip。虽然两者都是使用的Gzip压缩算法,它们的运作原理是类似的。 第二个区别是压缩质量。mod_deflate 压缩速度略快而mod_gzip 的压缩比略高。一般默认情况下,mod_gzip 会比mod_deflate 多出4%~6%的压缩量。 那么,为什么使用mod_deflate?第三个区别是对服务器资源的占用。 一般来说mod_gzip 对服务器CPU的占用要高一些。mod_deflate 是专门为确保服务器的性能而使用的一个压缩模块,mod_deflate 需要较少的资源来压缩文件。这意味着在高流量的服务器,使用mod_deflate 可能会比mod_gzip 加载速度更快。

web性能优化之GZIP压缩的更多相关文章

  1. Nginx性能优化功能- Gzip压缩(大幅度提高页面加载速度)

    Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能!  Web网站上的图片,视频等其它多媒体文件以及大文件,因 ...

  2. 前端性能优化:gzip压缩文件传输数据

    一.文件压缩的好处 前端生产环境中将js.css.图片等文件进行压缩的好处显而易见,通过减少数据传输量减小传输时间,节省服务器网络带宽,提高前端性能. 二.http协议如何支持压缩文件的传输 1.浏览 ...

  3. 关于WEB 性能优化 (摘抄)

    压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...

  4. web性能优化 来自《web全栈工程师的自我修养》

    最近在看<web全栈工程师的自我修养>一书,作者是来自腾讯的前端工程师.作者在做招聘前端的时候问应聘者web新能优化有什么了解和经验,应聘者思索后回答“在发布项目之前压缩css和 Java ...

  5. Web 性能优化:21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  6. Web 性能优化: 使用 Webpack 分离数据的正确方法

    摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...

  7. (网页)web性能优化(转)

    转自CSDN: Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行 ...

  8. Web性能优化:雅虎35条

    对web性能优化,一直知道是个很重要的方面,平时有注意到,但是对于雅虎35条是第一次听说,查了一下,发现平时都有用过,只是没有总结到一块,今天就总结一下吧. 雅虎35条: 1.[内容]尽量减少HTTP ...

  9. 对于Web性能优化, 了解和经验

    我们在发布项目之前压缩CSS和JavaScript源代码,这样文件体积就变小了,用户加载必要资源所花的时间也就更短了. 压缩源码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件 ...

随机推荐

  1. along.js

    平时写代码用到的方法,就给封装了一下.需要的拿走不谢... 1.数组去重 并判断一个元素出现的次数 handle(str){ let arr=str.split('') var newarr=[]; ...

  2. ORA-16014: log 3 sequence# 540 not archived, no available destinations

    https://blog.csdn.net/zonelan/article/details/7329369

  3. python 类方法的互相调用及self的含义

    每次调用内部的方法时,方法前面加 self.   class MyClass: def __init__(self): pass def func1(self): # do something pri ...

  4. javascript的时间描述图怎么写

    在gis系统中往往需要在一个时间间隔内把图形动态播放出来,比如2000年到现在地震变化啊,海啸的变化,在flex中这种展现方式需要后台rest服务相结合,要建立有时间点的图层,arcgis发布要选ti ...

  5. 小程序UI

    从input组件说起 <input maxlength="10" placeholder="最大输入长度10" /> <div id=&quo ...

  6. C#实现字符串相似度算法

    字符串的相似性比较应用场合很多,像拼写纠错.文本去重.上下文相似性等. 评价字符串相似度最常见的办法就是: 把一个字符串通过插入.删除或替换这样的编辑操作,变成另外一个字符串,所需要的最少编辑次数,这 ...

  7. zabbix_3.0安装部署与中文支持

    Zabbix 3.0界面焕然一新,一改10多年的老面孔,alpha4的更新具体记录如下:http://www.zabbix.com/rn3.0.0alpha4.php What's New in 3. ...

  8. 详解COM Add In的LoadBehavior及其妙用

     Office的所有COM Add In,包括用Shared Add In模板和VSTO Add In模板创建的,都会在注册表里面存储一些信息. 对于当前用户安装的Add In,以Excel为例,对应 ...

  9. The good life is one inspired by love and guided by knowledge

    The good life is one inspired by love and guided by knowledge 伯特兰·罗素Bertrand Russell18721970 I can a ...

  10. [BZOJ 1033][ZJOI2008]杀蚂蚁antbuster

    1033: [ZJOI2008]杀蚂蚁antbuster Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1200  Solved: 507[Submi ...