Почему у меня улучшенная производительность в Chrome при запуске Dev Console?

В настоящее время я работаю над маленькой холщовой игрой, написанной на чистом javascript с нуля.

Игра включает в себя алгоритм освещения 2d аналогичный этому, но с одним источником света и 25 полигонами, который составляет около 30 000 вычислений на кадр.

Моя частота кадров отличная в Safari, meh в Chrome и не воспроизводится в Firefox. Однако, если во время игры у меня есть консоль разработчика Chrome, частота кадров будет такой же, как у Safari.

Что может быть причиной этого?

После того, как комментарии предложили, размер окна может повлиять на частоту кадров, я обнаружил, что чем меньше окно, тем более гладкая игра работает, а только в хроме. Сумма, которая нарисована на экране или какие-либо вычисления, используемые в игре, вообще не зависят от размера экрана.

Я измеряю разницу частоты кадров исключительно на глаз, и вы можете видеть эффект в этих gifs:

Плохое, большое окно:

Хорошее, маленькое окно:

В браузере игра выглядит гораздо более гладко, чем это видно в этих gif, но эффект по-прежнему заметен.

Я могу получить тот же эффект, что и в первом примере в ссылке, которую я опубликовал. Это только я или кто-то еще получает тот же эффект?

Даже незнакомец... Я получил тот же эффект на нескольких других сайтах, таких как Facebook, когда я прокручиваю домашнюю ленту. Чем больше окно, тем легче будет прокрутка. Является ли это особенностью Chrome, есть ли у кого похожие результаты?

Ответ 1

Я тоже видел это на своих страницах/приложениях. Проблема, похоже, применима ко всему, но более выражена с холстом и ускоренным CSS. Насколько я могу судить, эта проблема связана с ошибкой производительности, связанной с отображением композитного слоя. В основном Chrome разбивает страницу на слои и использует графический процессор для рендеринга этих слоев. Вы можете увидеть их, включив опцию "Показывать сжатые слои" на вкладке "Рендеринг" на консоли dev. Эффективность Chrome FPS уменьшается по мере увеличения количества составных слоев независимо от изменения слоев или нет.

Вот независимый пример. Шаги для воспроизведения:

Загрузите эту страницу в Chrome, это относительно простая анимированная демо-версия CSS, которая является фиксированным размером, подобным вашей игре: http://www.subcide.com/experiments/fail-whale/
Поднимите окно разработчика Chrome (вытащите его так, чтобы оно было независимым) и включите опцию "Показать FPS-метр".
Размер окна небольшой, чтобы он просто содержал демо-версию кита. Обратите внимание на свой FPS.
Теперь размер окна большой или полный экран. Обратите внимание на свой FPS.

С маленьким окном я получаю 55 FPS. На весь экран я получаю 34 FPS. Я ожидал бы, что FPS будет почти одинаковым, независимо от размера страницы, поскольку анимированная область не изменится. FPS, по-видимому, пропорционален количеству составных слоев на видимом экране. Кроме того, изменение размера окна приводит к тому, что анимация становится короткой и пропускает кадры. Если я буду выполнять одинаковое изменение размера окна в Safari, анимация останется гладкой. Safari не знает ничего нового для рендеринга, в то время как Chrome, похоже, делает кучу работы без причины.

Итак, причина, по которой вы видите лучшую производительность при открытии вашей консоли разработчика, - это то, что у вас есть встроенная/встроенная страница разработчика, которая делает страницу самой маленькой при ее открытии. Это приводит к созданию страницы с меньшим количеством композитных слоев для обработки Chrome, что приводит к улучшению FPS. Если вы выходите из консоли разработчика, чтобы это независимое окно и не влияло на размер страницы, на ваш FPS не повлияет консоль dev или нет.

Похоже, это "почему" это происходит. Теперь, если кто-нибудь выяснит, что можно сделать по этому поводу, мне было бы интересно узнать.