OK，我们现在已经知道了不同浏览器之间实现的差别，兼容代码如下：

var addEvent = (function(){
        if (window.addEventListener) {
            return function(el, sType, fn, capture) {
                el.addEventListener(sType, fn, (capture));
            };
        } else if (window.attachEvent) {
            return function(el, sType, fn, capture) {
                el.attachEvent("on" + sType, fn);
            };
        } else {
            return function(){};
        }
    })(),
    // isFirefox 是伪代码，大家可以自行实现
    mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

// object 也是伪代码，你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
    event = window.event || event;
    // todo something
}, false);

我们再回到要实现的交互效果上，现在还有其他一些问题需要来解决：

1. 页面字体到底是放大还是缩小呢？ ==> 鼠标滚轮是向上滚动还是向下滚动呢？
2. 页面字体缩放的倍数到底是多少呢？ ==> 鼠标滚轮滚动的幅度大小是多少呢？

还好，我们可以通过 event 的某些属性值得到这些信息：

1. “mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。
2. “DOMMouseScroll” 事件中的 “event.detail” 属性值：返回的值，如果是负值说明滚轮是向上滚动（与 “event.wheelDelta” 正好相反），如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数，即：幅度大小 = 返回的值 / 3。
3. “mousewheel” 事件在 Opera 10+ 中却是个特例，既有 “event.wheelDelta” 属性，也有 “event.detail” 属性。

注：上面第三点，在《The onmousewheel event of JavaScript》一文中有这样一段批注：

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE’s.

但经测试， Opera 9+ 和 Opera 10+ 中的 event.wheelDelta 属性与其他浏览器中的表现完全一致，未发现异常与错误，从接口角度来说，代码中应优先使用 “event.wheelDelta” 属性。

此时代码如下：

var addEvent = (function(){
        if (window.addEventListener) {
            return function(el, sType, fn, capture) {
                el.addEventListener(sType, fn, (capture));
            };
        } else if (window.attachEvent) {
            return function(el, sType, fn, capture) {
                el.attachEvent("on" + sType, fn);
            };
        } else {
            return function(){};
        }
    })(),
    stopEvent: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }

        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    zoomIn = function(){},
    zoomOut = function(){},
    // isFirefox 是伪代码，大家可以自行实现
    mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";

// object 是伪代码，你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
    var delta = 0;
    event = window.event || event;
    stopEvent(event);

    delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3);
    // zoomIn, zoomOut 是伪代码，需要实现的缩放事件
    delta > 0 ? zoomIn(delta): zoomOut(Math.abs(delta));
} , false);

事件和事件属性的测试案例：http://www.planabc.net/demo/event/mousewheel.html

扩展阅读：

• 《Mouse wheel programming in JavaScript》

http://www.planabc.net/lab/tools/base64.html

原理详见上篇文章：《JavaScript 中的 Base64 编码（一）：Encoding 》

注：对于下面的代码：

TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz
IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg
dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGlu
dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo
ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=

各浏览器原生的解码方法处理不太一致，Opera 比较智能能够处理此情形，但 Firefox、Safari 和 Chrome 却无法处理。

出现上面代码的原因为：规则约定 Base64 编码过程每76个字符加一个换行符。

Firefox、Safari 和 Chrome 下的修复非常简单（对输入的字符去除换行符等）：

text = text.replace(/\s*/g, ''); //Fix Firefox/Safari/Chrom bug: MultiLine

如有 BUG 欢迎随时联系：blankzheng#gmail.com

• btoa(text) – base64 encodes text.
• atob(text) – base64 decodes text.

而对于 IE 我们可以根据已知的 Base64 编码原理进行编写：

Base64 编码将每三个 8Bit 的字节（注：由于要求输入的字符为 8Bit 字节，故范围应该在 ASCII 字符范围内，即：\u0000-\u00ff）转换为四个 6Bit 的字节（3*8 = 4*6 = 24），然后在每个 6Bit 字节前添两位高位 0，组成四个 8Bit 的字节，最后再将每个 8Bit 字节转换成十进制的数字，对应 Base64 编码表（为了保证所输出的编码为可读字符，Base64制定了一个编码表，以便进行统一转换，编码表的大小为 2^6=64，即 Base64 名称的由来）输出编码后的字符。

如果原字节不足 3 的倍数，则用 0 填充，输出字符使用“=”，因此编码后输出的文本末尾可能会出现 1 或 2 个“=”（余数 = 原文字节数 MOD 3 ，如果余数为 1，则要补 2 个“=”，为 2，则补 1 个“=”）。

比如：

字符：               f        2         e
ASCII：              102      50        101
3个8Bit字节：        01100110 00110010  01100101
4个6Bit字节：          011001   100011    001001    100101
高位补0：            00011001 00100011  00001001  00100101
十进制：             25       35        9         37
对应码表值：         Z        j         J         l

