压缩你的JS和CSS代码
2009-02-08 16:00
281 查看
压缩你的JS和CSS代码
2008年04月01日 星期二 15:40
2008年04月01日 星期二 15:40
减小代码在传输中的大小,就能提高页面的传输速度,打开网页也就快了。在上一篇文章中提到了使用Apache2的mod_deflate模块来压缩页面,但这需要在Apache中加载这个模块才行,今天我给主机提供商留言2次,都得到了同样的答复:“暂时不支持,非常感谢您长期对我司的支持!”。从zhang的留言中得知有名的dreamhost也没有打开mod_deflate,我的心里才好受一点。 mod_deflate模块提 供了DEFLATE输出过滤器,允许服务器在将输出内容发送到客户端以前进行压缩(应该也是采用gzip数据格式压缩,deflate是一种压缩算法)以 节约带宽。Apache 1.3.x时代使用mod_gzip模块来实现,Apache2已经内置了mod_deflate模块。 而WordPress默认的gzip压缩功能是通过ob_gzhandler这个函数来实现的,ob_gzhandler是php 4.0.4新增的一个输出缓存函数,并通过gzip压缩后发送到客户端。这个函数需要zlib库支持,一般的虚拟主机都安装有这个库,所以很多blog都使用这个方法来实现对php页面的压缩。 那么对于我们这些没有开启mod_deflate模块的主机来说,就只能采用ob_gzhandler函数来压缩了,它的压缩效果和mod_deflate相比,相差很小,几乎可以忽略(但它只能对php文件进行压缩),下一篇文章将附上我对这几种方式的一个对比测试。 使用ob_gzhandler函数有3种方法让它对php进行压缩: 1、在php.ini中设置 output_handler = ob_gzhandler 2、在.htaccess中加入 php_value output_handler ob_gzhandler 3、在php文件头加上 ob_start('ob_gzhandler'); 第一种我们是没法办到,第二种方法不错,可以一劳永逸,一、二种方法效果都一样,就是对所有php后缀文件进行压缩。我这里主要介绍一下第三种方法,参考“How To: Optimize Your CSS Even More”。 例如对模板下的style.css进行压缩 1、把模板目录下的style.css复制一份出来,命名为style.css.php 接着在style.css.php顶部加入这句: < ?php if(extension_loaded('zlib')) {ob_start('ob_gzhandler');} header("Content-type: text/css"); ?> 在最后加上 < ?php if(extension_loaded('zlib')) {ob_end_flush();} ?> (复制的时候去掉?php前的空格) 2、按照下面的方式修改header.php中的css连接 原来的: <link rel="stylesheet" type="text/css" media="screen" href="/style.css"/> 修改后的: <link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/> 搞定,现在你的CSS就可以被gzip压缩了。 JS也可以使用同样的方法,只是在xx.js.php头部加入的应该是这样: < ?php if ( extension_loaded('zlib') ) {ob_start('ob_gzhandler');} header("Content-Type: text/javascript"); ?> (复制的时候去掉?php前的空格) 仔细看看K2主题的中的JS,就是修改后缀为php后在顶部加入了ob_gzhandler函数。 用这种方法,我把50多K的prototype.js和13K的style.css压缩了,现在用Web Page Analyzer测试我的首页,JS大小从88,553b减小到了45,852b,CSS从17,626b减小到了7,193b。 |
相关文章推荐
- Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能
- 使用yuicompressor.jar对js/css文件代码压缩
- gulp 压缩 js 和 css 代码
- html,css,js代码格式化,及其压缩
- Maven项目中压缩js和Css代码
- 在新浪微博做了个压缩 js 代码和 css的应用
- [转]yuicompressor-2.4.2,js,css代码压缩
- 一款js和css代码压缩工具[附JAVA环境配置方法]
- Yii --EClientScript 扩展,css,js文件代码压缩合并加载
- 压缩你的PHP、JS、CSS等文本类型代码
- gulp 整合、压缩js、css代码
- jenkins ant build的时候压缩JS/CSS代码
- ASP.Net一键自动化更新代码、编译、合并dll、压缩js、css、混淆dll、zip打包、发布到测试环境的bat批处理
- Yii --EClientScript 扩展,css,js文件代码压缩合并加载
- Maven JavaWEB项目使用Gulp自动构建js和css实现代码压缩、版本后缀
- JS+CSS实现仿msn风格选项卡效果代码
- CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅
- 最简洁的技文语法着色代码(css+js)
- Minify把CSS和JS压缩和削减
- 用JS+CSS写左侧可隐藏的展开、折叠菜单代码