滾動輸出解除事件 - 建議？

Question

我的網站是建立在骨幹上的。它具有基於Feed的UI，這意味着Feed中通常會顯示大量內容。大致上，約30個事件綁定到每個項目。

滾動幾頁後，它變得呆滯。

解除已滾動的項目並在滾動時再次綁定它有意義嗎？

• 如果是這樣，一些幫助（示例代碼/指針資源將是巨大的）
• 難道還有什麼是導致進展緩慢？

Answer 1

很難說是否遲緩是因爲事件處理程序的，或僅僅是因爲瀏覽器無法處理DOM節點的頁面上的絕對數量，或任何其他原因。

下面是一個快速解決方案，用於取消不在當前視口中的視圖的事件。這不完全是生產準備，但應該幫助您測試事件處理程序是否是性能問題的原因。

（Working JSFiddle here，還要檢查瀏覽器控制檯）

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); 
    } 
});