快捷導(dǎo)航

關(guān)于js內(nèi)存泄露的一個好例子

更新時間：2013年12月09日 09:53:09 作者：

這篇文章主要介紹了關(guān)于js內(nèi)存泄露的一個好例子。需要的朋友可以過來參考下，希望對大家有所幫助

我把別人的例子改了一下，覺得這樣寫更緊湊！套用別人的原話，當(dāng)一個DOM對象包含一個Js對象的引用(例如一個Event Handler)，而這個Js對象又持有對這個DOM對象的引用時，一個環(huán)狀引用就行成了，于是在ie下就出現(xiàn)了內(nèi)存泄露。點(diǎn)擊“運(yùn)行代碼”并打開任務(wù)管理器看內(nèi)存變化。分別在ie8和ff下測試，差距不用多說。

運(yùn)行代碼

復(fù)制代碼代碼如下:

<html>
  <head>
    <title>Memory leak</title>
    <style>
     body{
       padding: 10px;
     }
    </style>
  </head>
  <body>
  </body>
  <script>
    var q = [];
    var n = 0;
    setInterval(function(){
      q.push(makeSpan());
      if(q.length>=10){
        var s = q.shift();
        if(s){
          s.parentNode.removeChild(s);
        }
      }
      n++;
    },10);

    function makeSpan(){
      var s = document.createElement("span");
      document.body.appendChild(s);
      var t=document.createTextNode("*** " + n + " ***");
      s.appendChild(t);
      s.onclick=function(e){
                s.style.backgroundColor="red";
                alert(n);
            };
            return s;
    };
  </script>
</html>

那么在ie下該怎么解決呢？

在刪除節(jié)點(diǎn)的時候，手動破除環(huán)狀引用，把里面setInterval那段代碼稍微改動以下：

復(fù)制代碼代碼如下:

setInterval(function(){
  q.push(makeSpan());
  if(q.length>=10){
    var s = q.shift();
    if(s){
     s.onclick = null;//關(guān)鍵在這里
      s.parentNode.removeChild(s);
    }
  }
  n++;
},10);

您可能感興趣的文章:

相關(guān)文章

JS+CSS3實(shí)現(xiàn)超炫的散列畫廊特效
這篇文章主要為大家詳細(xì)介紹了JS+CSS3實(shí)現(xiàn)超炫的散列畫廊特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-07
一文詳解uniapp中如何使用easycom自定義組件
easycom是uniapp的一種組件自動引入的規(guī)則,使用這種規(guī)則可以使?jié)M足規(guī)則的組件無需注冊直接使用,下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用easycom自定義組件的相關(guān)資料,需要的朋友可以參考下
2023-05-05
layer彈出子iframe層父子頁面?zhèn)髦档膶?shí)現(xiàn)方法
這篇文章主要介紹了layer彈出子iframe層父子頁面?zhèn)髦档膶?shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
JS實(shí)現(xiàn)隨機(jī)抽取三人
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)抽取三人，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
JS實(shí)現(xiàn)移動端判斷上拉和下滑功能
通過手指觸屏，利用touchstart和touchend計(jì)算前后滑動距離，判斷是上拉還是下滑。接下來通過實(shí)例代碼給大家介紹js移動端判斷上拉和下滑功能，感興趣的朋友一起看看吧
2017-08-08
Exif.js圖片旋轉(zhuǎn)修正的方法
這篇文章主要為大家詳細(xì)介紹了Exif.js圖片旋轉(zhuǎn)修正的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
axios攔截器機(jī)制的實(shí)現(xiàn)原理詳解
axios 不僅提供了一套跨平臺請求,另外還提供了“攔截器”這一中間件機(jī)制,方便你在請求之前、響應(yīng)之后做些操作處理,本文給大家詳細(xì)介紹了axios 攔截器機(jī)制是如何實(shí)現(xiàn)的,需要的朋友可以參考下
2024-05-05
js前端如何寫一個精確的倒計(jì)時代碼
關(guān)于寫倒計(jì)時大家可能都都比較熟悉，使用 setTimeout 或 setInterval 就可以搞定。幾秒鐘或者幾分鐘的倒計(jì)時這樣寫沒有問題，但是如果是長時間的倒計(jì)時，這樣寫就會不準(zhǔn)確
2019-10-10
詳解小程序rich-text對富文本支持方案
目前小程序使用比較多的富文本方案一個是小程序自帶的rich-text組件，一個是wxPrase，本篇文章主要介紹了詳解小程序rich-text對富文本支持方案，感興趣的小伙伴們可以參考一下
2018-11-11
淺談JavaScript中數(shù)組的增刪改查
下面小編就為大家?guī)硪黄獪\談JavaScript中數(shù)組的增刪改查。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06