最终： btoa('f2e') = ZjJl

字符：              b        a        s        e
ASCII：             98       97       115      101
3个8Bit字节：       01100010 01100001 01110011 01100101 00000000 00000000
4个6Bit字节：         011000   100110   000101   110011   011001   010000    000000   000000
高位补0：           00011000 00100110 00000101 00110011 00011001 00010000 00000000 00000000
十进制：            24       38       5        51       25       16
对应码表值：        Y        m        F        z        Z        Q        =        =

最终： btoa('base') = YmFzZQ==

如果将上面的 Base64 编码原理换成接近于编程的思维，过程大致如下（以f2e为例）：

注：Base64 编码表我们可以简化为字符串，并通过其进行位置索引：

table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"

第一步：

1. 第一个字符 f（102 -> 01100110）通过右移 2 位（first >> 2）获得第一个目标字符（00011001 -> 25），索引编码表中对应的目标字符 Z（table.charAt(first >> 2)）。

第二步：

1. 将第一个字符 f（102 -> 01100110）与 3（00000011）进行 AND 运算（first & 3)）:

       01100110
   AND 00000011
   ------------
       00000010

2. 第一个字符运算后（00000010）再左移 4 位（(first & 3) << 4），得：00100000。
3. 将第二个字符 2 （50 -> 00110010）右移 4 位（second >> 4），得：00000011。
4. 最后将运算后的两个字符进行 OR 运算（(first & 3) << 4 | second >> 4）：

       00100000
   OR  00000011
   ------------
       00100011

   获得第二个目标字符（00100011 -> 35），索引编码表中对应的目标字符 j（table.charAt((first & 3) << 4 | second >> 4)）。

第三步：

1. 将第二个字符 2 （50 -> 00110010）与 15（00001111，十六进制：0x0f）进行 AND 运算（second & 0x0f）:

       00110010
   AND 00001111
   ------------
       00000010
   

2. 第二个字符运算后（00000010）再左移 2 位（(second & 0x0f) << 2），得：00001000。
3. 第三个字符 e（101 -> 01100101）右移 6 位（third >> 6），得：00000001。
4. 最后将运算后的两个字符进行 OR 运算（(second & 0x0f) << 2 | third >> 6）：

       00001000
   OR  00000001
   ------------
       00001001

   即获得第三个目标字符（00001001 -> 9），索引编码表中对应的目标字符 J（table.charAt((second & 0x0f) << 2 | third >> 6)）。

第四步：

1. 取第三个字符 e（101 -> 01100101）的右 6 位，即与 63 （00111111，16进制：0x3f）进行 AND 运算（third & 0x3f）：

       01100101
   AND 00111111
   ------------
       00100101

   获得第四个目标字符（00100101 -> 37），索引编码表中对应的目标字符 l（table.charAt(third & 0x3f)）。

异常情况：

1. 当第二个字符不存在时（即：余数 = 原文字节数 MOD 3 ，余数为 1），截止至第二步的第 2 小步，然后在最终输出的目标字符后添加两个“=”。
2. 当第三个字符不存在时（即：余数 = 原文字节数 MOD 3 ，余数为 2），截止至第三步的第 2 小步，然后在最终输出的目标字符后添加两个“=”。

代码实现如下：

if(!window.btoa) {
    window.btoa  = function(text) {
        if (/([^\u0000-\u00ff])/.test(text)) return;
        var table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
            i = 0,
            cur, prev, byteNum,
            result=[];    

        while(i < text.length){
            cur = text.charCodeAt(i);
            byteNum = (i+1) % 3;

            switch(byteNum){
                case 1: //first byte
                    result.push(table.charAt(cur >> 2));
                    break;

                case 2: //second byte
                    result.push(table.charAt((prev & 3) << 4 | (cur >> 4)));
                    break;

                case 0: //third byte
                    result.push(table.charAt((prev & 0x0f) << 2 | (cur >> 6)));
                    result.push(table.charAt(cur & 0x3f));
                    break;
            }

            prev = cur;
            i++;
        }

        if (byteNum == 1){
            result.push(table.charAt((prev & 3) << 4));
            result.push("==");
        } else if (byteNum == 2){
            result.push(table.charAt((prev & 0x0f) << 2));
            result.push("=");
        }

        return result.join("");
    }
} 

-----------------------------------------------------------------------------

下篇：《JavaScript 中的 Base64 编码（二）：Decoding》

-----------------------------------------------------------------------------

扩展阅读：

• 《Computer science in JavaScript: Base64 encoding》

