[PHP][PrestaShop]CSS/JS合并

减少CSS/JS文件的加载次数,可提高页面的载入速度,搜索引擎也会把页面包含CSS/JS文件的个数作为网站质量评分的一个参考项。所以,减少页面中的资源文件数目是网站开发中不得不考虑的一项。一般而言,我们都会在项目接近尾声的时候手工合并、精简资源文件。这个方法对于变动不多的网站操作较为方便,但对于频繁变更的网站则有些繁琐。

Presta给我们提供了一种比较好的思路,实现动态资源文件合并,对于需要频繁变动的网站或者是非技术人员建立的网站还是很有帮助的。

1. 在Presta的后台“高级参数” -> “性能”中有两个选项,“用于CSS的智能Cache"和”用于Javascript的智能Cache”分别控制CSS和JS文件的合并

点击“保存”按钮,参数的变更会提交到AdminPerformanceController.php模块,由于这是一个异步提交,按照Presta的规范,请求在postProcess()中处理。获取到变更的参数后保存在数据库ps_configuration表中。至此,配置完成


2. 为了更好理解合并功能的实现,有必要略微了解一点Presta Controller的运行顺序

Execution order of the controller's functions
  1. __contruct(): Sets all the controller's member variables.
  2. init(): Initializes the controller.
  3. setMedia() or setMobileMedia(): Adds all JavaScript and CSS specifics to the page so that they can be combined, compressed and cached (see PrestaShop's CCC tool, in the back-office "Performance" page, under the "Advanced preferences" menu).
  4. postProcess(): Handles ajaxProcess.
  5. initHeader(): Called before initContent().
  6. initContent(): Initializes the content.
  7. initFooter(): Called after initContent().
  8. display() or displayAjax(): Displays the content.

如上摘自Presta帮助文件,可以看到前面提到的postProcess()在这里有描述,ajax请求应在此处处理。同时,这里还提到了为了便于CSS/JS的合并,资源文件的指定应放在setMedia()或setMobileMedia()中。


3. 资源文件合并的具体实现

一开始,我以为是用了某个Hook在实现资源文件合并的,打印了所有的Hook可能的操作,也没有找到。包括在SetMedia()结尾调用的Hook::exec('actionFrontControllerSetMedia', array());看起来是那么的像干这个事情的样子,结果这东西是空的,没有任何作用,仅仅是埋伏的种子而已~

按着FrontController.php的执行顺序挨个查看,最终在display()中找到了合并的具体代码。这里一上来就检查PS_CSS_THEME_CACHE和PS_JS_THEME_CACHE两个参数。而这两个参数即为后台“用于CSS的智能Cache"和”用于Javascript的智能Cache”对应的开关名称。然后调用了Media类对文件进行具体的合并工作,并使用合并后的文件路径替换掉在setMedia()中指定的一串资源文件路径。


也许是我孤陋寡闻,Presta实现资源文件合并的思路非常有意思,避免了程序员亲自动手来做这些工作。当然,这样做可能对访问速度会有一点点的牺牲,每次访问网站的时候都需要检查下有没有合并的资源文件,是不是最新。。。

现在大量网站为了追求用户体验,使用了大量使用CSSJS文件。 而网页加载的时间大部分是消耗在资源请求部分。通过 Chrome自带调试工具,或者 Firebug 可观察到: 资源加载的等待时间经常占到总时间的 50%以上。 再比如,IE6默认只有2个下载线程!也就是说,同时只能进行2个资源请求、无论你网速有多快。 所以网页前端速度优化的一个重要项目就是:减小资源请求数。 事实上,业界有很有名气的jscss合并压缩开源程序:minify。 但悲剧的 minify 在 php5.3 , php 5.4 环境下无法使用,于是逼的我只好自己丰衣足食。 minify 比较重量级,很臃肿。它采用了将合并文件写入硬盘的方式。 本程序只是合并、压缩,直接讲合并结果发送客户端,并采用修改过期时间优化效率,最大限度减小服务器压力。 这样做法的效率就非常非常接近于 minify。 本程序碎玉压缩合并的功能俱全,但是整体及其轻量级,很容易更新、维护,二次开发。 本程序压缩后的大小大约为压缩前的 15% - 30% 左右(平均值)。推荐使用 YSlow 进行另外方面的优化。 如果您在使用中,发现任何 Bug ,请给我反馈,谢谢。 Javascript 代码压缩 网址 : http://julying.com/lab/compress-js-css/ 类型: 原创脚本 作者: 王子墨 邮箱 : i@julying.com 发布 : 2012-06-10 22:28 更新 : 2012-07-22 12:50 版权所有 2012 | julying.com 此插件遵循 MIT、GPL2、GNU 许可. 版权:Copyright (c) julying 版权所有,本程序为开源程序(开放源代码)。 http://julying.com/code/license/ 此程序会自动去除 注释,并且会对文件名进行安全检测、去重复、存在判定等操作,只允许 .js/.css 文件,并且不允许包含远程文件。 环境要求: >= PHP 5 压缩多个 js 方法: [removed] [removed] 压缩多个 CSS 方法: <link rel="stylesheet" media="all" href="http://julying.com/lab/compress-js-css/file=/lab/coffee/layerImages/layer.css,/lab/coffee/css/main.css"> </link> / 建议查看可看 《Yahoo工程师的前端优化建议--英文原版》. 如果英文阅读不是很流畅,请查看翻译版本: 《Yahoo工程师的前端优化建议-- 中文翻译版》 《Yahoo工程师的前端优化建议-- 中文翻译版》
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值