js、css文件gzip静态压缩以及gzip动态压缩

原创 2015年11月17日 16:03:27

                            静态压缩

一、如何下载GZIP,及使用GZIP?

:1.下载地址:www.gzip.org 下载最新GZIP工具包,主要的就是gzip.exe可执行程序。

  2.在下载的gzip文件加中有一个关于执行gzip程序相关选项信息的DOC文档。

  

  3.我们主要使用gzip对js文件进行压缩处理。当你想执行压缩操作的时候你只需简单的将js文件拖动到gzip.exe文件上,命令窗口闪过便会在你的js文件目录中看见

  一个xx.js.gz的压缩文件包,之后我们将xx.js.gz重命名为xx.gzjs.

    如果你需要在执行压缩的时候带参数选项,你可以在cmd中输入 gzip [options] 压缩文件名(同目录不需要写路径) [压缩后的文件名称] 即可。

二、拦截压缩文件配置请求响应信息。

:为什么要拦截?为了配置请求响应信息,告诉浏览器文件类型。让浏览器自动解压缩文件。

 

 

   代码如下:

JavaCode:

 

Java代码  收藏代码
  1. package org.viancent.filter.gzfilter;  
  2.   
  3. import java.util.*;  
  4. import java.io.IOException;  
  5. import javax.servlet.*;  
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.http.HttpServletResponse;  
  8.   
  9. @SuppressWarnings("unchecked")  
  10. public class GzFilter implements Filter {  
  11.     private Map headers = new HashMap();  
  12.   
  13.     @Override  
  14.     public void destroy() {  
  15.     }  
  16.   
  17.     @Override  
  18.     public void doFilter(ServletRequest request, ServletResponse response,  
  19.             FilterChain chain) throws IOException, ServletException {  
  20.         // 判断request的类型  
  21.         if (request instanceof HttpServletRequest) {  
  22.             // 强制转换请求类型,调用doFilter重载方法向响应头部添加配置信息  
  23.             doFilter((HttpServletRequest) request,  
  24.                     (HttpServletResponse) response, chain);  
  25.         } else {  
  26.             // 执行下一步  
  27.             chain.doFilter(request, response);  
  28.         }  
  29.   
  30.         /* 
  31.          * 这里是第二种简易写法,直接进行响应头信息设置。使用这种写法便不需要在web.xml中配置初始化参数等等。 缺点就是灵活性不够 
  32.          */  
  33.         // ((HttpServletResponse) response).setHeader("Content-Encoding",  
  34.         // "gzip");  
  35.         // chain.doFilter(request, response);  
  36.     }  
  37.   
  38.     public void doFilter(HttpServletRequest request,  
  39.             HttpServletResponse response, FilterChain chain)  
  40.             throws IOException, ServletException {  
  41.         // 设置请求的编码格式  
  42.         request.setCharacterEncoding("GBK");  
  43.         // 使用Map调用其entrySet()返回一个Set<Map.Entry>的集合,Map.Entry为Map的成员内部类,Map.Entry提供两个方法getKey(),getValue()  
  44.         for (Iterator it = headers.entrySet().iterator(); it.hasNext();) {  
  45.             Map.Entry entry = (Map.Entry) it.next();  
  46.             // 循环配置响应头部信息  
  47.             response.setHeader((String) entry.getKey(),  
  48.                     (String) entry.getValue());  
  49.         }  
  50.   
  51.         // 执行下一步  
  52.         chain.doFilter(request, response);  
  53.     }  
  54.   
  55.     @Override  
  56.     public void init(FilterConfig request) throws ServletException {  
  57.         // 获取headers初始化属性值 对应  
  58.         /* 
  59.          * <init-param> <param-name>headers</param> 
  60.          * <param-value>Content-Encoding=gzip</param-value> </init-param> 
  61.          */  
  62.         String headerStr = request.getInitParameter("headers");  
  63.         // 切割初始化参数headers的数据信息  
  64.         String[] headers = headerStr.split(",");  
  65.         // 解析web.xml中Filter配置标签中的初始化数据信息  
  66.         /* 
  67.          * 在这里提供了一个配置所有相应头部信息的扩展功能,例如可以在xm文件中配置多个参数信息 
  68.          * <param-value>Content-Encoding=gzip,cache=nocache</param-value> 
  69.          */  
  70.         for (int i = 0; i < headers.length; ++i) {  
  71.             String[] temp = headerStr.split("=");  
  72.             // 将配置信息通过=分割后以键值对的形式保存 例如:headers.put("Content-Encoding","gzip");  
  73.             this.headers.put(temp[0].trim(), temp[1].trim());  
  74.         }  
  75.     }  
  76.   
  77. }  
Java代码  收藏代码
  1. web.xml:  
  2.               <filter>  
  3.                 <filter-name>gzFilter</filter-name>  
  4.                 <filter-class>org.viancent.filter.gzfilter.GzFilter</filter-class>  
  5.                   
  6.                 <init-param>  
  7.                     <param-name>headers</param-name>  
  8.                     <param-value>Content-Encoding=gzip</param-value>  
  9.                 </init-param>  
  10.               </filter>  
  11.                 
  12.               <filter-mapping>  
  13.                 <filter-name>gzFilter</filter-name>  
  14.                 <url-pattern>*.gzjs</url-pattern>  
  15.               </filter-mapping>  
