CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromefirefox
Foxhoundn
Foxhoundn

Reputation: 1795

Chrome incredibly laggy, compared to Firefox and IE

Im developing a web browser game and as I am progressing I was seeing a lot of FPS drops during animations - especially draggable in Chrome. I was getting worried ill have to rewrite it and that it is becoming heavy, but when I ran the app in Firefox or even IE11, it runs as smooth as it can, without any noticable lags!

I cant believe Chrome would not handle this type of rendering, is it possible I turned something in console that makes chrome laggy as hell? Some logging etc?

The app uses quiet a lot of opacities, text and box shadows etc etc.

Thanks

Fox

-- PROFILE UPDATE --

So this is what happens

When user opens inventory

_theatre('sub', '.character-panel', 1);
$('.character-panel').show()
_loadInventory();
_loadPlayerStats();
_loadEquipment();

What I believe is a problem is the _theatre() function. What it does is that it creates a full page fixed div that has 0.8 opacity.

function _theatre(t, e, a){

if(a == 1){

    window.paused = 1;

    $('html').css('overflow', 'hidden');

    $(e).wrap('<div class="theatre-' + t + '"></div>');

}
else{

    window.paused = 0;

    $('html').css('overflow', 'auto');

    $(e).unwrap('<div class="theatre-' + t + '"></div>');

}

}

If I comment the _theatre() function out, the dragging is noticably smoother.

I tried removing the opacity from the div but to no better results. Whats going on? :/

div.theatre-sub {top:0; left:0; right:0; bottom:0; position:fixed; z-index:9996; background-color:rgba(0,0,0,0.8)}
div.theatre-dom {top:0; left:0; right:0; bottom:0; position:fixed; z-index:9998; background-color:rgba(0,0,0,0.8)}

Profiler data http://imageshack.com/a/img819/8601/jbf2.png

Upvotes: 0

Views: 135

Answers (1)

khollenbeck
khollenbeck

Reputation: 16157

Without knowing specifically what the issue is I would suggest you start using console.profile() to test the performance of your code. This should help pinpoint the issue.

For Example:

console.profile("Profile One");

function yourCode()
{
   // some code
}

console.profileEnd("Profile One");

enter image description here DEMO:

http://jsfiddle.net/NMbG4/5/

Similar to this you can also use console.time() in the same format to track how long a function is taking in milliseconds.

Upvotes: 1

Related Questions