function evaluate() {
    var multiplier = [2,3,4,5,6],
        sortNumber = function (number) {
            return parseInt((number + '').split('').sort().join(''), 10);
        },
        gameOver = false, // 判断是否已经找到，如果找到，结束循环
        determine = function(origin) {
            var result, i, len = multiplier.length;
            for( i = 0; i < len; i++ ) {
                result = origin * multiplier[i];
                if (result < 100000 || result > 999999 || sortNumber(result) !== sortNumber(origin)) {
                    return;
                }
                if(i === (len-1)){
                    gameOver = true;
                    alert('此六位数是 ' + origin);
                }
            }
        };

    // Math.floor(1000000/6) 缩小范围
    for(var j = Math.floor(1000000/6); j >= 100000  && !gameOver; j--) {
        determine(j);
    }
}

扩展阅读：

• 《用python解一道奥数题（小学三年级）》

alert(Function instanceof Object); // true
alert(Object instanceof Function); // true

Function 是 Object 的实例，Object 也是 Function 的实例，好“纠缠”的关系。

代码片段一：

alert(Object.forEach); // undefined

Function.prototype.forEach = function(object, block, context) {
    for (var key in object) {
        if (typeof this.prototype[key] == "undefined") {
            block.call(context, object[key], key, object);
        }
    }
};

alert(Object.forEach);
alert(Function.forEach);
alert(Object.forEach === Function.forEach); // true

给 Function 设置的原型方法 forEach，“有趣”的是 Object 也能够获取。

至于为什么可以从 JavaScript Object layout 图中获取部分解答：

看懂上图了没？如果看懂了，留道思考题给大家：

function Foo() {};
var foo = new Foo();

alert(foo instanceof Foo); // ?
alert(foo instanceof Object); // ?
alert(foo instanceof Function); // ?
alert(Foo instanceof Function); // ?
alert(Foo instanceof Object); // ?

if (typeof Sandbox === 'undefined' || !Sandbox) {
    Sandbox = function(o) {
        var self = this;

        if (!(self instanceof Sandbox)) { // 允许没有 new 操作符的实例化
            return new Sandbox(o);
        } else {
            self._init();
            self._config(o);

            // 预加载某些指定模块
            /* self._setup(); */

            // 返回实例本身，支持链式模式
            return self;
        }
    };
}

// Sandbox的（类）静态属性
Sandbox.Env = {
    /* sidx: 0 , */
    mods: {}
};

