[英]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. 我正在开发一个网络浏览器游戏,随着我的进步,我在动画过程中发现很多FPS下降-特别是在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! 我担心不得不重写它,并且它变得越来越沉重,但是当我在Firefox甚至IE11中运行该应用程序时,它运行得尽可能流畅,没有任何明显的延迟!
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? 我不敢相信Chrome无法处理这种类型的渲染,是否有可能我在控制台中打开了某些东西,使chrome变得迟钝? 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. 我认为有一个问题是_theatre()函数。 What it does is that it creates a full page fixed div that has 0.8 opacity. 它的作用是创建不透明度为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>');
}
}
If I comment the _theatre() function out, the dragging is noticably smoother. 如果我将_theatre()函数注释掉,则拖动会更加平滑。
I tried removing the opacity from the div but to no better results. 我尝试从div移除不透明度,但是没有更好的结果。 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 探查器数据http://imageshack.com/a/img819/8601/jbf2.png
Without knowing specifically what the issue is I would suggest you start using console.profile()
to test the performance of your code. 不知道具体是什么问题,我建议您开始使用console.profile()
测试代码的性能。 This should help pinpoint the issue. 这应该有助于查明问题。
For Example: 例如:
console.profile("Profile One");
function yourCode()
{
// some code
}
console.profileEnd("Profile One");
DEMO: DEMO:
http://jsfiddle.net/NMbG4/5/ 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. 与此类似,您也可以使用相同格式的console.time()
来跟踪函数花费的时间(以毫秒为单位)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.