javascript - 谷歌浏览器对我的脚本的 CPU 使用率很高

Question

我创建了一个简单的网页，它有一些基于两个脚本的效果。第一个是旋转的 360 度全景图，另一个是滚动到顶部的 div。这两个脚本都使用 SetInterval 并以 50 毫秒的间隔运行。该页面似乎在 IE 和 Firefox 中高效运行，但在 Chrome 中会导致问题，即 Chrome 中的 CPU 使用率高达近 48%!!!!

请帮忙。

代码:

全景.js

var pant=setInterval(function(){panorama()},70);
function panorama()
{
var panx=document.getElementById("uno").style.left;
panx=parseInt(panx);panx-=1;
if(panx==-1100)
{
panx=0;
}
panx=panx.toString();panx=panx+"px";
document.getElementById("uno").style.left=panx;
document.getElementById("dos").style.left=panx;
}

^ 它适用于 2 张图像。

滚动条

window.onscroll = scrdisp;
function scrdisp()
{
var x=window.pageYOffset;
if(x>=350)
{
document.getElementById("scrolltop").style.display="block";
}
else
{
document.getElementById("scrolltop").style.display="none";
}
}
var t;
function scroll()
{
t=setInterval(function(){scr()},50);
}
function scr()
{
var h=window.pageYOffset;
if(h<=0)
{
clearInterval(t);
}
window.scrollTo(0,h-100);
}

Answer 1

要检查是否显示 scrolltop 元素，1000 毫秒就足够了。

function scroll() {
    t=setInterval(function(){scr()},1000);
}

你可以像这样提高性能:

var pant=setInterval(panorama,70);
var unoStyle = document.getElementById("uno").style;
var dosStyle = document.getElementById("dos").style;
function panorama() {
    var panx= unoStyle.left;
    panx=parseInt(panx);
    panx-=1;
    if(panx==-1100) {
        panx=0;
    }
    panx=panx+"px";
    unoStyle.left=panx;
    dosStyle.left=panx;
}