(function() {
    var p, i,
        SLICE         = Array.prototype.slice,
        /* instances     = {}, */
        time          = new Date().getTime(),
        win           = window,
        doc           = document;

    Sandbox.prototype = {

        // 格式化配置参数
        // NOTE：本着简单适用的原则，取消了原先 YUI 中对 loader 的支持
        _config: function(o) {

            var c = this.config, i, j, m, mods;

            o = o || {};

            // mods = c.modules;

            for (i in o) {
                if (i == 'win') {
                    c[i]  = o[i].contentWindow || o[i];
                    c.doc = c[i].document;
                } else {
                    c[i]  = o[i];
                }
            }
        },

        /**
         * 初始化沙箱实例
         * @private
         */
        _init: function() {

            var self  = this,
                G_Env = Sandbox.Env,
                Env   = self.Env;

            if(!Env) {
                self.Env = {
                    mods: {},
                    _used: {},
                    _attached: {},
                    _loaded: {}
                };

                Env = self.Env;

                /* if (G_Env && self !== Sandbox ) {
                    Env._sidx  = ++ G_Env.sidx;
                    Env._guid = ('sandbox_' + Env._sidx + '_' + time).replace(/\./g, '_');
                }

                self.id = Env._guid;
                instances[self.id] = self; */
            }

            self.constructor = Sandbox;

            self.config = {
                win: win || {},
                doc: doc || {}
            };

        },

        // 预留预加载某些指定模块，接口可根据实际需要扩展
        /* _setup: function(o) {}, */

        /**
         * 添加模块
         * @method add
         * @param name {string} 模块名
         * @param fn {Function} 模块对应的函数
         * @param version {string}
         * @param details 可选配置：
         *     requires   -  {array}  在本模块执行之前附加的必须的模块数组
         *     use  - {array} 在本模块执行之后附加的模块数组
         *
         */
        add: function(name, fn, details) {
            Sandbox.Env.mods[name] = {
                name: name,
                fn: fn,
                details: details || {}
            };

            return this; // chain support
        },

        /**
         * 执行与 Sandbox 实例相关联的模块：details.requires--》fn--》details.use
         * @method _attach
         * @param r {array} 模块列表数组
         * @private
         */

        _attach: function(r) {

            var mods = Sandbox.Env.mods,
                self = this,
                attached = self.Env._attached,
                i, l = r.length, name, m, fn, d, req, use;

            for (i = 0; i < l; i = i+1) {

                name = r[i];
                m    = mods[name];

                if (!attached[name] && m) {

                    attached[name] = true;

                    fn  = m.fn;
                    d   = m.details;
                    req = d.requires;
                    use = d.use;

                    if (req) {
                        self._attach(req);
                    }

                    if (fn) {
                        fn(self);
                    }

                    if (use) {
                        self._attach(use);
                    }
                }
            }

        },

        /**
         * 绑定模块至 Sandbox 实例
         * @param modules* {string} 1-n 个模块 (uses arguments array)
         * @param *callback {function} callback function  如果包括，必须是最后一个参数。
         *
         * Sandbox().use('planabc.net')
         * Sandbox().use('planabc.net',function(){})
         * Sandbox().use('planabc.net','planabc.com')
         * Sandbox().use('planabc.net','planabc.com',function(){})
         * Sandbox().use('*'); // use all available modules
         *
         */
        use: function() {

            var self = this,
                a = SLICE.call(arguments, 0),
                mods = Sandbox.Env.mods,
                used = self.Env._used,
                loader,
                firstArg = a[0],
                callback = a[a.length-1],
                k, i, l,
                r = [],
                process = function(name) {

                    // 添加模块至附加的模块列表
                    r.push(name);

                    // 一个模块仅附加一次
                    if (used[name]) {
                        return;
                    }

                    var m = mods[name], req, use, j, jl, t, tl,
                        d = m.details;

                    if (m) {
                        used[name] = true;

                        req = d.requires;
                        use = d.use;
                    }

                    // 附加上 requires 模块
                    if (req) {
                        for (j = 0,jl = req.length ; j < jl; j = j + 1) {
                            process(req[j]);
                        }
                    }

                    // 附加上 use 模块
                    if (use) {
                        for (t = 0, tl = use.length; t < tl; t = t + 1) {
                            process(use[t]);
                        }
                    }

                },

                onComplete;

            if (typeof callback === 'function') {
                a.pop();
            } else {
                callback = null;
            }

            onComplete = function() {
                if (callback) {
                    callback(self);
                }
            };

            // Sandbox().use('*');
            if (firstArg === "*") {
                a = [];
                for (k in mods) {
                    if (mods.hasOwnProperty(k)) {
                        a.push(k);
                    }
                }

                if (callback) {
                    a.push(callback);
                }

                return self.use.apply(self, a);
            }

            l = a.length;

            // 处理所有必须和附加的模块
            for (i = 0; i < l; i = i + 1) {
                process(a[i]);
            }

            self._attach(r);
            onComplete();

            return self; // chain support
        }
    };

})();

测试页面：http://www.planabc.net/lab/yui/sandbox.html

故，获得当前 select 元素值的脚本如下：

var getSelectValue = function(select) {
    var idx = select.selectedIndex,
        option,
        value;
    if (idx > -1) {
        option = select.options[idx];
        value = option.attributes.value;
        return (value && value.specified) ? option.value : option.text;
    }
    return null;
}

如果不太了解的朋友，可详细阅读：《Event delegation in JavaScript》，这里不再累述。

首先让我们一起来回顾一些常识：

1. 通常支持事件冒泡（Event Bubbling）的事件类型为鼠标事件和键盘事件，例如：mouseover, mouseout, click, keydown, keypress。
2. 接口事件则通常不支持事件冒泡（Event Bubbling），例如：load, change, submit, focus, blur。

很明显：focus 和 blur 都属于不支持冒泡的接口事件。既然都不支持冒泡，那又如何实现事件代理呢？

可以换个角度，逆向思维，尝试事件捕获（Event Capturing，除了IE，现在流行的标准浏览器均支持）。

测试后会发现，如果你捕获 focus 或 blur 事件，目标元素的祖先元素均执行事件函数。至于为什么？或许是实现的一个 BUG。

el.addEventListener('focus', focusHandler, true);
el.addEventListener('blur', blurHandler, true);

那对于 IE ，我们如何实现呢？

非常幸运，IE 下支持 focusin 和 focusout 事件，非常类似于 focus 和 blur 事件，唯一不同的是，这两种事件支持事件冒泡（Event Bubbling）。

el.onfocusin = focusHandler;
el.onfocusout = blurHandler;

很完美的解决方案：

if (document.addEventListener) {
    el.addEventListener('focus', focusHandler, true);
    el.addEventListener('blur', blurHandler, true);
} else {
    el.onfocusin = focusHandler;
    el.onfocusout = blurHandler;
}

当你下次看到 YUI 2.8 的 event/event-debug.js 源码中下面几段代码时，一定会清晰很多：

