Question

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

请帮忙。

守则：

panorama.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张图片。

scroller.js

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;
}

Answer 2

唯一可能导致不稳定的事情是：

在全局范围内命名函数
特别是使用scroll作为函数名称，可以在其他位置调用，但期望window.scroll

谷歌浏览器的脚本CPU使用率很高

2 个答案: