我的网站是建立在 Backbone.js 上的。它有一个基于提要的用户界面,这意味着经常有大量的内容显示在提要中。粗略地说,大约30个事件绑定到每个项目。向下滚动几页后,它会变得迟钝。取消绑定已滚动出的项目,并在滚动入时重新绑定,这样做有意义吗?是什么原因导致速度缓慢?
aydmsdu91#
很难说这种缓慢是因为事件处理程序,还是仅仅因为浏览器无法处理页面上大量的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); } });
1条答案
按热度按时间aydmsdu91#
很难说这种缓慢是因为事件处理程序,还是仅仅因为浏览器无法处理页面上大量的DOM节点,或者是其他原因。
这里有一个快速的解决方案,可以取消委托不在当前视窗中的视图的事件。它并不完全适用于生产,但是应该可以帮助你测试事件处理程序是否是性能问题的原因。
(Working JSFiddle here,同时检查浏览器控制台)