目錄

• • 一、何為JavaScript內存與性能
  • 二、談談關于innerHTML的性能問題？
  • • 1、使用innerHTML的反面教材
    • 2、如何解決
  • 三、如何解決類似按鈕過多問題？
  • 四、事件委托的優點有哪些？
  • 五、刪除事件處理程序
  • • 1、刪除帶有事件處理程序的元素
    • 2、頁面卸載也會導致內存中殘留引用的問題
  • 六、如何解決循環中動態添加div，造成的死循環問題？
  • • 表達式①
    • 表達式②
    • 表達式③
  • 七、JavaScript思維導圖
  • 八、關注公眾號哪吒編程，回復1024，獲取Java學習資料，還有不定期的送書活動

一、何為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 => '<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，因此表達式①會造成死循環。
而表達式②中，又初始化了一個保存集合長度的變量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思維導圖

八、關注公眾號哪吒編程，回復1024，獲取Java學習資料，還有不定期的送書活動

Java程序設計

HTML5 APP開發從入門到精通

Python技術手冊

區塊鏈開發從入門到精通

總結

以上是生活随笔為你收集整理的精通JavaScript？关于JavaScript的内存与性能问题，你又了解多少呢？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。