1. 首頁 > 生活百科 > >

深入了解JavaScript的內存與性能問題

小知識it知識

【深入了解JavaScript的內存與性能問題】本篇文章給大家帶來了關于javascript的相關知識 ， 其中主要介紹了JavaScript的內存與性能問題 ， 包括了如何解決類似按鈕過多的問題、刪除事件處理程序等等 ， 希望對大家有幫助 。

深入了解JavaScript的內存與性能問題

文章插圖

相關推薦：javascript教程
一、何為JavaScript內存與性能因為事件處理程序在現代web應用中可以實現交互 ， 所以很多開發者都會錯誤地在頁面中大量使用它們 ， 在JavaScript中 ， 頁面中事件處理程序的數量與頁面整體性能直接相關 。 原因有很多 ， 比如①每個函數都是對象 ， 都要占用內存空間 ， 對象越多 ， 性能越差；②為指定事件處理程序所需訪問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 =https://www.52zixue.com/zhanzhang/webqd/js/04/07/69051/> '
  • ${value}
    • ').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替代的時候 ， 就不要給該元素添加事件處理程序了 ， 將其添加到更高層級的節點上即可 。

    推薦閱讀