请教一个js性能问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    ul{margin:0; padding:0; width:100%}
    li{width:150px; height:22px; line-height:22px}    
    </style>
</head>
<body>
<ul id="List">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
    <li>选项四</li>
    <li>选项五</li>
</ul>
</body>
</html>
<script type="text/javascript">
    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        getEvent: function (event) {
            return event ? event : window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
    };
</script>
<script type="text/javascript">
    var list = document.getElementById("List");
    //一
    var listChlidren = list.getElementsByTagName("li");
    for (var i = 0, len = listChlidren.length; i < len; i++) {
        listChlidren[i].onmouseover = function () {
            this.style.background = "gray";
        };
        listChlidren[i].onmouseout = function () {
            this.style.background = "";
        };
    }
    //二
    EventUtil.addHandler(list, "mouseover", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        //alert(target.tagName);
        if (target.tagName.toLowerCase() == "li") {
            target.style.background = "gray";
        }
    });
    EventUtil.addHandler(list, "mouseout", function (event) {
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.tagName.toLowerCase() == "li") {
            target.style.background = "";
        }
    });
</script>
各位前辈，小弟刚学js不久，想实现鼠标滑过变色的效果，在一本书上看到了事件委托，
请问是方法一的性能好还是方法二的性能好？怎么测试的？

解决方案 »

  1.   

    没有引用DOM元素的话每次实行完就会给回收机制回收
      

  2.   

    方法1可以改进为 var list = document.getElementById("List");
    var listChlidren = list.getElementsByTagName("li");var mouseoverHandler = function(){ this.style.background = "gray"; };
    var mouseoutHandler = function(){ this.style.background = ""; };for (var i = 0, len = listChlidren.length; i < len; i++) {
        listChlidren[i].onmouseover = mouseoverHandler;
        listChlidren[i].onmouseout = mouseoutHandler;
    }
      

  3.   

    如果只有10条记录，无所谓用哪一种如果有上千条记录，无疑要选择第二种，会节省内存开销。内存开销、CPU开销、网络开销、开发维护成本是一个综合考虑的事情具体得看使用的场景