内存和性能

javascript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。

导致这一问题的原因是多方面的:

①:每个函数都是对象,都会占用内存,内存中的对象越多,性能就越差。

②:必须事先指定所有事件处理程序而导致的DOM的访问次数,会延迟整个页面的交互就绪时间。

 

提升其性能的解决方案:事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类的所以事件。

例如:click事件会一直冒泡到document层次。也就是说,我们可以为整个页面指定一个onclick事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。

使用事件委托只需要在DOM树种尽量最高的层次添加一个事件处理程序。

例如:

html页面:

<ul id="mylinks">
    <li id="gowhere">gowhere</li>
    <li id="dosomething">dosomething</li>
    <li id="saybye">saybye</li>
</ul>

事件委托程序:

       //2017.09.10 10:00 add by longdb
        //内存和性能。
        var mylist = document.getElementById("mylinks");
        EventUtil.addHandler(mylist, "click", function (event) {
            event = EventUtil.getEvent(event);//EventUtil对象是前面定义的。
            var target = EventUtil.getTarget(event);

            switch(target.id){
                case "gowhere": {
                    document.title = "I changed the document's title!";
                    break;
                };
                case "dosomething": {
                    location.href = "http://www.cnblogs.com/longdb/p/7500400.html";
                    break;
                };
                case "saybye": {
                    alert("Hello longdb!");
                    break;
                };
            }
        });

 

posted @ 2017-09-10 10:44  longdb  阅读(202)  评论(0编辑  收藏  举报