从服务端优化来说,通过对服务端做压缩配置可以大大减小文本文件的体积,从而使加载文本的速度成倍的加快。目前比较通用的压缩方法是启用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文件底部加入如下代码配置需要压缩的文件:

  1. <IfModule mod_deflate.c>
  2. SetOutputFilter DEFLATE
  3. AddOutputFilterByType DEFLATE text/plain
  4. AddOutputFilterByType DEFLATE text/html
  5. AddOutputFilterByType DEFLATE text/php
  6. AddOutputFilterByType DEFLATE text/xml
  7. AddOutputFilterByType DEFLATE text/css
  8. AddOutputFilterByType DEFLATE text/javascript
  9. AddOutputFilter DEFLATE js css
  10. AddOutputFilterByType DEFLATE application/xhtml+xml
  11. AddOutputFilterByType DEFLATE application/xml
  12. AddOutputFilterByType DEFLATE application/rss+xml
  13. AddOutputFilterByType DEFLATE application/atom_xml
  14. AddOutputFilterByType DEFLATE application/x-javascript
  15. AddOutputFilterByType DEFLATE application/x-httpd-php
  16. AddOutputFilterByType DEFLATE image/svg+xml
  17. AddOutputFilterByType DEFLATE image/gif image/png image/jpe image/swf image/jpeg image/bmp
  18. # Don’t compress images and other #排除不需要压缩的文件
  19. BrowserMatch ^Mozilla/4 gzip-only-text/html
  20. BrowserMatch ^Mozilla/4\.0[678] no-gzip
  21. BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  22. SetEnvIfNoCase Request_URI .(?:html|htm)$ no-gzip dont-varySetEnvIfNoCase
  23. #SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
  24. SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
  25. SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
  26. </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. css设置背景模糊

    使用filter属性来设置模糊值 效果: css样式: <style type="text/css"> .cover { width: 600px; height: 3 ...

  2. css实现修改默认滚动条样式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  3. Javascript周报#182

    This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 182Ma ...

  4. MooseFS安装部署

    环境信息 Master服务器 dev04 chunkserver服务器 dev02.dev03.dev04 metalogger服务器 dev03 mount客户端 dev01.dev02 安装前下载 ...

  5. git操作合集

    目录 安装 下载 本地配置 创建用户凭证ssh 忽略文件 基础操作 新建仓库 克隆仓库 获取更新 推送更新 查看历史 版本回退 分支 别名 linux服务器 疑难问题 清除历史大文件 安装 下载 下载 ...

  6. Informatica 9.5安装部署

    Informatica  结构 1个或多个资源库(Respository) PowerCenter数据整合引擎是基于元数据驱动的,提供了基于数据驱动的元数据知识库(Repository),该元数据知识 ...

  7. linux fack 文件系统修复命令

    [简介] fsck命令被用于检查并且试图修复文件系统中的错误.当文件系统发生错误四化,可用fsck指令尝试加以修复. [选项]必要参数 -a 非互交模式,自动修复 -c 检查是否存在有损坏的区块. - ...

  8. Vertical-Align: 关于inline,inline-block文本排版

    inline, inline-block元素在同行元素的排版布局中非常有用,但是时常会出现一些莫名奇妙的问题.要解决这些问题,深刻理解inline,inline-block元素的特征有非常重要的意义. ...

  9. Linux下top命令监控性能状态

    1.性能分析因素:CPU.内存.网络.磁盘读写 2.系统对应的应用类型主要分为以下两种: IO Bound:一般都是高负荷的内存使用以及存储系统,IO范畴的应用就是一个大数据处理的过程:通常数据库软件 ...

  10. Python3网络爬虫:urllib.error异常

    转载请注明作者和出处:http://blog.csdn.net/c406495762/article/details/59488464 一.urllib.error urllib.error可以接收有 ...