576    // String constants used by the addFocusListener and removeFocusListener methods
577
578     FOCUSIN = "focusin",
579     FOCUSOUT = "focusout";

        ....

750     _specialTypes: {
751         focusin: (isIE ? "focusin" : "focus"),
752         focusout: (isIE ? "focusout" : "blur")
753      },

        ....

1053    addListener: function (el, sType, fn, obj, overrideContext) {
1054
1055	    var capture = ((sType == FOCUSIN || sType == FOCUSOUT) && !YAHOO.env.ua.ie) ? true : false;
1056
1057        return this._addListener(el, this._getType(sType), fn, obj, overrideContext, capture);
1058
1059    },

isFunction: function( obj ) {
    return toString.call(obj) === "[object Function]";
},

同时 jQuery 的作者也作了部分注释：

See test/unit/core.js for details concerning isFunction. Since version 1.3, DOM methods and functions like alert aren’t supported. They return false on IE (#2968).

即：此方法在 IE 下无法正确识别 DOM 方法和一些函数（例如 alert 方法等）。

为什么会这样呢？

详细看测试页面：http://www.planabc.net/demo/isfunction/

会发现在 IE 下用 typeof 检测 alert、confirm 方法以及 DOM 的方法显示 object，而其他浏览器下显示 function。

那如何完善这个问题呢？

1. typeof 检测某个方法（例如：document.getElementById） 是否是 object，如何是，则重写 isFunction 函数；
2. 怎样重写呢？正则判断传入的对象字符串后（”" + fn），是否起始位置含有 function，即：/^\s*\bfunction\b/.test(” + fn)。

OK，看下根据以上思路修改后的 isFunction 函数：

var isFunction = (function() {
    // Performance optimization: Lazy Function Definition
    return "object"  === typeof document.getElementById ?
           isFunction = function(fn){
                try {
                    return /^\s*\bfunction\b/.test("" + fn);
                } catch (x) {
                    return false
                }
           }:
           isFunction = function(fn){
               return "[object Function]" === Object.prototype.toString.call(fn);
           };
})()

参考阅读：

• 《isFunction hacked, isCallable solution》
• 《isFunction() or isObject(), that is the question ? 》
• 《Lazy Function Definition Pattern》

值得庆幸的是，我们可以通过数组的 slice 方法将 arguments 对象转换成真正的数组：

var args = Array.prototype.slice.call(arguments, 0);

对于slice 方法，ECMAScript 262 中 15.4.4.10 Array.prototype.slice (start, end) 章节有备注：

The slice function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method. Whether the slice function can be applied successfully to a host object is implementation-dependent.

《Pro JavaScript Design Patterns》（《JavaScript 设计模式》）的作者 Dustin Diaz 曾指出：

instead of…
var args = Array.prototype.slice.call(arguments, 0); // 怿飞注：下称方法一
do this…
var args = [].slice.call(arguments, 0); // 怿飞注：下称方法二

但二者的性能差异真的存在吗？经过个人简单测试发现：

在 arguments.length 较小的时候，方法二性能上稍有一点点优势，而在arguments.length 较大的时候，方法一却又稍有优势。

2010年1月30日更新（测试地址）：几经验证，性能差异不大，反而第一张方法性能稍优势一点，或许由于第二种方法创建新数组产生开销。

最后附上方法三，最老土的方式：

var args = [];
for (var i = 1; i < arguments.length; i++) {
    args.push(arguments[i]);
}

不过对于平常来说，个人建议使用第一种方法，但任何解决方案，没有最好的，只有最合适：

var args = Array.prototype.slice.call(arguments, 0); 

------------------------------------------------------------------

如何将 NodeList （比如：document.getElementsByTagName('div')）转换成数组呢？

解决方案简单如下：

function nodeListToArray(nodes){
    var arr, length;

    try {
        // works in every browser except IE
        arr = [].slice.call(nodes);
        return arr;
    } catch(err){
        // slower, but works in IE
        arr = [];
        length = nodes.length;

        for(var i = 0; i < length; i++){
             arr.push(nodes[i]);
         }  

        return arr;
    }
} 

为什么 IE 中 NodeList 不可以使用 [].slice.call(nodes) 方法转换呢？

In Internet Explorer it throws an error that it can't run Array.prototype.slice.call(nodes) because a DOM NodeList is not a JavaScript object.

var toObject = function(a) {
    var o = {};
    for (var i = 0; i < a.length; i = i+1) {
     o[a[i]] = true;
    }
    return o;
};

var keys = function(o) {
    var a=[], i;
    for (i in o) {
        if (lang.hasOwnProperty(o, i)) { // YUI的方法
            a.push(i);
        }
    }
    return a;
};

var uniq = function(a) {
    return keys(toObject(a));
};

详细分析，见同事 长天 的分享 《巧妙去除数组中的重复项》。

自己使用的方式与 YUI 的方式十分相似，不过仅使用了一次循环便完成了删除数组中重复项，如下：

var uniq = function (arr) {
    var a = [],
        o = {},
        i,
        v,
        len = arr.length;

    if (len < 2) {
        return arr;
    }

    for (i = 0; i < len; i++) {
        v = arr[i];
        if (o[v] !== 1) {
            a.push(v);
            o[v] = 1;
        }
    }

    return a;
}

经过了简单的测试：自己使用的方式性能远远高于 YUI 的方式。

抛砖引玉，欢迎大家提供更好的处理方法。

2009年12月28日更新：

以上两种函数方法暂时都不能处理复杂的含有混合类型的数组（感谢 小猫 提出的疑问），如：[0,"0",1,"1",0]、["null",null]。

对于能够约定类型为数字（注：要求非0开头的数字，小数除外）或字符串的数组，我们可以用改进后的函数方法（感谢 closurecache 提供的思路）：

var uniq = function (arr) {
    var a = [],
        o = {},
        i,
        v,
        cv, // corrected value
        len = arr.length;

    if (len < 2) {
        return arr;
    }

    for (i = 0; i < len; i++) {
        v = arr[i];

        /* closurecache 提供的函数中使用的是  cv = v + 0;，
         * 这样就无法辨别类似[1, 10, "1", "10"]的数组，
         * 因为运算后 => 1, 10, 10, 100，很明显，出现了重复的标示符。
         * 加前面就难道没问题吗？
         * 有的：数组中不能出现类似01 、001，以 0 开头的数字，
         * 但适用性比原先更广。
         */
        cv = 0 + v;

        if (!o[cv]) {
            a.push(v);
            o[cv] = true;
        }
    }

    return a;
}

如果大家想在此解题思路的基础上，更完美一点，推荐 Dexter.Yy 的方法，进行类型判断，给予唯一标示符，详见 评论 20 楼。

没有最好，只有最合适的方式，其实使用 Array.indexOf() 的思路也是不错的选择，对于已经支持的浏览器直接用原生的 Array.indexOf() 方法，对于未支持的，我们增加 Array.indexOf() 方法，如下：

if(!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (obj, fromIndex) {
        if (fromIndex == null) {
            fromIndex = 0;
        } else if (fromIndex < 0) {
            fromIndex = Math.max(0, this.length + fromIndex);
        }

        for (var i = fromIndex; i < this.length; i++) {
            if (this[i] === obj)
                return i;
            }
        return -1;
    };
}

接下来，实现的过程就非常简单了。

对于使用 Array.indexOf() 方法实现方案的优化提示：找到相同值时，从数组中移除，以减少下次遍历的量。

试想如果我们将此功能移植到 Firefox 上一定有趣！

第一步，在状态栏中显示图标和数据。

通过 《如何创建 Firefox 的 Jetpack 扩展》 这篇文章，我们可以轻易的创建：

jetpack.statusBar.append({
    html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail邮件图标和未读新邮件数
    width: 55, //状态栏上的宽度为55
    onReady: function(widget) {
        $("#count", widget).css({ //给未读新邮件数添加样式
            cursor: "pointer",
            paddingLeft:"4px",
            fontFamily: "Tahoma, Arial, sans-serif",
            verticalAlign: "top",
            fontSize: "10px",
            lineHeight:"18px",
        });
    }
});

第二步，获取 Gmail 的数据，更新未读新邮件数。

可以通过 Gmail 邮件的 Feed 获得（需登录）：https://mail.google.com/mail/feed/atom

Feed 源码中的 fullcount 标签是用来记录当前的未读新邮件数。

OK，首先数据源有了。接着，我们使用再熟悉不过的 Ajax 技术，获取到数据并赋给指定的元素。

function update(widget) {
    var widget = $(widget)；

    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            widget.find("#count").text(newcount); //赋给指定的元素
        } else { //如果未登录，显示“Login”
            widget.find("#count").text( "Login" );
	}
    });
}

