magento -- 为Magento提速再做一点小努力之移除不需要的JS

简介:

Magento的速度一直是个让人头疼的问题,加大硬件投入是效果最明显的,当然程序层面还是要努力的优化。常见的优化方式就不多说了,不外乎开启gzip,关闭不需要的模块,装php加速器等等,网上有一篇已经被转载了无数遍的文章专门有讲到。今天讲到的是一些小手段,有多少效果还未知,不过至少不会变慢。

有些人可能会注意到,新安装的Magento项目,本身页面就载入了很多外置JS,这里以1.4.1.0为例,通过Firebug可以看到,在没有修改任何文件和添加任何数据的情况下,Magento首页就要载入13个外置JS,总计300K出头(不算Gzip压缩),可是Magento真的需要那么多JS吗,就算需要,那退一步讲,首页能用到的JS能有几个。首页的载入速度是网站速度中很重要的一环,一方面是因为这是用户看到的第一个页面,另一方面访问其他页面时,浏览器可以大量使用已经从首页读来的数据缓存,而不必重新完全载入,所以会比访问首页快得多。

 

所以我的方式就是想办法在首页去掉那些首页用不到的外置JS,减少请求数。经过不完全测试,针对我自己在做的项目,slider.js,dragdrop.js,builder.js和ccard.js对首页是无效的,移除后没有任何影响,同时据估计,如果首页用不到表单验证,validation.js应该也是没有用的(这个是大头,有34KB)。我并没有测试所有的JS,而且不同的项目有不同的首页,可能需求的JS也不同,只是提供一种思路,对页面无用的JS是没必要载入的。

如何只在首页不载入某些特定的JS,这里提供一种方式。我们知道,通用的JS文件是在layout目录下的page.xml中载入的,载入的方式如下

 

在head这个block中用<action method="addJs">的方式载入外部的JS文件,相对应的,我们同样可以用写xml的方式移除这些JS文件,方法如下

 

因为只是在首页移除这些JS,其他页面还是要用的,所以把这段xml写在后台首页的CMS里。点击进入后台首页的CMS,点击左边的Design,把移除JS的代码写在Layout Update XML里面,保存后就可以看到效果,首页已经不会再载入你移除掉的JS,而其它页面依然存在。

 

同样的方式除了首页其他页面也可以使用,如果有足够的耐心的话,至少内容少了,访问速度总是会有所提升,不管效果明不明显。

 

PS:类似的思路我之前发过一篇文章,因为Magento的核心库prototype.js有127KB之巨,而绝大多数人应该是不会去动核心库的代码的,所以可以把prototype.js压缩,然后替换掉原来的,类似于jquery会提供一个jquery.min.js。

http://blog.csdn.net/shuishui8310/archive/2010/03/28/5422257.aspx

目录
相关文章
|
4月前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
41 0
|
JavaScript
js数组去重:二维数组去重、去除相同的值、移除相同的数组
js数组去重:二维数组去重、去除相同的值、移除相同的数组
|
JavaScript
js移除返回数组相同字段
js移除返回数组相同字段
|
Web App开发 JavaScript 前端开发
一日一技:如何使用JavaScript移除少数派的付费内容
一日一技:如何使用JavaScript移除少数派的付费内容
109 0
|
JavaScript API
js: 添加事件监听addEventListener、移除事件监听removeEventListener
js: 添加事件监听addEventListener、移除事件监听removeEventListener
136 0
|
前端开发 算法 JavaScript
LeetCode移除元素使用JavaScript解题|前端学算法
LeetCode移除元素使用JavaScript解题|前端学算法
99 0
LeetCode移除元素使用JavaScript解题|前端学算法
|
JavaScript
JS 刷 Leetcode:027. 移除元素
JS 刷 Leetcode:027. 移除元素
JS 刷 Leetcode:027. 移除元素
|
JavaScript 前端开发 算法
27. 移除元素:JavaScript 遍历和双指针两种解法
27. 移除元素:JavaScript 遍历和双指针两种解法
118 0
27. 移除元素:JavaScript 遍历和双指针两种解法
|
JavaScript 前端开发 索引
web前端学习(四十二)——JavaScript DOM元素(添加、移除及替换)、DOM集合(Collection)、DOM节点列表(NodeList)
web前端学习(四十二)——JavaScript DOM元素(添加、移除及替换)、DOM集合(Collection)、DOM节点列表(NodeList)
web前端学习(四十二)——JavaScript DOM元素(添加、移除及替换)、DOM集合(Collection)、DOM节点列表(NodeList)
|
JavaScript 前端开发
web前端学习(四十一)——JavaScript DOM EventListener(添加与移除监听事件)
web前端学习(四十一)——JavaScript DOM EventListener(添加与移除监听事件)
web前端学习(四十一)——JavaScript DOM EventListener(添加与移除监听事件)