日志更新

YUI Compressor 组件压缩 JavaScript 的一些原理

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 基础上的,所以上述所有的优化都是安全的。

扩展阅读:

模拟兼容性的 addDOMLoadEvent 事件

由于 window.onload 事件需要在页面所有内容(包括图片等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本。其实在现在大部分主流浏览器上(Firefox 3+,Opera 9+,Safari 3+,Chrome 2+)都提供了这一事件方法:addDOMLoadEvent

document.addEventListener("DOMContentLoaded", init, false);

那对于 IE 我们如何模拟 addDOMLoadEvent 事件呢?

Matthias Miller 最早提供了如下的解决方案:

// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {  
    if (this.readyState == "complete") {    
        init(); // call the onload handler  
    }
};
/*@end @*/

Diego Perini 在其后提供了一种利用 doScroll() 方法来模拟 addDOMLoadEvent 事件的方案,且现在主流的 JavaScript 框架(JQuery、YUI等)基本都采用的这一解决方案。

原理基本如下:

当 ondocumentready 事件触发,文档( document )已经完全解析和建立。如果组件需要操作最初的文档结构,初始化代码需被安置在这之后。ondocumentready 事件告知组件,整个页面已被加载,且在 初始文档的 onload 事件触发之前立即触发。

一些方法,例如 doScroll,要求最初的文档被完全加载。如果这些方法是初始化函数的一部分,当ondocumentready 事件触发,他们将被执行。

/*
 *
 * IEContentLoaded.js
 *
 * Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l.
 * Summary: DOMContentLoaded emulation for IE browsers
 * Updated: 05/10/2007
 * License: GPL/CC
 * Version: TBD
 *
 */

// @w    window reference
// @fn    function reference
function IEContentLoaded (w, fn) {
    var d = w.document, done = false,
    // only fire once
    init = function () {
        if (!done) {
            done = true;
            fn();
        }
    };
    // polling for no errors
    (function () {
        try {
            // throws errors until after ondocumentready
            d.documentElement.doScroll('left');
        } catch (e) {
            setTimeout(arguments.callee, 50);
            return;
        }
        // no errors, fire
        init();
    })();
    // trying to always fire before onload
    d.onreadystatechange = function() {
        if (d.readyState == 'complete') {
            d.onreadystatechange = null;
            init();
        }
    };
}

JQuery 1.3.2 中源码实现如下:

// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
    if ( jQuery.isReady ) return;

    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch( error ) {
        setTimeout( arguments.callee, 0 );
        return;
    }

    // and execute any waiting functions
    jQuery.ready();
})();

YUI 2.7.0 中源码实现如下:

if (EU.isIE) {

    // Process onAvailable/onContentReady items when the 
    // DOM is ready.
    YAHOO.util.Event.onDOMReady(
            YAHOO.util.Event._tryPreloadAttach,
            YAHOO.util.Event, true);
    
    var n = document.createElement('p');  
    
    EU._dri = setInterval(function() {
        try {
            // throws an error if doc is not ready
            n.doScroll('left');
            clearInterval(EU._dri);
            EU._dri = null;
            EU._ready();
            n = null;
        } catch (ex) { 
        }
    }, EU.POLL_INTERVAL); 
    
}

另外对于版本小于 Safari 3+ 的 Safari 浏览器,John Resig 也提供了一个解决方案:

if (/WebKit/i.test(navigator.userAgent)) { // sniff  
    var _timer = setInterval(function() {    
        if (/loaded|complete/.test(document.readyState)) {      
            clearInterval(_timer);      
            init(); // call the onload handler    
        }  
    }, 10);
}

怿飞提示:

  1. 如果脚本是动态注入到页面上,则原生的 DOMContentReady 事件是不会被触发(即:IE 除外)。
  2. IE 下对于在 iframe 里的使用 addDOMLoadEvent 事件,需做处理和慎用(这一点 YUI 做得不如 JQuery 细致)。
    // form JQuery 1.3.2
    // ensure firing before onload, maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", function(){
        if ( document.readyState === "complete" ) {
            document.detachEvent( "onreadystatechange", arguments.callee );
            jQuery.ready();
        }
    });

扩展阅读:

JavaScript 获取事件对象的一个注意点

平时我们获取事件对象一般写法如下:

function getEvent(event) {
    return event || window.event  // IE:window.event
}

如果没有参数,也可写成(非IE :事件对象会自动传递给对应的事件处理函数,且为第一个参数):

function getEvent() {
    return arguments[0] || window.event // IE:window.event
}

这样的写法在除 Firefox(测试版本:3.0.12,下同) 外的浏览器上运行都不会有问题,但 Firefox 为什么例外呢?让我们这样一种情形:

<button id="btn" onclick="foo()">按钮</button>

<script>
function foo(){   
   var e =  getEvent();
   alert(e);
}
</script>

运行结果在 Firefox 中是 undefined,为什么呢?

在 Firefox 中调用其实是这样的,先调用执行的是:

function onclick(event) {
    foo();
}

然后调用执行的是:

function foo(){   
   var e =  getEvent();
   alert(e);
}

会发现在 Firefox 下 onclick="foo()" 中的 foo() 无法自动传入事件对象参数,而默认传递给了系统生成的 onclick 函数,那本例我们可以通过 getEvent.caller.caller.arguments[0] 获得事件对象。

因此,我们的 getEvent 可以优化成(参照 yui_2.7.0b 中的 event/event-debug.js 中 getEvent 方法):

function getEvent(event) {
    var ev = event || window.event;

    if (!ev) { 
        var c = this.getEvent.caller;
        while (c) {
            ev = c.arguments[0];
            if (ev && (Event == ev.constructor || MouseEvent  == ev.constructor)) { //怿飞注:YUI 源码 BUG,ev.constructor 也可能是 MouseEvent,不一定是 Event
                break;
            }
            c = c.caller;
        }
    }

    return ev;
}

当然还有一个很简单的解决方法,就是手动将参数传递给 onclick="foo()"

<button id="btn" onclick="foo(event)">按钮</button>

如何在 IE 中使用 HTML5 元素

Sjoerd Visscher 发现了一个简洁的 方法 让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可:

document.createElement(elementName)

同理(对于 IE 来说 HTML5 元素即是未知元素),该方法也可顺延到 HTML5 的元素上(详细见:John Resig 写的 《HTML5 Shiv》 一文):

<html>
<head>
<style>section { color: red; }</style>
<script>document.createElement("section")</script>
</head>
<body>
<section>Hello World!</section>
</body>
</html>

在 IE 中,为了更方便使用 HTML5 元素,我们可以引入这样的脚本:

(function(){ 
    // from: http://dean.edwards.name/weblog/2007/03/sniff/
    if(!/*@cc_on!@*/0) return; 
       
    var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');    
    for(var i = 0, len = html5.length; i < len; i++ ) {        
        document.createElement(html5[i]);
    }
})();

详细具体应用的案例如下: