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画布受填充率（绘制的像素数）影响很大。即使在高速计算机上，绘制这些像素的速度也会非常慢。

所以不要做一个巨大的画布，然后滚动窗口/视口在上面。相反，制作一个小画布，只能渲染更大物体的可见部分。