与Firefox和IE相比，Chrome难以置信地落后

Question

我正在开发一个网络浏览器游戏，随着我的进步，我在动画中看到了大量的FPS下降 - 特别是在Chrome中可拖动。我担心不得不改写它并且它变得很重，但当我在Firefox或IE11中运行应用程序时，它运行尽可能顺利，没有任何明显的滞后！

我无法相信Chrome无法处理这种类型的渲染，我是否有可能在控制台中使某些东西变得如此糟糕？有些记录等？

该应用程序使用安静的很多不透明度，文本和框阴影等。

由于

福克斯

- PROFILE UPDATE -

所以这就是发生的事情

用户打开广告资源时

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

我认为是一个问题是_theatre（）函数。它的作用是创建一个具有0.8不透明度的整页固定div。

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

}

}

如果我对_theatre（）函数进行注释，则拖动会非常平滑。

我尝试从div中删除不透明度，但没有更好的结果。这是怎么回事？ ：/

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数据http://imageshack.com/a/img819/8601/jbf2.png

Answer 1

如果没有具体了解问题所在，我建议您开始使用console.profile()来测试代码的性能。这应该有助于查明问题。

例如：

console.profile("Profile One");

function yourCode()
{
   // some code
}

console.profileEnd("Profile One");

的 DEMO：

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

与此类似，您也可以使用相同格式的console.time()来跟踪函数的使用时间（以毫秒为单位）。