zoukankan      html  css  js  c++  java
  • 内存和性能

    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;
                    };
                }
            });
  • 相关阅读:
    python数据分析之ipython
    Django之文件下载
    mongodb学习之:主从复制
    Django之高级视图与URL
    Django之request对象
    tornado安全应用之用户认证
    tornado安全应用之cookie
    tornado之异步web服务二
    【原创】Linux基础之测试域名IP端口连通性
    【原创】大数据基础之Mesos+Marathon+Docker部署nginx
  • 原文地址:https://www.cnblogs.com/longdb/p/7500400.html
Copyright © 2011-2022 走看看