當用javaScript使用iFrames時內存泄漏

我在（至少）IE11和Edge（在Chrome中最小化）有一個奇怪的行爲。之後我創建了一個iFrame並將其分開，但內存不斷增加。在這個iFrame中，只有一個帶有javaScript導入的空白頁面被加載。當用javaScript使用iFrames時內存泄漏

我發現了一些建議，將iFrame的src更改爲about：blank，但仍然無法正常工作。有沒有人有一個想法是什麼問題？

編輯：

我用了jQuery插件purgeFrame和改變速度和迭代次數嘗試。

因爲它似乎主要是IE11和邊緣的問題，我們也張貼在https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8449104/

的外框的新代碼是：

<!doctype html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script type="text/javascript"> 
     var counter =0; 

     /* 
     * jQuery purgeFrame 
     * A jQuery plugin to clean up Iframes and make IE happy 
     * 
     * Copyright (c) March 2014 Tom Mooney 
     * licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php 
     */ 

     (function ($) { 
      $.fn.purgeFrame = function() { 
       var deferred = purge(this); 

       return deferred; 
      }; 

      function purge($frame) { 
       var len = $frame.length 
       var deferred = $.Deferred(); 
       $frame.one('load', function() { 
        try 
        { 
         $(this.contentWindow).empty(); 

         len -= 1; 
         if (len <= 0) { 
          $(this).remove(); 
         } 

         $frame = null; 
        } 
        finally { 
         deferred.resolve(); 
        } 
       }); 

       //Set src to about:blank to so that contentWindow can be manipulated on cross-domain iframes 
       $frame.attr('src', 'about:blank'); 

       if ($frame.length === 0) { 
        deferred.resolve(); 
       } 

       return deferred.promise(); 
      } 
     }(jQuery)); 

     $(document).ready(function() { 
      var myTimer = setInterval(
        function(){ 
         var contentContainer = $("#contentDiv"); 
         var iFrame = $('<iframe class="contentFrame" frameborder="0" name="bla" style="overflow:auto; width: 100%; height: 100%;" src="leere.html"></iframe>'); 
         contentContainer.append(iFrame); 
         $(iFrame).purgeFrame().done(function() { 
          console.log("deleted frame"); 
          iFrame = null; 
         }); 
         if (counter == 1000) { 
          clearInterval(myTimer); 
         } 
         counter++; 
        }, 50 
       ); 

     }); 
    </script> 
</head> 
<body> 
    <div id="contentDiv" style="width:100%; height:100%"></div> 
</body> 
</html>

加載的HTML（leere.html）在IE11

<!doctype html> 
<html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
</head> 
<body> 
Test 
</body> 
</html>

內存使用情況（3×1000個循環） 0123在邊緣 內存使用（1×1000個循環）

來源

2016-08-09 Mhastrich

我跑的網頁，並使用Chrome的任務管理器監視的標籤的存儲器的消耗。我將間隔數改爲150，內存達到84MB，在那裏停留了一段時間，然後又回到了20MB。在IE中過一段時間後，內存消耗也會下降。

我的猜測是，當您刪除iFrame並將變量設置爲null時，內存不會立即釋放，而只會在一段時間後進行垃圾回收。據我所知，你無法強制指示瀏覽器從JS進行垃圾回收。所以除了重寫代碼，不要不斷創建太多新的DOM對象之外，您無能爲力。

來源

2016-08-10 08:36:35

你使用了哪個版本？在我的情況下，新的外框Chrome 1000次迭代（150ms）後上升到278MB，並且只有當我更改父網址時才釋放內存。在IE中它是相同的，它不會回到初始狀態 - 對於每個循環（1000次迭代），它消耗325-350MB的專用字節。其原因在堆中不可見 - 堆大小爲270KB，在我的示例中，在IE11/Win7中的2x1000迭代885MB之後的總內存。在IE11達到1.8GB內存後，瀏覽器崩潰。 – Mhastrich

我在Win 7中使用Chrome v52和IE11。我的意思是150次迭代。沒有試過1000.稍後再試。 –

我們實際應用中的問題更糟。這裏我們使用iframe來模擬標籤並實現不同的導航樹。我們的頁面中有更大的javascript導入，所以在IE中，對於每個打開和關閉的選項卡（iframe），瀏覽器在內存中保留大約30MB。問題是我們的用戶在使用此應用程序一整天后工作1-3小時，瀏覽器不能再使用了（在IE的情況下）。其他瀏覽器似乎也保留了很多內存。 – Mhastrich

當用javaScript使用iFrames時內存泄漏

回答

相關問題