CODEWITHSUNDEEP
javascripthtmlgoogle-chromeweb-applications
Ankit Kumar Pandey
Ankit Kumar Pandey

Reputation: 27

Google Chrome has high CPU usage for my scripts

I have created a simple web page which has some effects based on two scripts. First is a rotating 360 panorama and the other is a scroll to top div. Both the scripts use SetInterval and run at 50 millisecond intervals. The page seems to run efficiently in IE and Firefox but causes problems in Chrome i.e. has high CPU usage in chrome nearly 48%!!!!

Please help.

The Code:

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

^ It works on 2 images.

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

Upvotes: 1

Views: 834

Answers (2)

Ikrom
Ikrom

Reputation: 5103

To check showing scrolltop element 1000 milliseconds is enough.

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

And you can increase perfomance like that:

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

Upvotes: 2

atondelier
atondelier

Reputation: 2434

The only things that may cause instability are:

  • naming functions in the global scope
  • and especially using scroll as a function name which may be called elsewhere, but expecting window.scroll

Upvotes: 0

Related Questions