平时我们希望提高应用的响应速度时,常用的有以下一些方法:
使用Gzip
减少Http Request次数
增加过期头信息 Expire Header
压缩CSS和Javascript文件
更多的方法,我们可以参考 Yahoo的34条前端优化规则 以及 Google的前端性能最佳实践 ,这两个主题都包含了大量的前端优化的内容。本篇着眼于如何结合Codeigniter的使用,来加速前端的性能。
1、第一条是使用Gzip。
在Codeigniter中,我们可以很方便的在 application/config/config.php 中打开 $config[‘compress_output’] = TRUE 这个选项,这样通过 view 输出的内容自动的就会进行gzip压缩。我对比了一个原来为24kb的首页,压缩后只有6.5k,可以说效果非常明显。
但是Codeigniter的gzip压缩选项打开后,view中输出时就不能再有 echo 语句,否则会发生如下的错误:
Fatal error: ob_start() [ref.outcontrol]: Cannot use output buffering in output buffering display handlers in
我这里的解决办法是使用 ini_set 设置全局的PHP变量,默认打开文件压缩。因为懒得改代码中的 echo 了,如果比较容易修改,可以改为使用 set_output 进行替换,也不会有问题。
扩展:
打开这个选项后,实际上我们只能压缩PHP脚本输出的部分,而现在网站中的CSS和JS文件也不小,所以对这一部分进行压缩也是比较必要的。这首先需要我们的服务器支持 gzip 压缩,这里我只是考虑 apache 2.x 的情况,apache 1.3 和 IIS 的情况,可以 Google 之。
下面这个方法是在 Linux 和 Apache 的环境下实验通过,需要有修改 php.ini 和 .htaccess 文件的权限。
a、首先检查服务器是否支持GZIP。使用phpinfo()打印服务器信息,查看 _ENV["HTTP_ACCEPT_ENCODING"] and HTTP_ACCEPT_ENCODING 看是否包含 gzip。
b、确保 apache 的 mod_deflate 模块已经激活。
c、在项目的 .htaccess 文件中加入下面的语句,apache 服务器就会自动帮你压缩你希望进行压缩的文件
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
在 apache 1.3 中,可以使用 mod_gzip 进行压缩,具体的设置方式就不赘述了。另外,试验中发现,如果 apache 服务器以 FastCGI 的方式来解析 PHP,上面这种设置会失效。具体的原因和解决方法还没找到相应的资料。
我们的一个项目中,使用了HostMonster的虚拟主机,Google搜到了一些文档,据说可以在HostMonster的虚拟主机上配置打开Gzip的选项,多次试验也没成功,后来咨询了HostMonster的工作人员,确认了虽然服务器上有mod_deflate模块,但并不是给消费者使用的,我那个气愤呀。
2、减少Http的请求次数
用户的带宽是非常有限的,如果你的网站上有众多的小文件,则每个文件请求建立连接、下载这个三次握手的过程是非常消耗用户的带宽资源的,所以可以使用一些技术来将多个文件合并为一个文件一次下载。
可以使用 Css Sprite 的技术,将页面中需要的小图标 icon 类集中在一个文件中。因为每个图标的大小一般都很小,大概都不超过 2-3 kb ,整合成一个文件仍能够将文件大小控制在合理的范围之内。
3、减少JS和CSS文件的尺寸
随着网络应用的丰富,现在网页中的引用的JS和CSS文件越来越多,也越来越大。我们平时在编程的时候,为了浏览的美观与方便,会对代码进行格式化,增加注释和空行,使用有意义的变量名等。实际上对于浏览器来说,解析和执行这些文件是不要保留这些格式的,因此对JS和CSS文件进行一些压缩的处理就可以达到减少文件尺寸的目的。
4、设置过期的头信息
在Codeigniter中,可以通过调用 $this->output->set_header(); 来设置头信息。从而控制浏览器如何决定来处理已经被缓存的内容。
参考资料:
1、Speed UP your web application by Codeigniter
2、HTTP输出Gzip的注意事项
3、Yahoo的34条前端优化规则
4、Google的前端性能最佳实践
5、Cannot use output buffering in output buffering display handlers
6、Force GZIP compress on your HostMonster hosted website