백본보기에서 메모리 누수가 발생했습니다.

Question

백본 및 coffeScript를 사용하여 웹 사이트를 구축하고 있는데, 한 섹션 (내부 페이지)에서 다른 섹션 (내부 페이지)으로 변경하면 새 레이아웃의보기가 대체되고 닫기 방법이 호출됩니다. 예전 것. 모든게 잘 작동하는 것 같습니다 exceptp 가정용보기에서 위젯을 다시 렌더링, 나는 twttr.widgets.load() 전화해야하고, 새로운 위젯을 매번 만들 필요가 있지만 오래된 것들이 유지되고있는 것 같아요, 만약 내가 제거해도 상관 없습니다 보기 또는 iframe 노드를 만들거나 컨테이너 요소를 비워 두십시오. 뷰를 제거하기 전에 위젯의 분리를 시도하고, 변수에 저장하고,로드 뷰를 호출 할 필요없이 위젯을 다시 배치 할 때 위젯을 배치하는 데 사용하지만 iframe 요소 만이 유일한 방법입니다. 변수에 유지되고있다 (비록 그것에 모든 것을 가지고보기를 제거하기 전에), 나는 iframe 내용을 사용하여, 노드를 복제 시도, 지금까지 모든 것이 실패했습니다. twitter obj에서 트위터 위젯을 언로드하는 메서드를 찾을 수없는 것 같습니다. 그래서 불쾌한 메모리 누수로 끝나기 때문에 홈 뷰를로드 할 때마다 최대 3MB가 추가되므로 옵션이 아닙니다. 특별히 모바일 용으로는 유령 위젯에 100MB가 할당 될 수 있습니다. 여기

root = window ? global 

root.Backbone.View::close =()-> 
    @remove() 


class Otalvaro.Views.BaseContent extends Backbone.View 

    initialize: -> 
    @model.bind('sync', @render, this) 

내 집이다

(내가 iframe이 내용, 일반 버전을 저장하기 위해 노력하고있어이 버전에서, inMemory를 확인하지 않습니다 것은 @remove (와보기를 닫습니다) 직접 iframe이 제거)

편집 참고 : 새로운 인스턴스가 나올 때마다 위젯이 새로운 iframe을 만듭니다 (위젯 ID가 증가하기 때문에). 홈뷰 만 유지하려고합니다. 메모리, 30 프레임 이상의 고스트 iframe보다 메모리에 1 개의 iframe이있는 것이 좋습니다.

class Otalvaro.Views.Home extends Otalvaro.Views.BaseContent 
    template: root.template('homeTemplate') 

    initialize: -> 
    super 
    @inMemory = no 

    closeTwitterWidget: -> 
    $('iframe').unbind().remove() 

    close: => 
    @$el = @$el.clone() 
    @el = @$el[0] 
    @iframe = @$el.find('iframe').contents() 
    @inMemory = yes 

    render: (callback)-> 
    if(@inMemory) 
     console.log '@iframe', @iframe 
    else 
     console.log 'not in memory, doing normal rendering' 
     if _.isEmpty(@model.toJSON()) 
     console.log 'model is empty, fetching it now' 
     @model.fetch() 
     else 
     console.log 'model fetched, now rendering' 
     @$el.html(@template(@model.toJSON())) 
     # With out the delay, the widget won't load everytime 
     _.delay(-> 
      console.log 'firing twttr.widgets.load()' 
      root.twttr.widgets.load() # <- Guilty of all charges 
     , 630) 
     if callback? then callback(@el) 

    this 

이것은 layoutView의 코드의 일부는, 느릅 나무 경로 변화 뷰 렌더링 : 이미 통해 인스턴스 뷰를 사용하여, 가정용

class Otalvaro.Views.MainLayOut extends Backbone.View 
    el: '#mainContent' 

    closeOldViews: -> 
    if @oldViews? 
     for view in @oldViews 
     console.log 'view to be closed', view 
     view.close() 

    ### 
    # Takes an array containing one or more view instance as argument, adds a fadeOut fx to hide the current content 
    # then it renders each view instance from the array and extracts its node element (el) and pushes it into an array 
    # that is later (after the fadeIn completes) added as the html content of the layoutView 
    ### 
    show: (views)-> 
    @fadeOut() 
    delay = 500 
    viewNodes = [] 

    for view in views 
     node = view.render().el 
     viewNodes.push(node) 

    _.delay(
     _.bind -> 
     @closeOldViews() 
     @$el.html(viewNodes) 
     @fadeIn() 
     @oldViews = views 
    , this 
delay) 