我们还可以通过进行一些优化：比如当未读新邮件数大于原来的邮件数时，增加提示信息等。
提示信息这里使用 jetpack.notifications.show(options) 方法，options 参数有三个属性：title (String)：通知的标题；icon (URL)：通知 icon 的 URL；body (String)：通知的主题内容。

优化后的代码如下：

var count = 0;

function update(widget) {
    var widget = $(widget),
        notify = function(msg) { // 定义通知的公用方法
            jetpack.notifications.show({
                title: "Gmail",
                body: msg,
                icon: "http://mail.google.com/mail/images/favicon.ico"
            });
        };

    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            if(newcount > count) { // 如果未读新邮件数大于原来的邮件数，则提示来自哪里
                var sender = $(xml).find("name").get(0).textContent;
                notify("New message from "+sender);
            }
            count = newcount;
            widget.find("#count").text(count); //赋给指定的元素

        } else { //如果未登录，提示登录
            widget.find("#count").text( "Login" );
            notify("Please login to Gmail");
	}
    });
}

第三步：设置定时更新数据。

我们设置每 1 分钟更新一次数据：

setInterval( function() { update(widget) }, 60*1000 );

第四步：设置点击扩展后的链接窗口。

$(widget).click(function() { //设置点击扩展后的链接窗口
    jetpack.tabs.open("http://mail.google.com");
    jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});