Java代码  收藏代码
  1. Jsp:  
  2. <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> //如果解压出来的js文件出现乱码,请将所有的格式进行统一,尤其是在编译js文件的时候  
  3.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4.     <html>  
  5.         <head>  
  6.   
  7.         <title>My JSP 'index.jsp' starting page</title>  
  8.         </head>  
  9.     <script type="text/javascript"  
  10.         src="<%=request.getContextPath()%>/userjs/ext-all-debug.gzjs" charset="GBK"></script>//保持编码格式  
  11. <span style="white-space: pre;">    </span> <body onload="showMessage()">  
  12.         </body>  
  13.     </html>  
大功告成
动态压缩
第一种使用tomcat的配置文件server.xml打开压缩功能即可,在Connector标签加入以下
               useSendfile="false"
               compression="on"
      compressionMinSize="2048"
               noCompressionUserAgents="gozilla, traviata"
               compressableMimeType="text/html,application/xhtml+xml,application/xml,text/xml,text/javascript,text/css,text/plain,application/x- javascript,application/javascript,text/xhtml,text/json,application/json,application/x-www-form-urlencoded,text/javaScript"
第二种使用nginx的配置文件nginx.conf打开压缩功能即可
[csharp] view plaincopy
  1. http {  
  2.     include       mime.types;  
  3.     default_type  application/octet-stream;  
  4.     server_tokens off;                         ##禁止显示nginx软件的版本号  
  5.     #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '  
  6.     #                  '$status $body_bytes_sent "$http_referer" '  
  7.     #                  '"$http_user_agent" "$http_x_forwarded_for"';  
  8.  
  9.     #access_log  logs/access.log  main;  
  10.   
  11.     sendfile        on;  
  12.     #tcp_nopush     on;  
  13.  
  14.     #keepalive_timeout  0;  
  15.     keepalive_timeout  65;  
  16.   
  17.    gzip  on;  
  18.    gzip_min_length  1000;  
  19.    gzip_buffers     4 8k;  
  20.   
  21.    gzip_comp_level 9;               #0-9 默认值为1,值越大压缩率越高,消耗的cpu资源越多,传输量减小。  
  22.    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;  
  23.  
  24.  
  25.     ### nginx做非80端口转发  
  26.     server {  
  27.         listen       82;  
  28.         server_name  localhost;   
  29.         location / {  
  30.             proxy_pass  http://127.0.0.1:7001;  
  31.             proxy_set_header    Host                $host:82;  
  32.             proxy_set_header    X-Real-IP           $remote_addr;  
  33.             proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;  
  34.             proxy_set_header    Via                 "nginx";   
  35.         }  
  36.     }   

web应用性能优化--采用gzip静态压缩+动态压缩方式压缩js、css文件

web应用性能优化–采用gzip静态压缩+动态压缩方式压缩js、css文件Web应用中通常都会有大量的javascript和css文件,如开源的javascript框架jquery、extjs-cor...

web系统js、css文件终极提速之gzip静态压缩+动态压缩

首先转载一个静态方法web系统中免不了要使用大量的javascript和css文件,如开源的javascript框架prototype、jquery、extjs-core等等,这些js框架,少都有几百...
  • xzknet
  • xzknet
  • 2012年03月31日 16:06
  • 10715

web前端优化之GZIP组件缓存

web前端14 条优化军规: 1.尽可能的减少 HTTP 请求数,可以使用CSS Sprites尽量将图片集成在一个大图片里。 2.使用 CDN 3.添加 Expires 头 ( 或者 ...

Nginx gzip static静态压缩

1.    目的  Nginx的动态压缩是对每个请求先压缩再输出,这样造成虚拟机浪费了很多cpu,解决这个问题可以利用nginx模块Gzip Precompression,这个模块的作用是对于需...

Nginx 配置 gzip 压缩

随着nginx的发展,越来越多的网站使用nginx,因此nginx的优化变得越来越重要,今天我们来看看nginx的gzip压缩到底是怎么压缩的呢? gzip(GNU-ZIP)是一种压缩技术。经过gz...

nginx 使用gizp压缩提高网站的传输速度

网站的css,js ,xml,html 在传输的时候可以使用gzip压缩,提高访问速度, 网站上的图片,视频等其它多媒体文件,因为压缩效果不好,所以对于图片没有必要支压缩, 如果想要优化,可以图片的生...

php使用gzip压缩传输js和css文件的方法

php /** * 完整调用示例: * 1、combine.php?t=j&b=public&fs=jslib.jquery,function * * 该例子调用的是网站根...

php使用gzip压缩传输js和css文件的方法

本文实例讲述了php使用gzip压缩传输js和css文件的方法。分享给大家供大家参考。具体如下: ...

使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件。这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢。如何加快网页响应速度?解决办法之一就是:依照Yahoo性能优化小组提...
  • lasig
  • lasig
  • 2012年01月10日 11:45
  • 666
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js、css文件gzip静态压缩以及gzip动态压缩
举报原因:
原因补充:

(最多只允许输入30个字)