Измерение производительности Javascript (jQuery) и лучшие практики (не время загрузки)

Question

Я сразу скажу, что этот вопрос НЕ о времени загрузки; Я знаю о YSlow, профилировщике Firebug, и обо всех лучших рекомендациях и инструментах, которые googlage показывает о времени загрузки компонентов страницы.

Я спрашиваю, какие есть хорошие инструменты профилирования, библиотеки или надстройки для измерения фактического выполнения Javascript (в частности, jQuery), если речь идет об улучшении реального пользовательского опыта. Например, измерение времени от щелчка до видимого результата на экране или определение того, почему эффект наведения на основе jQuery имеет медленную отзывчивость.

Мы замечаем, что когда страница / DOM растет относительно большой (скажем, HTML размером от 70 до 150 КБ, исключая внешний CSS, JS и изображения), и / или имеет очень глубокую вложенность (14-25 уровней от ) к глубокой метке), события jQuery запускаются медленнее, или весь пользовательский интерфейс JS становится вялым.

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

Я уже реализовал некоторое делегирование событий, и у меня есть ощущение, что меньшее количество подключенных элементов DOM делает вещи немного лучше, но в целом работа с большими страницами все еще нуждается в улучшении. Я должен отметить, что, поскольку сайт является тяжелым AJAX (лоты загружаются через AJAX, а не первоначальный HTTP-запрос), мы интенсивно используем livequery вместо простых перехватчиков событий jQuery. Следует также отметить, что мы немного больше ориентируемся на производительность IE (7+), но также нуждаемся в хорошей производительности Firefox.

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

Какие-нибудь советы, инструменты, библиотеки, сообщения в блогах, URL-адреса?

Answer 1

JSLitmus выглядит как то, что я мог бы попробовать.

Answer 2

Используя Firebug, вы можете перейти на вкладку консоли, а затем щелкнуть значок Firebug в верхнем левом углу (называемый «Параметры Firebug»). Затем нажмите на опцию «Профиль Javascript», после этого просто сделайте то, что вы хотите измерить, например, нажав кнопку javascript, перетаскивая перетаскиваемый объект Jquery или что-либо еще, что запускает немного кода JavaScript. Когда вы выполнили JavaScript, который хотите измерить, вернитесь к тому же пункту меню и еще раз нажмите «Profile javascript» (чтобы он не был проверен). Теперь вкладка консоли будет заполнена всеми действиями, которые вы ранее выполняли, а также временем выполнения каждого метода и т. Д. (И общим временем выполнения).