jetpack.tabs 为浏览器窗口的标签对象，.open(url) 为新打开浏览器窗口标签的方法，.focus()为选中此标签为当前标签的方法。

OK，Firefox 的 Jetpack 扩展——Gmail 邮件提醒，经过简单的四步轻松完成。

全部代码如下：

var count = 0;

function update(widget) {
    var widget = $(widget),
        notify = function(msg) { // 定义通知的公用方法
            jetpack.notifications.show({
                title: "Gmail",
                body: msg,
                icon: "http://mail.google.com/mail/images/favicon.ico"
            });
        };

    $.get("https://mail.google.com/mail/feed/atom", function(xml) {
        var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
        if(el){
            var newcount = parseInt(el.get(0).textContent);
            if(newcount > count) { // 如果未读新邮件数大于原来的邮件数，则提示来自哪里
                var sender = $(xml).find("name").get(0).textContent;
                notify("New message from "+sender);
            }
            count = newcount;
            widget.find("#count").text(count); //赋给指定的元素

        } else { //如果未登录，提示登录
            widget.find("#count").text( "Login" );
            notify("Please login to Gmail");
	}
    });
}

jetpack.statusBar.append({
    html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail邮件图标和未读新邮件数
    width: 40, //状态栏上的宽度为40，预留3位数的宽度
    onReady: function(widget) {
        $("#count", widget).css({ //给未读新邮件数添加样式
            cursor: "pointer",
            paddingLeft:"4px",
            fontFamily: "Tahoma, Arial, sans-serif",
            verticalAlign: "top",
            fontSize: "10px",
            lineHeight:"18px",
        });

        $(widget).click(function() { //设置点击扩展后的链接窗口
            jetpack.tabs.open("http://mail.google.com");
            jetpack.tabs[ jetpack.tabs.length-1 ].focus();
        });

        update(widget);
	setInterval( function() {update(widget) }, 60*1000 );
    }
});

测试Demo：http://www.planabc.net/lab/jetpack/gmail/

对于 Jetpack 详细的 API，可以阅读 about:jetpack 页面的 API Reference 标签部分。

案例源码来自：https://jetpack.mozillalabs.com/demos/gmail-checker.js

Adobe Air 也好，Web OS 也好， Jetpack 也好，至少让我们肯定一点，前端的价值将会在机遇中越来越大的被展现。

下面让我们一起来看看如何一步步创建你的第一个 Firefox 的 Jetpack 扩展：

第一步：安装 Jetpack 插件

Jetpack 插件地址：https://jetpack.mozillalabs.com/install.html

安装完成 Jetpack 插件后，你就可以通过在地址栏中输入 about:jetpack 来访问 Jetpack 本地界面了。

第二步：创建 planabc.js 文件。

planabc.js 的详细代码为：

jetpack.statusBar.append({
    html: '<img src="http://www.planabc.net/favicon.ico"/>',
    width: 16,
    onReady: function(widget){
        $(widget).click(function(){
            jetpack.tabs.focused.contentWindow.location = "http://www.planabc.net/";
        });
    }
});

jetpack.statusBar.append 将执行 JavaScript 对象（该JavaScript 对象有四个属性：html、url、width 和 onReady）。

• html 属性：定义初始的 HTML，将显示在状态栏。此样例中，将显示一个简单的 IMG 元素。
• url 属性：定义将在状态栏上显示的外部 HTML 内容的 URL。此样例中，未使用该属性。
• width 属性：定义内容在状态栏上的宽度（单位：像素）。此样例中，定义为 16 像素，也就是 IMG 元素本身的宽度。
• onReady 属性：定义被调用的函数（一旦状态栏被创建，此函数将会被调用）。由于 Jetpack 集成了 jQuery 框架，所以可以直接使用 jQuery 的属性和方法。在此样例中定义了这样一个函数，当点击该 Jetpack 扩展时，我们将修改 jetpack.tabs.focused.contentWindow.location 属性为 http://www.planabc.net/。jetpack.tabs.focused.contentWindow 对象相当于 window 对象，你可以访问通过 JavaScript 访问网页。

