Медленное выполнение javascript в chrome, профилировщик выдает "(program)" - PullRequest
17 голосов
/ 29 февраля 2012

Как бы я определил, что такое зависание в моем приложении javascript, когда профилировщик помещает (программу) на вершину с 80%? Моя логика слишком сложна для отслеживания точки доступа? Не слишком ли велика моя память? Что вообще является причиной этого?

Дополнительная информация:

  • В форме нет элементов, кроме тега "один холст"
  • Нет ожидающих сообщений (xhr)
  • http://i.imgur.com/j6mu1.pngДанные профиля

Ответы [ 3 ]

25 голосов
/ 06 марта 2012

Циклы простоя («ничего не делая») также будут отображаться как «(программа)» (вы можете профилировать эту страницу SO в течение нескольких секунд и получить 100% (программа) ), так что это не признак чего-то плохого в себе.

Другое дело, когда вы действительно видите, что ваше приложение отстает. Тогда (программа) будет добавлен с помощью кода привязок V8 (и кода WebCore, который они вызывают, который по сути является чем-нибудь: операциями DOM / CSS, рисованием, выделением памяти и GC, что нет.) Если это так В этом случае вы можете записать Временную шкалу вашего приложения (переключитесь на панель Timeline в Инструментах разработчика и нажмите кнопку Record в нижней строке состояния, затем некоторое время запустите ваше приложение.) Вы увидите много внутренних событий с их временными рамками в виде горизонтальных полос. Вы увидите перекомпоновки, перерасчеты стилей, срабатывание таймеров, события GC и многое другое (кстати, в последних версиях Chromium улучшена временная шкала использования профилировщика памяти, так что вы также сможете отслеживать память, используемую определенными внутренними факторами.)

Для диагностики проблем с памятью (многократное распределение, влекущее за собой несколько полных циклов GC), вы можете использовать панель Profiles. Сделайте снимок кучи до того, как начнется интенсивная часть вашего кода, и еще один после того, как этот код запустится в течение некоторого времени. Затем сравните два кучи (правый SELECT внизу), чтобы увидеть, какие выделения произошли, а также их влияние на память.

3 голосов
/ 06 марта 2012

Смотрите эту ссылку: это поможет вам в Понимание вывода профилировщика Firebug

Я бы сказал, что вы должны проверить, какие методы принимают%. Вы можете минимизировать нежелательные процедуры от них. Я видел на вашем рисунке, что какой-то draw метод потребляет около 14%, который работает в фоновом режиме. Может быть из-за этого ваша JS загружается медленно. Вы должны определить, что занимает время. И FF, и Chrome имеют функцию, которая показывает сетевой трафик. Взгляните также на yslow , у них есть отличное дополнение к Firebug.

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

  1. сколько времени понадобилось для подключения к серверу?
  2. сколько времени заняло передача контента?
  3. сколько других вещей вы загружаете на эту страницу одновременно?

В любом случае, даже без всего этого, вот контрольный список для повышения производительности:

  • убедитесь, что ваш javascript обрабатывается и используется как статический контент, например через nginx / apache / что угодно напрямую или через cdn, не выходя за рамки вашего приложения
  • выясните, можете ли вы использовать CDN для обслуживания javascript, иногда даже указание разных доменных имен на ваш сервер оказывает положительное влияние, например, вместо http://example.com/blah.js -> http://cdn2.example.com/blah.js
  • убедитесь, что ваш js обслуживается с правильными заголовками срока действия, не перезагружайте его каждый раз, когда клиент обновляет страницу
  • включить сжатие содержимого js
  • уменьшите ваши js, используя различные доступные инструменты (например, с компилятором Google Closure)
  • объединяет ваши скрипты (уменьшает количество запросов)
  • поместите ваши теги сценария непосредственно перед
  • расследование и очистка / оптимизация загрузки и документирования. Уже перехватывает

Посмотрите на плагин YSlow и Google PageSpeed ​​, оба очень полезны для повышения производительности.

3 голосов
/ 05 марта 2012

Чтобы проверить, замедляется ли из-за опции памяти, используйте: chrome://memory

Также вы можете проверить chrome://profiler/ на возможные подсказки о том, что происходит.

Другой вариант -опубликуйте свой код JavaScript здесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...