#Javascript高级编程读书笔记#13.5 内存和性能

转载

草长莺飞飞满天 2022-06-20 12:13:32

文章标签 事件处理事件委托 javascript 文章分类 Java 后端开发

13.5 内存和性能

Javascript 中函数都是对象，过多被添加到事件的处理程序都会占用内存，内存中对象越多性能就越差。其次，事先指定好所有事件处理程序而导致的DOM访问次数也会延迟整个页面的交互就绪时间

对付“事件处理程序过多”的方案就是事件委托，事件委托利用了事件冒泡只指定一个事件处理程序就可以管理某一类型的所有事件，例如 click 时间会一直冒泡到 document 层次，可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素都添加上这个事件

不好的做法:

<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="talk">Say hi</li>
</ul>

// 为所有元素都设置了事件处理逻辑
document.getElementId("goSomewhere").onclick = function(){
    location.href = "http://www.baidu.com";
};
document.getElementId("doSomething").onclick = function(){
    document.title = "I changed the document's title";
};
document.getElementId("talk").onclick = function(){
    alert("hi, man");
};

改良一下，只需在DOM树尽量最高层次上添加一个事件处理程序:

var list = document.getElementById("myLinks");

list.onclick = function(event){
    var target = event.target;

    switch(target.id){
        case "doSomething":
            document.title = "I changed the document's title";
            break;
        case "goSomewhere":
            location.href = "http://www.baidu.com";
            break;
        case "talk":
            alert("hi, man");
            break;
    }
};

## 不重要的其实最重要

13.5 内存和性能

不好的做法:

<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="talk">Say hi</li>
</ul>

// 为所有元素都设置了事件处理逻辑
document.getElementId("goSomewhere").onclick = function(){
    location.href = "http://www.baidu.com";
};
document.getElementId("doSomething").onclick = function(){
    document.title = "I changed the document's title";
};
document.getElementId("talk").onclick = function(){
    alert("hi, man");
};

改良一下，只需在DOM树尽量最高层次上添加一个事件处理程序:

var list = document.getElementById("myLinks");

list.onclick = function(event){
    var target = event.target;

    switch(target.id){
        case "doSomething":
            document.title = "I changed the document's title";
            break;
        case "goSomewhere":
            location.href = "http://www.baidu.com";
            break;
        case "talk":
            alert("hi, man");
            break;
    }
};