如何使JavaScript函数使用更少的内存(图像在后台旋转)

Question

我有一个函数，旋转一个网页上的背景图像真的很慢(这是一个星场)。功能如下:

function changeAngle() {
            setAngle = setInterval(bgrotate,50);
        }
        function bgrotate(){
            i+=0.1;
            var sCSS= ("rotate(" + i + "deg)");
            $("#starfield").css({ '-moz-transform': sCSS, '-o-transform': sCSS, '-webkit-transform': sCSS });
        }

它旋转的图片大小为610kB。

它工作得很好，但是我注意到当我运行页面时，我机器上的风扇真的很热。我检查了活动监视器，CPU的运行速度在85%左右。

谁有什么想法我可以简化这一点，以减少CPU的使用?如果你需要，我可以放一个页面的演示版本，看看它的运行情况。

Thanks a mill，

T

更新:这个页面的演示可以在这里:http://tady.me/rbg

关于这个的最后一个问题:嗨，伙计们，我可能需要开始一个新的问题，但以防任何最初帮助我的人可以告诉我，你知道为什么这个不能在Safari (Mac + PC)或Firefox (PC)中工作吗?

欢呼,T

Answer 1

你应该尝试使用CSS(使用过渡或动画计时属性)而不是JavaScript。

https://developer.mozilla.org/en/css/css_transitions

演示(webkit) : http://jsfiddle.net/E9J77/2/

遗憾的是，Firefox仍然不支持CSS动画。

这是Firefox使用transitionend事件的解决方案:

演示(Firefox) : http://jsfiddle.net/VZhnh/3/

Answer 2

有趣的技术——我也想看一个演示。

增大间隔呢?你试过100毫秒旋转0.2度吗?

Answer 3

我建议将间隔稍微大一点，但同时也增加每次旋转的距离。

我还建议将#starfield保存为全局变量，以减少DOM访问

(当然，过渡只适用于Firefox, Safari和我认为chrome)