`
badqiu
  • 浏览: 670355 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

关于JavaScript的gzip静态压缩方法

    博客分类:
  • AJAX
阅读更多
传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力

现在的问题是这种动态的压缩会导致服务器CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好)

一.下面描述在tomcat中的应用

1.将prototype.js通过gzip.exe压缩保存成prototype.gzjs
2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzip
web.xml中的配置
	<filter>
		<filter-name>AddHeaderFilter</filter-name>
		<filter-class>
			badqiu.web.filter.AddHeaderFilter
		</filter-class>
		<init-param>
			<param-name>headers</param-name>
			<param-value>Content-Encoding=gzip</param-value>
		</init-param>
	</filter>

	<filter-mapping>
		<filter-name>AddHeaderFilter</filter-name>
		<url-pattern>*.gzjs</url-pattern>
	</filter-mapping>


测试prototype.js是否正常的代码
<html>
<head>
<!-- type="text/javascript"不可少,有些浏览器缺少这个不能运行,具体已经忘记了 -->
<script src="prototype.gzjs" type="text/javascript"></script>
</head>
<body>
	<input id="username" name="username" value="badqiu"/><br />
	<input id="email" value="badqiu@gmail.com"/>
<script>
	<!-- 测试prototype的方法是否正常-->
	alert($F('username'))
</script>
</body>
</html>


在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header

二.相关压缩率数据
1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79%
2. 通过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83%
3. 实际项目中的多个js合并成的文件 439KB,直接通过gzip压缩为85KB,总压缩率81%
4. 439KB经过js压缩为165KB,再经过gzip压缩为65KB,总压缩率86%

基本上你都可以忽略js压缩工具的压缩率,直接使用gzip压缩

gzip下载地址 http://www.gzip.org
tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar

分享到:
评论
12 楼 叶子 2006-12-05  
比live和google map好多了

记得之前这两个的js...压缩后的还有500多k的..

特别是google map,3个js,每个接近200k
11 楼 badqiu 2006-12-05  
fins 写道
哦 那可能是我理解错了你的初衷
我们没有使用过 服务器端缓存压缩结果的方式
我们核心思想还是在客户端缓存
因为最终目的是为了减少对js文件的请求时间和请求次数
在js没有变化的情况下 没有比在客户端缓存更好的方法了


呵,我这里主要解决的是首次js加载的问题(因为我经过的项目中一个页面所有的js总和有439KB),
而你提供的是服务器的通用的性能优化
10 楼 fins 2006-12-05  
哦 那可能是我理解错了你的初衷
我们没有使用过 服务器端缓存压缩结果的方式
我们核心思想还是在客户端缓存
因为最终目的是为了减少对js文件的请求时间和请求次数
在js没有变化的情况下 没有比在客户端缓存更好的方法了
9 楼 badqiu 2006-12-05  
fins 写道
这个工作不是我做的 我还真不知道怎么配的

我们本机开发环境就是普通的 tomcat
tomcat下开启动态压缩是

   compression="on" 
   compressionMinSize="2048" 
   noCompressionUserAgents="gozilla, traviata" 
   compressableMimeType="text/html,text/xml,text/javascript"


给文件加失效我们用的是应用服务器里设置的(我不知道怎么设置 我们服务器用的websphere) tomcat如果不结合apache好像不支持

自己做也可以 做过滤
然后对所有 *.js的请求 加header

response.setDateHeader("Expires", (System.currentTimeMillis() + 一很长很长的long型));


你这个设置Expires并不是在服务器端缓存js压缩后的内容,而是控制客户端浏览器的缓存使用,而我查看apache的文档没有看到mod_deflate与mod_cache结合的样例,

上面静态压缩要解决的就是动态压缩导致服务器CPU占用率太高的问题,并不是客户端的文件过期设置
8 楼 daoger 2006-12-05  
http://ajax.org/space/start
2006-12-04 Monday
7 楼 fins 2006-12-05  
这个工作不是我做的 我还真不知道怎么配的

我们本机开发环境就是普通的 tomcat
tomcat下开启动态压缩是

   compression="on" 
   compressionMinSize="2048" 
   noCompressionUserAgents="gozilla, traviata" 
   compressableMimeType="text/html,text/xml,text/javascript"


给文件加失效我们用的是应用服务器里设置的(我不知道怎么设置 我们服务器用的websphere) tomcat如果不结合apache好像不支持

自己做也可以 做过滤
然后对所有 *.js的请求 加header

response.setDateHeader("Expires", (System.currentTimeMillis() + 一很长很长的long型));
6 楼 badqiu 2006-12-05  
fins 写道
我们的做法是
利用服务器自带的动态压缩功能 传输时压缩数据流
然后设置一个失效期

这样只有第一次的时候慢 以后就不慢了

因为我们的系统js一旦写好 不会轻易变动 所以这种方法一直沿用至今


不知可否共享一下你的服务器配置,这种静态压缩入侵性太强
5 楼 fins 2006-12-05  
我们的做法是
利用服务器自带的动态压缩功能 传输时压缩数据流
然后设置一个失效期

这样只有第一次的时候慢 以后就不慢了

因为我们的系统js一旦写好 不会轻易变动 所以这种方法一直沿用至今
4 楼 badqiu 2006-12-05  
叶子 写道
这样的如果客户端不支持gzip会出问题的吧

个人觉得还是交给apache自动做好了.HOHO..


我测试过的在IE5上是没有问题的,再低版本没有试过(希望有人可以列出gzip的浏览器支持情况),其它firefox等也都是支持的,如果你的客户端不支持gzip,我觉得你可能也没有支持他的必要了,因为现在的大部分js框架都需要IE5及其以上版本

并且你可以根据客户端浏览器提交的Http Header判断浏览器是否支持gzip传输
3 楼 叶子 2006-12-05  
这样的如果客户端不支持gzip会出问题的吧

个人觉得还是交给apache自动做好了.HOHO..
2 楼 together 2006-12-05  
还是很有用的。尤其对于用户访问量非常大的网站,以免因网络速度过慢而造成页面无法完全加载。
1 楼 oznyang 2006-12-05  
客户端脚本都是缓存起来的,除了第一次慢点,以后基本可以忽略不计

相关推荐

    五子棋wuziq.zip

    五子棋游戏想必大家都非常熟悉,游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    单片机C语言Proteus仿真实例占空比可调模拟仿真程序

    单片机C语言Proteus仿真实例占空比可调模拟仿真程序提取方式是百度网盘分享地址

    单片机C语言Proteus仿真实例用数码管设计的可调式电子钟

    单片机C语言Proteus仿真实例用数码管设计的可调式电子钟提取方式是百度网盘分享地址

    2023年第16届中国大学生计算机设计大赛附往届获奖作品合集资料

    2023年第16届中国大学生计算机设计大赛附往届获奖作品合集资料提取方式是百度网盘分享地址

    Linux下,C语言实现五子棋程序Linux-Wuziqi.zip

    五子棋游戏想必大家都非常熟悉,游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    需要系数法负荷计算软件.zip

    需要系数法负荷计算软件

    变压器差动计算软件.zip

    变压器差动计算软件

    单片机C语言Proteus仿真实例数码管动态显示

    单片机C语言Proteus仿真实例数码管动态显示提取方式是百度网盘分享地址

    Python源码-小海龟之螺旋曲线.py

    Python源码-小海龟之螺旋曲线

    Python源码-图形验证码考眼力游戏.py

    Python源码-图形验证码考眼力游戏

    飞机大战项目planegame.zip

    五子棋游戏想必大家都非常熟悉,游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    架空送电线路导地线弧垂计算小软件.zip

    架空送电线路导地线弧垂计算小软件

    W25Q512数据手册

    W25Q512数据手册。The W25Q512JV (512M-bit) Serial Flash memory provides a storage solution for systems with limited space, pins and power. The 25Q series offers flexibility and performance well beyond ordinary Serial Flash devices. They are ideal for code shadowing to RAM, executing code directly from Dual/Quad SPI (XIP) and storing voice, text and data. The device operates on a single 2.7V to 3.6V power supply with current consumption as low as 1µA for power-down. All devices are offered in space-

    three.js应用篇(五)模型内第一视角漫游

    完整示例代码

    setuptools-1.3.1.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    单片机C语言Proteus仿真实例数码管显示4×4键盘矩阵按键

    单片机C语言Proteus仿真实例数码管显示4×4键盘矩阵按键提取方式是百度网盘分享地址

    setuptools-46.3.0.zip

    Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

    bloom filter , 递归 , 回溯 , 五子棋 , 迷宫 , 扫雷 , 贪吃蛇 , 消字 , 各种数据结构算法.zip

    五子棋游戏想必大家都非常熟悉,游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes

    附件1:证券公司及基金管理公司子公司资产证券化业务管理规定(修订稿).pdf

    附件1:证券公司及基金管理公司子公司资产证券化业务管理规定(修订稿).pdf

    信息可视化类广东省大学生计算机设计大赛三等奖追溯党史数看百年历程视频

    信息可视化类广东省大学生计算机设计大赛三等奖追溯党史数看百年历程视频提取方式是百度网盘分享地址

Global site tag (gtag.js) - Google Analytics