라우터 처리기 (또한 홈 뷰 instanciating 시도 경로 변화에 있지만)

home:-> 
    @mainLayout.show([@homeView]) 
    null 

편집을 도움이되지 않았다 : 추가 -> 홈 템플릿

<script id="homeTemplate" type="text/x-handlebars-template"> 
    <blockquote id="homeQuote"> 
     <p>Some Quote</p> 
     <footer>Catalina Otalvaro</footer> 
    </blockquote> 
    <div class="twitterFeed fadeIn"> 
     <a href="https://twitter.com/kataotalvaro" data-widget-id="481647155510140928" class="twitter-timeline">Tweets by @kataotalvaro</a> 
    </div> 
</script> 

나는 tiwtter 개발자 포럼에서이 몇 가지 주제를 읽었지만 응답이 없으며이 문제에 익숙하지 않으므로 누구에게도이 문제를 해결하는 방법에 대한 조언이 있습니다. 정말

https://dev.twitter.com/discussions/30128 https://dev.twitter.com/discussions/5957

Answer 1

내 뷰의 속성에 위젯 (<div>)을 저장하여이 문제를 해결할 수있었습니다. 위젯이 문서의 노드를 저장하는 것처럼 간단하지 않게하려면 iframe 컨테이너 (기본 컨테이너)가 비어 있거나 iframe이 비어지기 전에 저장해야합니다. 이제이 경로의 주요 문제는 뷰에 위젯을 다시 적용하는 것이었지만 현재 DOM에없는 iframe에 html 콘텐츠를 추가하는 것이 불가능하다는 것을 알았습니다. iframe은 실제로보기의 템플릿에만 있기 때문에 div에 위젯을 부착하기로 결정했습니다. 그런 다음 iframe 스타일링을 사용하여 기본 스타일 (일부 수정)에 추가해야했습니다. 내 집보기는 메모리에서 elment를 가져오고 메모리 누수가 없다. 탐색 할 때 약 6mb의 상단을 얻으며, widget.load()를 사용하여 결코 올라 가지 않는다. 이것은 50mbs만큼 높다. 이것이 이상적인 해결책이라고 생각하지 않습니다. 실제로 해킹입니다. 트위터는 위젯을로드 메소드가 아닌 언로드하는 방법을 제공해야합니다. 누군가가 같은 자리에 있으면 도움이되기를 바랍니다. 대답 할 시간 =)

주셔서 감사의 @glortho 여기 어쩌면 내가 처음에 내가 @remove을 (사용) 및 위젯을 호출하고, 잘못된 설명, 수정 된 집보기를

class Otalvaro.Views.Home extends Otalvaro.Views.BaseContent 
    template: root.template('homeTemplate') 

    initialize: -> 
    super 
    @inMemory = no 
    @memoryRender = no 

    close: => 
    unless @inMemory 
     @$iframe = $($('.twitter-timeline').contents().find('body').html()) 
     @inMemory = yes 

    render: (callback)-> 
    unless @memoryRender 
     if(@inMemory) 
     @$el.find('.twitterFeed').html(@$iframe) 
     @memoryRender = yes 
     else 
     console.log 'not in memory, doing normal rendering' 
     if _.isEmpty(@model.toJSON()) 
      console.log 'model is empty, fetching it now' 
      @model.fetch() 
     else 
      console.log 'model fetched, now rendering' 
      @$el.html(@template(@model.toJSON())) 
      _.delay(-> 
       console.log 'firing twttr.widgets.load()' 
       root.twttr.widgets.load() 
      , 630) 
      if callback? then callback(@el) 

    this 

Answer 2

가 Otalvaro.Views.Home에 대한 여러분의 close 방법은 때마다 그 집보기를 닫 것을 의미 기본 close 메소드를 오버라이드 (override)되어 내 질문 : 독서에 시간을내어 주셔서 감사합니다 당신은, 그것을 감사 실제로 그걸 제거하지 않아. 또한,이 요소를 복제하고,보고 :

@$el = @$el.clone(); 

그것은 closeTwitterWidget가 iframe을 제거하여 그 중 일부 도움이 될,하지만 난 그 어디에 호출되는 것 참조하지 않는 것이있을 수 있습니다.

가정용보기에서 close 방법을 @remove()으로 변경하고 변경 방법을 시도해보십시오.

또한 트위터 위젯이 홈 뷰의 요소 내부에 확실히로드되고 있습니까?