자바 스크립트 메모리 누수 - 캔버스 HTML5 jQuery

Question

캔 캔버스를 주로 사용하는 웹 사이트를 구축하면 캔버스가 포함 된 유일한 캔버스가 가로로 그려지며 줄은 약 13000 픽셀입니다.

사용자가 내 창을 스크롤하면 m 캔버스 경로를 따라 가로로 스크롤합니다 (Example).

파이어 폭스 (버전 6.0.2)에서 내 문서를 스크롤하지 못했습니다. 내 콘솔에서 나는 (NS_ERROR_OUT_OF_MEMORY) 라인을 따라 무언가를받습니다.

Google 검색 결과 잠재적 인 메모리 누수가 될 수 있다는 사실을 발견했습니다. 이 코드는 어떻게 작동합니까? 코드 작성 방법 때문입니까? 또는 브라우저/하드웨어 문제입니까?

Im은 창 크기 조정 등에 대한 내 기능을 다시 초기화하고 이것이 어떤 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 캔버스는 채우기 비율 (그려지는 픽셀 수)에 크게 영향을받습니다. 이 많은 픽셀을 그리는 것은 빠른 컴퓨터에서도 매우 느립니다.

거대한 캔버스를 만든 다음 창/뷰포트를 스크롤하십시오. 대신 작은 캔버스를 만들어보세요. 더 큰 것으로 보이는 부분 만 렌더링합니다.