• JS事件(五)内存与性能


    1、减少代码中事件处理程序的数量,是减少内存开销,提升网页速度的有效手段

    事件委托:

    <ul id="ul">
        <li id="goSomewhere">goSomewhere</li>
        <li id="doSomething">doSomething</li>
        <li id="sayHi">sayHi</li>
    </ul>
    
    <script>
    var ul=document.getElementById("ul");
    
    EventUtil.addHandler(ul,"click",function(event){
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        switch(target.id) {
        case "goSomewhere":
            location.href="https://www.baidu.com";
            break;
        case "doSomething":
            document.title="I changed the title";
            break;
        case "sayHi":
            alert("hi");
            break;
        }
    });
    </script>

    核心:利用冒泡原理,将事件绑定到父元素,减少内存消耗,提升性能

    利用event属性找到事件源,将事件定位到具体元素上

    2、减少“空事件处理程序”

    2.1、绑定有事件处理程序的元素,通过DOM操作被移除 ,但事件还在,由此产生内存浪费:

    var btn=document.getElementById("btn");
    EventUtil.addHandler(btn,"click",function(){
      btn.onclick=null;                                      
      document.getElementById("div").innerHTML="processing..."; });

    解决方案:手动移除

    2.2、页面卸载时,事件处理程序滞留

    解决方案:在页面卸载之前,通过onunload移除所有事件处理程序

  • 相关阅读:
    98.公共汽车
    100.选菜(动态规划)01背包
    102.愤怒的LJF
    96.老鼠的旅行(动态规划)
    95.(01背包)之小吃
    94.Txx考试
    93.数字三角形W(深搜)
    POJ 3352 Road Construction (边双连通分量)
    POJ 3114 Countries in War(强联通分量+Tarjan)
    POJ 3592 Instantaneous Transference(强联通分量 Tarjan)
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5758157.html
Copyright © 2020-2023  润新知