Javascript內存泄露 - 畫布HTML5 jQuery

我建立了一個主要使用canvas的網站，但是唯一的cannvas是一條橫向繪製的線條，線條大約13000px長。Javascript內存泄露 - 畫布HTML5 jQuery

當用戶滾動我的窗口，然後沿着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}); 

     }

來源

2013-02-19 Liam

我不得不問：爲什麼你需要畫布繪製一條線13000像素長？ – Blazemonger 2013-02-19 19:52:40

我建立了一個角色爲基礎的網站，當用戶滾動字符從左到右走向上升到其他樓層等電梯... – Liam 2013-02-19 19:53:37

我在畫布上的經驗是不存在的，但是：爲什麼你不做一個更小的畫布和滾動相反的背景？ – Blazemonger 2013-02-19 19:55:28

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

http://joelb.me/scrollpath/

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

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

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

來源

2013-02-20 09:32:53 naugtur

wooo，這只是推動了我超過10k的聲譽:) – naugtur 2013-02-20 13:39:26

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

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

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

來源

2013-02-19 20:03:01

不能同意更多，但它會很高興有一個答案在這裏分析內存問題，以便人們會知道，如果畫布可以或不能處理13000px。這就是爲什麼我決定不加入這一點。 [背景：]在我工作的一個軟件項目中，我曾經創建過一個渲染9000x2000像素的畫布，並在繪製一些內容之後使整個畫面變得模糊，並且工作得很好（除了在一個好的CPU上花費了大約一分鐘）。 – naugtur 2013-02-19 20:23:58

謝謝@AlexWayne，我添加了我的代碼... – Liam 2013-02-19 21:16:33

Javascript內存泄露 - 畫布HTML5 jQuery

回答

相關問題