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

简介: 首先转载一个静态方法web系统中免不了要使用大量的javascript和css文件,如开源的javascript框架prototype、jquery、extjs-core等等,这些js框架,少都有几百K,我曾经做过不少项目,都用了大量的js。特别是extjs,功能实在是强大,却也是体积最大的一个js框架。使用中稍不留神很容易导致你的系统反映缓慢。为了提高js、css文件的下载速度,从而提高页

首先转载一个静态方法

web系统中免不了要使用大量的javascript和css文件,如开源的javascript框架prototype、jquery、extjs-core等等,这些js框架,少都有几百K,我曾经做过不少项目,都用了大量的js。特别是extjs,功能实在是强大,却也是体积最大的一个js框架。使用中稍不留神很容易导致你的系统反映缓慢。为了提高js、css文件的下载速度,从而提高页面的响应速度,减小文件的大小才是终极之道。减少这些文件的大小已经有了不少的js压缩工具可以做到,。在这里重提gzip静态压缩的技术,是由于在项目中经过实践的检验,证实是可行、高效而且低风险的做法。

    如果使用js压缩工具压缩js、css文件,会存在不少的问题,而要解决这些问题,必须付出不少的人力资源。因为通常一些旧的项目,或者一些只考虑在IE中使用的web系统,在写js代码的时候,有不少不规范的地方,如在语句后忘了打“;”号,ie可以通过,其它一些浏览器却不认;js压缩后,会导致甚至在ie里面也无法运行。要解决这些js压缩后的问题,必须进行严格的测试,而往往都很难发现具体错在哪里,最终很有可能花费了大量的时间去排错。
    而使用gzip静态压缩技术,却绝对不会存在这些问题,而且压缩率比js压缩还要高许多。你唯一要担心的是浏览器是否支持gzip。而现在的浏览器却都已经完全支持gzip技术了(如微软的IE、火狐firefox、苹果的safari、谷歌的chrome等),所以就不用担心了。这里有个小小的特殊,就是微软的IE必须是要在IE6SP1或以上的版本才能很好的支持gzip,有些精间版的windows系统,就算是升级到IE6SP1或IE7都不能很好的支持gzip,这也没关系,打上几个关于gzip的微软补丁就行了(后面有相关说明)。
    以下为我在实际项目中使用的gzip静态压缩技术的所有细节,提供给大家参考。
    对原有web系统的gzip静态压缩处理主要方法为: 
1.将web系统中的*.js、*.css文件预先通过gzip.exe压缩保存成*.jsgz 、*.cssgz 文件;
2.将web系统中引用js、css文件的地方转换为引用jsgz 、cssgz文件 ;
3.客户端请求jsgz、cssgz文件时,服务器通过过滤器设置header,将所有以jsgz、cssgz结尾的文件的请求增加设置“header Content-Encoding=gzip”的响应头。

下面为详细的处理脚本及相关配置文件的修改:
一)将web系统转换为使用gzip静态压缩的web系统的ant脚本


二)修改web.xml配置文件
  
gzipFileFilter   
com.dragon.web.AddHeaderFilter   
  
headers   
Content-Encoding=gzip   
  
  
......
gzipFileFilter
*.jsgz
gzipFileFilter
*.cssgz
......

三)过滤器源代码
package com.dragon.web;

import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* 给请求文件添加额外Header的过滤器
* @author dragon rongjih@163.com
* @since 2009-01-08
*/
public class AddHeaderFilter implements Filter {
Map headers = new HashMap();
public void init(FilterConfig config) throws ServletException {
//获取额外配置的header
String headersStr = config.getInitParameter("headers");
String[] headers = headersStr.split(",");
for(int i = 0; i < headers.length; i++) {
String[] temp = headers[i].split("=");
this.headers.put(temp[0].trim(), temp[1].trim());
}
}
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
if(req instanceof HttpServletRequest) {
//仅对Http请求添加该过滤器的处理
doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);
}else {
chain.doFilter(req, res);
}
}
public void doFilter(HttpServletRequest request,
HttpServletResponse response, FilterChain chain)
throws IOException, ServletException {
//将额外配置的header添加到当前Response
for(Iterator it = headers.entrySet().iterator();it.hasNext();) {
Map.Entry entry = (Map.Entry)it.next();
response.addHeader((String)entry.getKey(),(String)entry.getValue());
}
chain.doFilter(request, response);
}
}

关于IE浏览器的gzip支持补充:
    IE必须是要在IE6SP1或以上的版本才能很好的支持gzip,有些精间版的windows系统,就算是升级到IE6SP1或IE7都不能很好的支持gzip,这时就必须给系统安装如下几个补丁:
"_blank">q831167 其中q822002是必须的,而Q831167和Q832894我没试过不打会不会有影响,因为我在项目中碰到打开gzip的网页有问题时都把这三个补丁打上了,当时出现过问题的系统有windows 2000、windows XP SP0、windows XP SP1、windows XP SP2、一些被精简过的windows XP系统。
 
 
 
 
 
=====================
以下附上动态压缩方法
    简单到没什么可说的,使用nginx的配置文件nginx.conf打开压缩功能即可
http {
    include       mime.types;
    default_type  application/octet-stream;
	server_tokens off;                         ##禁止显示nginx软件的版本号
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

   gzip  on;
   gzip_min_length  1000;
   gzip_buffers     4 8k;

   gzip_comp_level 9; 				#0-9 默认值为1,值越大压缩率越高,消耗的cpu资源越多,传输量减小。
   gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;


	### nginx做非80端口转发
	server {
        listen       82;
        server_name  localhost; 
        location / {
			proxy_pass  http://127.0.0.1:7001;
			proxy_set_header	Host             	$host:82;
			proxy_set_header	X-Real-IP        	$remote_addr;
			proxy_set_header	X-Forwarded-For		$proxy_add_x_forwarded_for;
			proxy_set_header 	Via    				"nginx"; 
        }
	} 
}

相关文章
|
10月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
3143 0
|
11月前
|
JSON JavaScript 前端开发
实现ROS系统的Websocket传输,向Web应用推送sensor_msgs::Image数据
WebSocket协议具有低延迟和高实时性的特性,适用于实时数据推送。但是,它也依赖于网络条件,因此,在通过WebSocket发送数据时,保证网络稳定性也是重要的。以上步骤为建立基本的WebSocket传输提供了框架,并可以根据实际需求进行调整和优化。
710 0
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1247 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
521 0
Next.js 实战 (六):如何实现文件本地上传
|
监控 关系型数据库 MySQL
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
615 0
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
274 5
|
存储 消息中间件 缓存
构建互联网高性能WEB系统经验总结
如何构建一个优秀的高性能、高可靠的应用系统对每一个开发者至关重要
217 2
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
556 2
|
开发框架 前端开发 开发者
04-Bootstrap 全局 css 样式_栅格系统 1|学习笔记
快速学习04-Bootstrap 全局 css 样式_栅格系统 1
258 0
04-Bootstrap 全局 css 样式_栅格系统 1|学习笔记
|
前端开发
CSS系统学习笔记
权重主要分为 4 个等级: 第一等:代表内联样式,如: style="",权值为1000 第二等:代表ID选择器,如:#content,权值为100 第三等:代表类,伪类和属性选择器,如.content,权值为10 第四等:代表类型选择器和伪元素选择器,如div p,权值为1 遵循如下法则: 选择.
2344 0

热门文章

最新文章