스크롤 아웃에서 이벤트 언 바인딩 - 권장?

Question

내 사이트가 백본에 구축되어 있습니다. 피드 기반 UI가있어 피드에 많은 양의 콘텐츠가 표시되는 경우가 많습니다. 대략 30 개의 이벤트가 각 항목에 묶입니다.

몇 페이지 아래로 스크롤하면 느려집니다.

밖으로 스크롤 한 항목의 바인딩을 해제하고 스크롤 할 때 다시 바인딩하는 것이 합리적입니까? 그렇다면

• , 도움
• 는 속도 저하의 원인이되는 것도있을 수있다 (자원에 대한 샘플 코드/포인터가 좋은 것)?

Answer 1

그것은 부진 때문에 이벤트 핸들러인지 여부를 말하기 어려운, 또는 브라우저 페이지에 DOM 노드의 깎아 지른듯한 금액, 또는 다른 이유를 처리 할 수 ​​있기 때문에 단순히.

다음은 현재 뷰포트에없는보기의 이벤트 삭제 취소를위한 빠른 해결책입니다. 프로덕션 준비는 아니지만 이벤트 처리기가 성능 문제의 원인인지 테스트하는 데 도움이됩니다.

@fencliff

var View = Backbone.View.extend({ 

    onScroll: function() { 

    var wasInView = this.isInView; 
    var isInView = this.checkIsInView(); 

    if(wasInView === true) { 
     if(!isInView) { 
     this.undelegateEvents(); 
     } 
    } 
    else if(wasInView === false) { 
     if(isInView) { 
     this.delegateEvents(); 
     } 
    } 
    else { 
     //first pass 
     if(!isInView) { 
     this.undelegateEvents(); 
     } 
    } 

    this.isInView = isInView; 
    }, 

    checkIsInView: function() { 
    var $el = this.$el, 
     top = $el.offset().top, 
     bottom = top + $el.height(), 
     windowTop = $(window).scrollTop(), 
     windowBottom = windowTop + $(window).height(); 

    return ((bottom <= windowBottom) && (top >= windowTop)); 
    }, 

    render: function() { 

    //rendering code here... 

    if(!this.lazyScroll) { 
     //wait for scroll events to stop before triggering scroll handler 
     this.lazyScroll = _.debounce(_.bind(this.onScroll, this), 50); 
     $(window).bind('scroll', this.lazyScroll) 
       .bind('resize', this.lazyScroll); 
    } 

    return this; 
    }, 

    remove: function() { 
    if(this.lazyScroll) { 
     $(window).unbind('scroll', this.lazyScroll) 
       .unbind('resize', this.lazyScroll); 
     delete this.lazyScroll; 
    } 
    Backbone.View.prototype.remove.apply(this, arguments); 
    } 
});