第三步：测试 planabc.js 代码。

通过在地址栏中输入 about:jetpack 访问到 Jetpack 本地界面，点击 Develop 标签，然后将 planabc.js 文件中的代码拷贝到页面上的输入框中。点击 “try out this code” 按钮，你将会看到一个新的 icon 出现在 Firefox 窗口的右下角。

Develop 非常方便在代码部署前，在 Firefox 中测试你的代码。

第四步：部署 Jetpack 扩展。

创建一个简单的页面，在页面的 HEAD 元素内添加如下的 LINK 元素：

<link rel="jetpack" href="planabc.js" name="怿飞的博客"/>

HTML 文件源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Mozilla Jetpack 案例</title>
        <link rel="jetpack" href="planabc.js" name="怿飞的博客"/>
    </head>
    <body>
        <a href="http://www.planabc.net/2009/10/13/build_firefox_extensions_with_jetpack/">《如何创建 Firefox 的 Jetpack 扩展》 </a>
    </body>
</html>

最后，将 HTML 文件和 planabc.js 文件都上传到服务器。

第五步：安装 Jetpack 扩展。

在 Firefox 中浏览该 HTML 页面时，Jetpack 插件将会在屏幕的最上方显示一个安装条，点击 “install” 按钮。将会提示安装不受信任的特性，点击 “I know what I’m doing. Install It!” 按钮。

安装完成和第三步测试一样，将会看到一个新的 icon 出现在 Firefox 窗口的右下角。如果此时你发现状态栏有2个相同的新 icon，那意味着原先的测试代码依然还在 about:jetpack 页面的 Develop 标签页中，清空输入框的代码即可消除。

返回到 about:jetpack 页面，点击 Installed Features 标签，将在列表中显示有新安装的 Jetpack 扩展。

测试Demo：http://www.planabc.net/lab/jetpack/planabc/

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

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

扩展阅读：

• 《Extreme JavaScript Compression With YUI Compressor》

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();
       }
   });

扩展阅读：

• 《addDOMLoadEvent》
• 《window.onload (again)》
• 《IEContentLoaded》

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>

登录 facebook.com ，点击你首页的任何地方，键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后，再点击页面或滚动一下滚动条，你会发现特殊的变化（如下图），嘿嘿 ^^

玩过“魂斗罗”的朋友，肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami Code，详细见图示：

那如何用 JavaScript 也在自己的页面上添加一个类似的彩蛋呢？

Abhi 在 《Konami Code on Facebook : How to implement it on your site》 一文中提供了大体思路：

var $ = {
    enabled: false,
    tmp: Array(),
    _konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
    init: function() {
        this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
    },
    konamiCode: function(e) {
        if(!this.enabled) {
            var t = this.tmp.pop();
            if((e.keyCode-t) == 0) {
                if(this.tmp.length == 0) {
                    this.enabled = true;
                }
            } else {
                this.init();
            }
        } else {
            this.action();
        }
    },
    // Change the action() function to whatever you want to
    action: function() {
        //alert("Konami Code Activated");
    }
}

然后在 load 的时候调用 $.init() 方法，在 keydown 的时候调用 $.konamiCode(event) 方法。

不过 Abhi 的方法还是冗余了点，Jan Jarfalk 在留言中提供了一个短小精悍的代码：

// Tweetable Konami code
var k=[];
function(e){
    k.push(e.keyCode);
    if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0) {
        //alert("Konami Code Activated");
    }
}

PS：有兴趣的还可以在 Google Reader 上尝试下此“秘技”，一般人我还不告诉他，嘿嘿。

• 《Notes on HTML Reflow》
• 《What is a reflow?》
• 《Gecko:Reflow Refactoring》
• 《reflow》
• 《形象化的reflow》
• 《样式的执行效率-reflow》

Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素：

1. 调整窗口大小（Resizing the window）
2. 改变字体（Changing the font）
3. 增加或者移除样式表（Adding or removing a stylesheet）
4. 内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in
   an input box）
5. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
6. 操作 class 属性（Manipulating the class attribute）
7. 脚本操作 DOM（A script manipulating the DOM）
8. 计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
9. 设置 style 属性的值 （Setting a property of the style attribute）

reflow 会引起开销，影响页面的性能，那如何才能做到合理的优化呢？Nicole Sullivan 也提供了部分建议：

1. 如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)（Change classes on the element you wish to style (as low in the dom tree as possible)）
2. 避免设置多项内联样式（Avoid setting multiple inline styles）
3. 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
4. 权衡平滑和速度（Trade smoothness for speed）
5. 避免使用 table 布局（Avoid tables for layout）
6. 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）

详细阅读：

• 《Reflows & Repaints: CSS Performance making your JavaScript slow?》