本站提供YUI在线压缩:http://yui.enjoyphp.com/

YUI Compressor 压缩 JavaScript 的内容包括:

  1. 移除注释
  2. 移除额外的空格
  3. 细微优化
  4. 标识符替换(Identifier Replacement)

YUI Compressor 包括哪些细微优化呢?

  • object[“property”] ,如果属性名是合法的 JavaScript 标识符(注:合法的 JavaScript 标识符——由一个字母开头,其后选择性地加上一个或者多个字母、数字或下划线)且不是保留字,将优化为: object.property
  • {“property”:123} ,如果属性名是合法的 JavaScript 标识符且不是保留字,将优化为 {property:123} (注:在对象字面量中,如果属性名是一个合法的 JavaScript 标识符且不是保留字,并不强制要求用引号引住属性名)。
  • ‘abcd’efgh’,将优化为 “abcd’efgh”。
  • “abcd” + “efgh”,如果是字符串相连接,将优化成 “abcdefgh”(注:所有在使用 YUI Compressor 的前提下,对于脚本中的字符串连接,使用连接符 “+” 的效率和可维护性最高)。

对于 JavaScript 最有效的压缩优化,当属标识符替换。

比如:

(function(){
function add(num1, num2) {
return num1 + num2;
}
})();

进行属标识符替换后:

(function(){
function A(C, B) {
return C+ B;
}
})();

再移除额外的空格,最终成了:

(function(){function A(C,B){return C+B;}})();

YUI Compressor 标识符替换仅替换函数名和变量名,那哪些不能被替代呢?

  1. 原始值:字符串、布尔值、数字、null 和 undefined。一般来说字符串占的空间最多,而非数字字面量其次(true、false,null,underfinded)。
  2. 全局变量:window、document、XMLHttpRequest等等。使用最多的就是 document、window。
  3. 属性名,比如:foo.bar。占据的空间仅次于字符串,”.” 操作符无法被代替,且 a.b.c 更加费空间。
  4. 关键字。经常被过度使用的关键字有:var、return。最好的优化方法:一个函数仅出现一次 var 和 return 关键字。

对于原始值、全局变量、属性名的优化处理方式大致相同:任何字面量值、全局变量或者属性名被使用超过 2 次(包括2次),都应该用局部变量存储代替。

但有部分情况下是禁止使用标识符替换的:

  1. 使用 eval() 函数。解决方法:不使用或者创建一个全局函数封装 eval()。
  2. 使用 with 语句。解决方法:方法同上。
  3. JScript 的条件注释。唯一解决的方法:不使用。

由于 YUI Compressor 是建立在 rhino interpreter 基础上的,所以上述所有的优化都是安全的。

今天看了GOOGLE的网站加速技巧,然后又看到了PHP小组针对上面技巧中的PHP部分做的反驳,受益匪浅啊。GOOGLE提出的一些PHP优化建议,之前在其他文章中也经常看到,所以在我脑海中就完全同意这些观点了;今天看到PHP小组的反驳后才知道,原来这些都是一些旧观点,基本是PHP4的优化建议,到PHP5中,这些所谓优化已经过时无效或已内置解决。连GOOGLE都不知道这些,相信大家知道的也不多,所以转来给大家看。

错误观点1. 没有原因尽量不要复制变量

PHP 4和5核心的Zend引擎使用了一个名为“copy-on-write”的内存管理系统。也就是说,无论你将一个变量的值赋值给另一个变量多少次,只要你不改变数值,数据是不会被复制的。范例:
$data
= str_repeat(“*”, 512 * 1024); // synthesize 512K of data
$memory_used_before = memory_get_usage();
$more_data = $data;
$memory_used_after = memory_get_usage();
print “Before: {$memory_used_before}nAfter: {$memory_used_after}n”;

有thread-safety及调试功能的PHP 5.3下:

之前:853968

之后:854236

没有thread-safety及调试功能的PHP 5.2下:

之前:581912

之后:581976

也就是,调试模式下有268字节的差别,正常模式下(普遍使用的)有64字节的差别。这和Google文中所述(51CTO编者注:Google原文的描述中,复制变量会“导致双倍的内存消耗”)相差甚远。

需要注意的是,PHP代码中坚决禁止在没有恰当过滤的情况下将用户提供的变量原本内容进行echo或者存储。

错误观点2. 为长字符串使用单引号

针对PHP 5.2及5.3的基准测试显示,虽然双引号使用窜改(interpolation)而单引号使用连锁(concatenation),这两个的速度是完全一致的(甚至双引号常常会更快一些)。当使用没有包含变量的普通字符串时,使用双引号的性能要明显占优。

错误观点3. 使用echo而非print

这两个方法的运行速度取决于你的PHP是如何设置在host上的。

错误观点4. 不要与echo一起使用concatenation(连锁)

事实正好相反。新的引擎处理多条echo的方法,导致在echo中使用concatenation实际上会比较快。

错误观点5. 使用switch/case替代if/else

最后,这句建议是彻底的胡说八道。决定在哪里使用switch/case或者if/else完全取决于编码习惯,他们的运行速度基本一致,除了在某些特定的情况下。

事实上,在更古老的PHP版本下(PHP 3及很老的PHP 4版本)这些大部分建议是正确的,然而在新一代的PHP下,这些绝对是错误的。

jQuery性能优化指南(1)

jQuery性能优化指南(2)

jQuery性能优化指南(3)

1,总是从ID选择器开始继承

在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。

例如有一段HTML代码:


    <div id="content">
    <form method="post" action="#">
    <h2>交通信号灯</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> 红色</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li>
    <li><input type="radio" class="off" name="light" value="green" /> 绿色</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

如果采用下面的选择器,那么效率是低效的。
var traffic_button = $(“#content .button”);

因为button已经有ID了,我们可以直接使用ID选择器。如下所示:
var traffic_button = $(“#traffic_button”);

当然 这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到 DOM遍历和循环,
为了提高性能,建议从最近的ID开始继承。
如下所示:
var traffic_lights = $(“#traffic_light input”);

2,在class前使用tag(标签名)

在jQuery中第二快的选择器是tag(标签)选择器( 比如:$(“head”) )。
跟ID选择器累时,因为它来自原生的getElementsByTagName() 方法。

继续看刚才那段HTML代码:


    <div id="content">
    <form method="post" action="#">
    <h2>交通信号灯</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> 红色</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li>
    <li><input type="radio" class="off" name="light" value="green" /> 绿色</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

比如需要选择 红绿 单选框,
那么可以使用一个tag name来限制(修饰)class ,如下所示:
var active_light = $(“input.on”);
当然也可以结合 就近的ID,如下所示:
var active_light = $(“#traffic_light input.on”);
在使用tag来修饰class的时候,我们需要注意以下几点:
(1) 不要使用tag来修饰ID,如下所示:
var content = $(“div#content”);
这样一来,选择器会先遍历所有的div元素,然后匹配#content。
(好像jQuery从1.3.1开始改变了选择器核心后,不存在这个问题了。暂时无法考证。)

(2)不要画蛇添足的使用ID来修饰ID,如下所示:
var traffic_light = $(“#content #traffic_light”);

注:如果使用属性选择器,也请尽量使用tag来修饰,如下所示:
$(‘p[row=”c3221″]’).html();而不是这样:$(‘[row=”c3221″]’).html();
特别提示:
tag.class 的方式 在IE下的性能  好于 .class 方式。
但在Firefox下  却低于 直接 .class方式。
Google浏览器下两种都差不多。
我页面上有300个元素,他们的性能差距都在50毫秒以内。
3,将jQuery对象缓存起来

把jQuery对象缓存起来 就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。
下面是一个jQuery新手写的一段代码:


    $("#traffic_light input.on").bind("click", function(){ ... });
    $("#traffic_light input.on").css("border", "1px dashed yellow");
    $("#traffic_light input.on").css("background-color", "orange");
    $("#traffic_light input.on").fadeIn("slow");

但切记不要这么做。

我们应该先将对象缓存进一个变量然后再操作,如下所示:


    var $active_light = $("#traffic_light input.on");
    $active_light.bind("click", function(){ ... });
    $active_light.css("border", "1px dashed yellow");
    $active_light.css("background-color", "orange");
    $active_light.fadeIn("slow");

记住,永远不要让相同的选择器在你的代码里出现多次.

注:(1)为了区分普通的JavaScript对象和jQuery对象,可以在变量首字母前加上 $ 符号。
(2)上面代码可以使用jQuery的链式操作加以改善。如下所示:


    var $active_light = $("#traffic_light input.on");
    $active_light.bind("click", function(){ ... })
                        .css("border", "1px dashed yellow")
                        .css("background-color", "orange")
                        .fadeIn("slow");

如果你打算在其他函数中使用jQuery对象,那么你必须把它们缓存到全局环境中。
如下代码所示:


    // 在全局范围定义一个对象 (例如: window对象)
    window.$my = {
    head : $("head"),
    traffic_light : $("#traffic_light"),
    traffic_button : $("#traffic_button")
    };

    function do_something(){
    // 现在你可以引用存储的结果并操作它们
    var script = document.createElement("script");
     $my.head.append(script
    // 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
    $my.cool_results = $("#some_ul li");
    $my.other_results = $("#some_table td");
     // 将全局函数作为一个普通的jquery对象去使用.
    $my.other_results.css("border-color", "red");
     $my.traffic_light.css("border-color", "green");
    }  
    //你也可以在其他函数中 使用它 

jQuery性能优化指南(1)到此结束,请查看指南(2)。