requestAnimationFrame在Firefox中消耗CPU
requestAnimationFrame eats CPU in Firefox
所以,我使用Paul Irish的requestAnimationFrame在页面上制作一个"粘性"侧边栏。我发现,至少在webkit浏览器中,这比Waypoints等其他解决方案有了巨大的性能改进。然而,我在Firefox上注意到,当我开始滚动页面时,CPU会飙升,因此页面速度非常慢。我实现这个错误了吗?还是我需要为Firefox使用另一种方法?
(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
非常感谢您的帮助!对于如何处理这一问题,我也对完全不同的解决方案持开放态度(但Waypoints的性能不够好,无法很好地工作)。
很抱歉,误报。事实证明,性能上的成功来自于我使用的后台css技术。requestAnimationFrame这次是安全的:)
相关文章:
- 为什么这在IE中的工作方式与在Firefox中不同
- JS可以在Chrome中工作,但不能在Firefox中工作
- createElement("a") - FireFox JavaScript
- 为什么javascript:void(0)在Firefox中不起作用
- Facebook登录按钮没有'不能在Firefox上工作
- jpm的默认Firefox路径没有'不起作用
- 重载JS'firefox中的对象原型
- Ajax调用在Firefox中不会自动响应
- JS在firefox中无法正常工作
- firefox插件和dev/panel之间的通信
- IE/Chrome中未定义的函数,但Firefox中没有
- ascii输入键通过firefox中的javascript返回0
- 在firefox和chrome中的左侧显示iframe滚动条
- html5 drawImage适用于firefox,而不是chrome
- angularjs$valid-on-dates在firefox中报告错误
- 您可以使用JavaScript和Firefox扩展来更改现有页面吗
- 设置 CSS 背景在 Firefox 中不起作用
- requestAnimationFrame在Firefox中消耗CPU
- 避免在Firefox中使用texImage2D进行CPU端转换
- 我如何运行一个繁重的cpu和内存HTML/javascript程序?(firefox、chrome崩溃)