JavaScript内存与性能优化：事件处理、DOM操作及循环陷阱详解

一、何为JavaScript内存与性能

现代Web应用依赖事件处理程序实现交互，但开发者常因误用导致页面中充斥大量事件监听器，这直接拖累整体性能。主要原因包括：首先，每个函数均为对象，占用内存空间，数量越多性能越差；其次，为特定事件分配处理程序时需频繁访问DOM，导致页面交互延迟。

二、谈谈关于innerHTML的性能问题？

1、使用innerHTML的反面教材

for(let value of values){
    ul.innerHTML += '<li>${value}</li>';
}

该代码效率低下，因为每次迭代都需设置一次innerHTML。此外，每次循环均需先读取innerHTML，即单次循环涉及两次innerHTML访问，造成显著性能损耗。

2、如何解决

let itemsHtml = "";
for(let value of values){
    itemsHtml  += '<li>${value}</li>';
}
ul.innerHTML = itemsHtml;

经此修改后，效率显著提升，仅对innerHTML执行一次赋值。以下代码亦可实现相同效果：

ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');

三、如何解决类似按钮过多问题？

应对过多事件处理程序的有效方案是采用事件委托。该技术利用事件冒泡机制，通过单一事件处理程序管理一类事件。例如，click事件可冒泡至document。这意味着可为整个页面指定一个onclick处理程序，而非为每个可点击元素单独绑定事件。

<ul id="myGirls">
    <li id="girl1">比比东</li>
    <li id="girl2">云韵</li>
    <li id="girl3">美杜莎</li>
</ul>

此处包含三个列表项，点击时需执行特定操作。常规做法是为每个元素分别指定三个事件处理程序：

let item1 = document.getElementById("girl1");
let item2 = document.getElementById("girl2");
let item3 = document.getElementById("girl3");

item1.addEventListener("click",(event) => {
    console.log("我是比比东！");
})

item2.addEventListener("click",(event) => {
    console.log("我是云韵！");
})

item3.addEventListener("click",(event) => {
    console.log("我是美杜莎！");
})

上述方式代码冗余且结构混乱。采用事件委托，只需为所有元素的共同祖先节点添加一个事件处理程序，即可解决代码冗余问题。

let list = document.getElementById("myGirls");
list.addEventListener("click",(event) => {
    let target = event.target;
    switch(target.id){
        case "girl1":
            console.log("我是比比东！");
            break;
        case "girl2":
            console.log("我是云韵！");
            break;
        case "girl3":
            console.log("我是美杜莎！");
            break;
    }
})

四、事件委托的优点有哪些？

document对象随时可用，可随时为其添加事件处理程序（无需等待DOMContentLoaded或load事件），从而处理页面中所有同类事件。这意味着只要页面渲染出可点击元素，处理程序即可立即生效，无延迟。此举节省了设置页面事件程序的时间，减少了页面所需的内存总量，从而提升整体性能。

五、删除事件处理程序

将事件处理程序绑定至元素后，浏览器代码与负责页面交互的JavaScript代码之间便建立了联系。此类联系越多，页面性能越差。除通过事件委托限制连接数量外，还应及时移除不再使用的事件处理程序。许多Web应用性能不佳，皆因无用事件处理程序长期驻留内存所致。

导致该问题的原因主要有两点：

1、删除带有事件处理程序的元素

例如通过DOM方法removeChild()或replaceChild()删除节点。最常见的情形是使用innerHTML整体替换页面某一部分。此时，若被innerHTML移除的元素上存在事件处理程序，垃圾回收机制通常无法正常清理。因此，在预知某元素将被删除前，应手动移除其事件处理程序，如btn.onclick = null;。事件委托亦有助于此问题：若知某元素将被innerHTML替代，无需为该元素添加处理程序，只需将其绑定至更高层级节点即可。

2、页面卸载也会导致内存中残留引用的问题

若页面卸载后事件处理程序未被清理，它们将残留在内存中。随后，浏览器每次加载和卸载页面（如通过前进、后退或刷新操作），内存中残留对象数量均会增加，因为事件处理程序不会被回收。通常建议在onunload事件处理程序中，趁页面尚未完全卸载前删除所有事件处理程序。此时，事件委托的优势得以体现：因处理程序数量少，易于记忆并删除哪些。

六、如何解决循环中动态添加div，造成的死循环问题？

表达式①

let divs = document.getElementsByTagName("div");
for(let i = 0;i<divs.length;++i){
    let div = document.createElement("div");
    document.body.appendChild(div);
}

表达式②

let divs = document.getElementsByTagName("div");
for(let i = 0,len=divs.length;i<len;++i){
    let div = document.createElement("div");
    document.body.appendChild(div);
}

表达式①中，第一行获取了包含文档中所有<div>元素的HTMLCollection。由于该集合是实时的，每当向页面添加新<div>元素，再次查询该集合时项数便会增加。浏览器为节省保存每次创建集合的开销，会在每次访问时更新集合。每次循环均需评估i < divs.length，即需重新查询所有<div>元素。因循环体内创建并添加新<div>元素，divs.length值随之递增。由于i与divs.length同步递增，i永远无法等于divs.length，故表达式①会导致死循环。而表达式②中，初始化了保存集合长度的变量len。因len保存的是循环开始时集合的长度，且该值不随集合增大而动态增长（for循环初始化变量处仅执行一次），故可避免表达式①中的无穷循环问题。

若不想初始化额外变量，亦可采用反向迭代：

表达式③

let divs = document.getElementsByTagName("div");
for(let i = divs.length-1;i>=0;--i){
    let div = document.createElement("div");
    document.body.appendChild(div);
}

七、JavaScript思维导图

到此这篇关于关于JavaScript的内存与性能问题解决汇总的文章就介绍到这了,更多相关JS内存与性能内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！