Javascript內存泄露 - 畫布HTML5 jQuery

Question

我建立了一個主要使用canvas的網站，但是唯一的cannvas是一條橫向繪製的線條，線條大約13000px長。

當用戶滾動我的窗口，然後沿着m畫布路徑Example水平滾動。

我知道，在Firefox（版本6.0.2）我的文檔無法滾動。在我的控制檯中，我收到了一些（NS_ERROR_OUT_OF_MEMORY）行。

谷歌搜索後，我發現它可能是一個潛在的內存泄漏？這是如何工作的，是因爲我編寫代碼的方式？或者這是一個瀏覽器/硬件問題？

我重新初始化我的窗口調整大小等功能，我很好奇這是否有任何imapct？

// Initate the plugin 

$(window).resize(function() { 
    if(this.resizeTO) clearTimeout(this.resizeTO); 
    this.resizeTO = setTimeout(function() { 
     $(this).trigger('resizeEnd'); 
    }, 500); 
}); 

$(window).bind('resizeEnd', function() { 
    $("#path").scrollPath({drawPath: true, wrapAround: false}); 
}); 

$("#path").scrollPath({drawPath: true, wrapAround: false}); 

---

 $(document).ready(init); 

      $('.wrapper').css({'top' : '0px','left' : '0px'}); 
      $('.wrapper > div').css({'height' : + $(window).height() +'px'}); 

     function init() { 


     // Set window height and width variables 
      var windowheight = $(window).height(); 
      var windowwidth = $(window).width(); 

      // Check monitor size and workot if incentives needs extra space etc 
      var bff = 4020 + (1993 - windowwidth); 

      // Move divs into position 
      $('.culture').css('top', + - windowheight + 'px'); 
      $('.careerpath').css('top', + - windowheight + 'px'); 
      $('.training').css('top', + - windowheight + 'px'); 
      $('.apply').css('top' , + - windowheight + 'px'); 



      /* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */ 

      $.fn.scrollPath("getPath") 
       // Move to 'start' element 
       .moveTo(0, 0, {name: "div"}) 
       .lineTo(2400, 0, {name: "div1"})  

       .lineTo((bff-550), 0, {name: "div2"}) 

       .lineTo(bff, 0, {name: "div3"}) 

       .lineTo(bff, -windowheight, {name: "div4"}) 

       .lineTo((bff + 1993), -windowheight, {name: "div5"}) 

       .lineTo((bff + 1993 + 1837), -windowheight, {name: "div6"}) 

       .lineTo((bff + ((1993 + 1837 + 1795) - 325)), -windowheight, {name: "div7"})  

      // We're done with the path, let's initate the plugin on our wrapper element 
      // Window resize function 
      $(window).resize(function() { 
       if(this.resizeTO) clearTimeout(this.resizeTO); 
       this.resizeTO = setTimeout(function() { 
        $(this).trigger('resizeEnd'); 
       }, 500); 
      }); 

      $(window).bind('resizeEnd', function() { 
       $("#path").scrollPath({drawPath: true, wrapAround: false}); 
      }); 

      $("#path").scrollPath({drawPath: true, wrapAround: false}); 

     } 

Answer 1

好吧，現在我爲你使用的插件搜索了一下，我知道發生了什麼。

http://joelb.me/scrollpath/

的「線」實際上是一個形狀和scrollPath產生了對一個漂亮的大畫布。問題出在scrollPath的東西里面。它創建了太多的畫布實例或泄漏了一些東西。

您應該更好地跟蹤/記錄該錯誤並將其報告給作者。

現在，我們知道您並不是指一條直線，而是從單個DOM元素創建路徑的建議無效。我不知道你的確切的東西是什麼，但你可能能夠實現它impress.js

Answer 2

你就錯了。這種做法只會導致痛苦。

我不認爲你有泄漏，你只是有一個程序內存豬。除了內存之外，你還會遇到巨大的性能問題。 2D畫布受填充率（繪製的像素數）影響很大。即使在高速計算機上，繪製這些像素的速度也會非常慢。

所以不要做一個巨大的畫布，然後滾動窗口/視口在上面。相反，製作一個小畫布，只能渲染更大物體的可見部分。