我创建了一个简单的网页,它有一些基于两个脚本的效果。第一个是旋转的 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);
}
最佳答案
要检查是否显示 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;
}
关于javascript - 谷歌浏览器对我的脚本的 CPU 使用率很高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15996941/