Измерение производительности Javascript (jQuery) и лучшие практики (не время загрузки)
Я сразу скажу, что этот вопрос НЕ о времени загрузки; Я знаю о YSlow, профилировщике Firebug и любых передовых методах и инструментах, которые показывает googlage о времени загрузки компонентов страницы.
Я спрашиваю, какие есть хорошие инструменты профилирования, библиотеки или надстройки для измерения фактического выполнения Javascript (в частности, jQuery) в той мере, в какой это улучшает фактическое взаимодействие с пользователем. Например, измерение времени от щелчка до видимого результата на экране или помощь в определении того, почему эффект зависания на основе jQuery имеет медленную реакцию.
Мы замечаем, что когда страница / DOM становится относительно большой (скажем, от 70 до 150 Кбайт HTML, исключая внешний CSS, JS и изображения) и / или имеет очень глубокую вложенность (14-25 уровней от <body> до самого глубокого тега ), события jQuery запускаются медленнее, или весь пользовательский интерфейс JS становится вялым.
Я также погуглил и узнал о лучших практиках для селекторов (например, выбор по идентификатору намного быстрее, чем выбор с помощью классов), я буду применять эти методы. Однако после того, как весь jQuery полностью загружен и все события подключены, нам все равно нужно улучшить фактическое срабатывание и выполнение событий.
Я уже реализовал некоторое делегирование событий, и я чувствую, что меньшее количество подключенных элементов DOM делает ситуацию немного лучше, но общий опыт работы с большими страницами все еще нуждается в улучшении. Я должен упомянуть, что, поскольку сайт загружен через AJAX (партии загружаются через AJAX, а не через первоначальное HTTP-обращение), мы интенсивно используем livequery вместо простых обработчиков событий jQuery. Я также должен упомянуть, что мы немного больше сосредоточены на производительности IE (7+), но также нуждаемся в хорошей производительности Firefox.
По мере того, как я разрабатываю и вношу изменения, я полагаю, что мне нужен способ измерения скорости до и после изменения, чтобы я мог иметь конкретные цифры о том, улучшает ли изменение что-либо.
Любые советы, инструменты, библиотеки, сообщения в блогах, URL-адреса?
Вы когда-нибудь находили ответ на свой вопрос, мне самому любопытно.
android.nick: В то время я использовал JSLitmus.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
JSLitmus похоже на то, что я мог бы попробовать.
Я действительно провел небольшой тест с JSLitmus, и он отлично подходит для того, что делает. Тем не менее, я все еще открыт для ответов на этот вопрос SOF.
ты что-то придумал помимо JSLitmus? более конкретно - в чем была проблема с вашей веб-страницей?
Используя Firebug, вы можете перейти на вкладку консоли, затем щелкнуть значок firebug в верхнем левом углу (называемый «Параметры Firebug»). Затем нажмите на опцию «Профиль Javascript», после чего просто сделайте то, что вы хотите измерить, например, нажмите кнопку javascript, перетащите перетаскиваемый объект JQuery или что угодно, что запускает немного кода javascript. Когда вы выполнили javascript, который хотите измерить, вернитесь к тому же пункту меню и еще раз нажмите «Профиль javascript» (чтобы он не был отмечен). Теперь вкладка консоли будет заполнена всеми действиями, которые вы выполняли ранее, а также временем, которое потребовалось для выполнения каждого метода и т. д. (А также общим временем).
вы читали вопрос перед тем, как сделать 3 года выше? это первая строка «этот вопрос НЕ о времени загрузки; я знаю о YSlow, профилировщике Firebug»
Он фактически ответил на вопрос (лучше, чем большинство, пока мы занимаемся этим). Здесь он описывал не то, как измерить время загрузки, а время выполнения скрипта (что является довольно хорошим показателем производительности), о чем и идет речь.
Для справки, я наткнулся на это сообщение в блоге о неточности таймера в браузерах под Windows: ejohn.org/blog/accuracy-of-javascript-time