与Firefox和IE相比，Chrome令人难以置信

Question

我正在开发一个网络浏览器游戏，随着我的进步，我在动画过程中发现很多FPS下降-特别是在Chrome中可拖动。 我担心不得不重写它，并且它变得越来越沉重，但是当我在Firefox甚至IE11中运行该应用程序时，它运行得尽可能流畅，没有任何明显的延迟！

我不敢相信Chrome无法处理这种类型的渲染，是否有可能我在控制台中打开了某些东西，使chrome变得迟钝？ 一些记录等？

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

谢谢

狐狸

-配置文件更新-

所以这是发生了什么

用户打开库存时

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

探查器数据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()来跟踪函数花费的时间（以毫秒为单位）。