Подтвердить что ты не робот

Высокое использование процессора javascript - Как отлаживать?

Каков наилучший способ найти причину высокого использования javascript в процессоре?

У меня есть script, который просто загружает фотографии из flickr в галерею миниатюр. После того, как они загружены, ничего не делается (ожидая, что вы нажмете их, чтобы отобразить в лайтбокс), но использование процессора все еще составляет 25% и более.

Я открыл firebug, нажал профиль, немного подождал, а затем снова щелкнул его, но в нем говорится: "Нет активности для отчета". Если бы что-то происходило, разве не сообщалось бы? Или я использую этот инструмент неправильно?

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

Спасибо, Wesley

Изменить: похоже, проследить его происхождение.. Это не что-то связанное с JS, а CSS! ЧТО ЭТО?

Проблема заключается в следующем:

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

.thumbnail img {
   display:block;
   background-image: url("/images/ajax-loader.gif");
   background-position: center center; 
   background-repeat:no-repeat;
   overflow:hidden;
   color:white;
}

Если я удалю этот код, использование процессора упадет до 0,03% или что-то.. вместо 20%... Это из-за анимированного gif, который все еще играет, но просто закрыт?

Я не знал, что анимированные gifs отнимают это от процессора? Конечно, он делает это более 20 раз, но все же. Это было то же самое и в сафари/хром.

Я думаю, что я должен либо не использовать индикатор индикатора загрузки внутри каждого изображения, либо удалять фоновое изображение при успешной загрузке изображения.

4b9b3361

Ответ 1

Я использовал в течение последних недель инструмент "dynaTrace AJAX Edition" (бесплатный инструмент) для анализа веб-сайтов (а не только для JavaScript). У этого есть некоторые довольно хорошие представления, которые показывают использование ресурсов. Попробуйте отследить часть javascript (или других частей браузера), которые являются причиной высокого использования процессора. Однако этот инструмент работает только с firefox и текущими реализациями Internet explorer, но когда вы используете firebug, это указывает на то, что вы используете firefox.

На странице их форумов есть запись "Что еще может повлиять на использование процессора браузером и производительность AJAX?" , в котором есть еще несколько советов, которые может помочь.

Ответ 2

Попробуйте перезагрузить страницу после включения функции профиля FireBug.

Для этого я использовал функцию профиля FireBug. Вы можете видеть, какая функция потребляет большую часть времени. Великая вещь. Попробуйте это на других страницах с простым примером javascript. Он должен хорошо работать. Если это не работает в вашем примере, просто отправьте им сообщение об ошибке.

Ответ 3

Вы можете попробовать Chrome/Chromium Developer Tools "Profiler, Start, перезагрузить страницу, подождать несколько минут и остановить ее. Было бы достаточно данных, чтобы иметь представление о том, что может быть проблемой.

Другая распространенная проблема с высоким использованием процессора в браузерах - анимация css, (а также gif-изображения). При разработке веб-приложения я столкнулся с проблемой высокой производительности процессора, было странно, что это произошло только тогда, когда вкладка была активной/видимой, но когда на фоне этого не было, и проблема присутствовала в FF, Chrome и Хром. Наконец, он оказался анимированным бутстрапом Progress Bar.

Здесь вы можете легко проверить это http://getbootstrap.com/components/#progress-animated, открыть его в Chrome, открыть Инструменты" Диспетчер задач, затем Включить анимацию на сайте Bootstrap и проверьте использование процессора.

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