Chrome невероятно запаздывает, по сравнению с Firefox и IE

Question

Chrome невероятно запаздывает, по сравнению с Firefox и IE

0

Я развиваю игру в веб-браузере, и по мере того, как я прогрессирую, я видел много падений FPS во время анимаций, особенно перетаскиваемых в Chrome. Я очень беспокоился о том, чтобы переписать его и что он становится тяжелым, но когда я запускал приложение в Firefox или даже в IE11, он работал настолько плавно, насколько это возможно, без каких-либо заметных задержек!

Я не могу поверить, что Chrome не будет обрабатывать этот тип рендеринга, возможно ли, что я превратил что-то в консоль, что делает хром лаги, как ад? Некоторые регистрации и т.д.?

Приложение использует тихий много непрозрачности, текстовые и полевые тени и т.д. И т.д.

благодаря

Лиса

- ОБНОВЛЕНИЕ ПРОФИЛЯ -

Так вот что происходит

Когда пользователь открывает инвентарь

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

Я считаю, что проблема заключается в функции _theatre(). Что он делает, так это то, что он создает полный фиксированный div, который имеет 0,8 непрозрачность.

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

Foxhoundn 24 март 2014, в 18:59

Источник

0

Вы все это время разрабатывали в Chrome? Если это так, возможно, вам просто нужно очистить кеш или что-то из этого браузера.
TylerH 24 март 2014, в 17:45
0

Привет да. О, я глупый, никогда даже не думал об этом. Собираюсь попробовать это сейчас.
Foxhoundn 24 март 2014, в 17:46
1

Пара предложений. В Chrome вы можете отслеживать производительность вашего JavaScript с помощью console.profile(); это может помочь сузить ваш код. Я предполагаю, что вы не используете JQuery, потому что вы не отметили его. Но если вы используете его и рамку CSS, вы должны быть осторожны при расчете ширины. Эта статья объясняет проблему более подробно. blog.jquery.com/2012/08/16/...
Kris Hollenbeck 24 март 2014, в 17:49
0

Я использую jquery, я не мог пометить его из-за ограничения тега 5. Я никогда не использовал border width () или outerWidth () в моей игре.
Foxhoundn 24 март 2014, в 17:51
0

@Foxhoundn Я бы предложил удалить тег HTML, так как маловероятно, что разметка HTML является причиной этого или любого лага ... если вам нужно больше тегов, то есть.
TylerH 24 март 2014, в 17:55
0

Я удалил javascript и добавил jQuery.
Foxhoundn 24 март 2014, в 17:56
0

Просто предположение, но попытайтесь избавиться от цветов rgba, используйте вместо этого rgb или шестнадцатеричное обозначение
Hoffmann 24 март 2014, в 18:33
0

@Hoffmann Мне нужно, чтобы rgba мог установить непрозрачность только для родительского элемента div, а не для его дочерних элементов. Но я постараюсь, если это поможет проблеме :)
Foxhoundn 24 март 2014, в 18:35
0

@Hoffmann Нет, все то же самое с rgb (0,0,0) или фоном: # 000
Foxhoundn 24 март 2014, в 18:37
0

Не могли бы вы предоставить лучший скриншот вашего профилировщика? Трудно увидеть некоторые столбцы и файлы из-за ширины столбцов, а поле FPS скрывает некоторые имена файлов. Также обратите внимание, как на моем снимке экрана вы можете увидеть функцию yourCode а затем она показывает процент использования от общего количества. Это важно знать, потому что это покажет, какая функция занимает большую часть обработки.
Kris Hollenbeck 24 март 2014, в 19:18

Показать ещё 8 комментариев

Теги:

jquery

html

css

google-chrome

firefox

1 ответ

Ещё вопросы

Вы все это время разрабатывали в Chrome? Если это так, возможно, вам просто нужно очистить кеш или что-то из этого браузера.
Привет да. О, я глупый, никогда даже не думал об этом. Собираюсь попробовать это сейчас.
Пара предложений. В Chrome вы можете отслеживать производительность вашего JavaScript с помощью console.profile(); это может помочь сузить ваш код. Я предполагаю, что вы не используете JQuery, потому что вы не отметили его. Но если вы используете его и рамку CSS, вы должны быть осторожны при расчете ширины. Эта статья объясняет проблему более подробно. blog.jquery.com/2012/08/16/...
Я использую jquery, я не мог пометить его из-за ограничения тега 5. Я никогда не использовал border width () или outerWidth () в моей игре.
@Foxhoundn Я бы предложил удалить тег HTML, так как маловероятно, что разметка HTML является причиной этого или любого лага ... если вам нужно больше тегов, то есть.
Просто предположение, но попытайтесь избавиться от цветов rgba, используйте вместо этого rgb или шестнадцатеричное обозначение
@Hoffmann Мне нужно, чтобы rgba мог установить непрозрачность только для родительского элемента div, а не для его дочерних элементов. Но я постараюсь, если это поможет проблеме :)
@Hoffmann Нет, все то же самое с rgb (0,0,0) или фоном: # 000
Не могли бы вы предоставить лучший скриншот вашего профилировщика? Трудно увидеть некоторые столбцы и файлы из-за ширины столбцов, а поле FPS скрывает некоторые имена файлов. Также обратите внимание, как на моем снимке экрана вы можете увидеть функцию yourCode а затем она показывает процент использования от общего количества. Это важно знать, потому что это покажет, какая функция занимает большую часть обработки.

Kris Hollenbeck · Answer 1 · 2014-03-24T15-22-00.000Z

Не зная конкретно, в чем проблема, я предлагаю вам начать использовать console.profile() для проверки производительности вашего кода. Это должно помочь определить проблему.

Например:

console.profile("Profile One");

function yourCode()
{
   // some code
}

console.profileEnd("Profile One");

ДЕМО:

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

Аналогично этому вы также можете использовать console.time() в том же формате, чтобы отслеживать, сколько времени занимает функция в миллисекундах.

+1 за потрясающую функцию соуса, о которой я никогда не знал.
Исправил мою опечатку и обновил Демо .. Надеюсь, это поможет.
Спасибо, Майк! Я обновил свой ответ со всей информацией, которую мог получить.