requestAnimationFrame在Firefox中吃CPU

因此，我使用Paul Irish的requestAnimationFrame在頁面上創建了一個側邊欄「sticky」。至少在webkit瀏覽器中，我發現它比Waypoint等其他解決方案有很大的性能提升。但是，我注意到Firefox上，當我開始滾動頁面CPU通過屋頂和頁面是非常緩慢，由於這一點。我是否執行這個錯誤，或者我是否需要使用另一種方法用於Firefox？requestAnimationFrame在Firefox中吃CPU

(function() { 
    var lastTime = 0; 
    var vendors = ['ms', 'moz', 'webkit', 'o']; 
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
     window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 
     window.cancelAnimationFrame = 
      window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 
    } 

    if (!window.requestAnimationFrame) 
     window.requestAnimationFrame = function(callback, element) { 
      var currTime = new Date().getTime(); 
      var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
       timeToCall); 
      lastTime = currTime + timeToCall; 
      return id; 
     }; 

    if (!window.cancelAnimationFrame) 
     window.cancelAnimationFrame = function(id) { 
      clearTimeout(id); 
     }; 
}()); 

window.widget_is_sticky = false; 
window.widget_is_locked = false; 

$(function(){ 

    (function animloop() { 
    requestAnimationFrame(animloop); 
    if (adjust_networth) { 
     if (self.pageYOffset) { 
     yScroll = self.pageYOffset; 
     } else if (document.documentElement && document.documentElement.scrollTop) { 
     yScroll = document.documentElement.scrollTop; 
     } else if (document.body) {// all other Explorers 
     yScroll = document.body.scrollTop; 
     } 
     update_networth_position(yScroll); 
    } 
    })(); 
}); 

// Separate file written in CoffeeScript 
window.update_networth_position = (offset) -> 
    if offset >= 259 
    if !window.widget_is_sticky 
     window.widget_is_sticky = true 
     $('.widgets').addClass 'sticky' 
    else if !window.widget_is_locked and widget_is_at_boundary(offset) 
     window.widget_is_locked = true 
     $('.widgets').addClass 'locked' 
    else if !widget_is_at_boundary(offset) and window.widget_is_locked 
     window.widget_is_locked = false 
     $('.widgets').removeClass 'locked' 
    else 
    return false if !window.widget_is_sticky 

    $('.widgets').removeClass 'sticky' 
    window.widget_is_sticky = false 


widget_is_at_boundary = (offset) -> 
    offset = offset - $('section.top-section').outerHeight(true) 
    maximum_height = $('section.main-content div.content:first-child').outerHeight(true) 
    widget_height = $('section.main-content .widgets').outerHeight(true) 

    if (offset + widget_height) > maximum_height 
    return true 
    else 
    return false

任何幫助非常感謝！我也接受完全不同的解決方案來解決這個問題（但Waypoint的性能不足以很好地工作）。

來源

2012-07-12 David Savage