Данная статья была написана 21 января 2014 участником проекта HTML5Rocks, Алексом Данило. Хочу отметить, что это мой первый перевод на Хабре, поэтому к минусам я готов, к критике еще больше. По всем проблемам и недочетам старайтесь писать мне лично, я буду оперативно исправлять. Оригинал на английском.
Высокая производительность веб-приложений является ключевым моментом для конечного пользователя. Так как веб-приложения становятся всё более и более сложными, понимание управления производительностью является убедительным навыком программиста. За последние пару лет появилось множество новых API в браузере, позволяющих следить за производительностью сети, временем загрузки и т.д. но ни одно из них не позволяет достаточно гибко и детально определить, что же именно “тормозит” ваше приложение. Для этого и есть User Timing API, которое предоставляет механизм для вашего приложения, позволяющий определить, на что и когда расходуется время.
Нельзя оптимизировать то, что нельзя измерить
Первым делом в ускорении медленного веб-приложения нам необходимо разобраться с местами, выполнение которых занимает больше всего времени. Измерение времени выполнения отдельных участков Javascript кода — идеальный способ для выявления горячих точек. Это первый шаг в поиске пути улучшения производительности. К счастью, User Timing API предоставляет решение, с помощью которого вы можете вызывать API в различных местах вашего кода для получения детальных данных о времени, которые помогут вам в оптимизации.
Скрытые параметры оперативной памяти
High Resolution Time и метод now()
Основополагающей частью измерения времени является точность. Раньше мы обходились погрешностью измерения в 1 миллисекунду, но появились jank-free сайты, в которых каждый кадр должен быть отрисован за 16мс. Поэтому для хорошего анализа миллисекундной погрешности недостаточно. Но теперь появился High Resolution Time, новый тип синхронизации, встроенный в современные браузеры. High Resolution Time предоставляет нам временные метки с плавающей точкой с точностью до микросекунды, что в тысячу раз лучше, чем было раньше.
Для получения текущего времени в приложении необходимо вызвать метод now(), который является расширением интерфейса Performance.
var myTime = window.performance.now();
Существует еще один интерфейс, называемый PerformanceTiming, который предоставляет набор временных точек, связанных с тем, как загружается веб-приложение. Метод now() возвращает время, прошедшее с момента navigationStart из PerformanceTiming.
Тип DOMHighResTimeStamp
Раньше, чтобы получить текущее время приложения, использовалась функция Date.now(), которая возвращала DOMTimeStamp. DOMTimeStamp возвращал целое число миллисекунд. Чтобы предоставить более высокую точность для High Resolution Time, был введен новый тип с названием DOMHighResTimeStamp. Этот тип уже имеет плавающую точку, хотя также возвращает время в миллисекундах. Но, благодаря нецелому значению, время содержит дробные миллисекунды и дает точность до одной тысячной миллисекунды.
Какая частота памяти нужна играм… или тайминги?
Интерфейс User Timing
Так как теперь мы имеем высокоточное время, можно начать использовать User Timing для получения информации о времени.
Интерфейс User Timing предоставляет нам функции, которые можно вызывать в разных местах приложения для выявления слабых мест.
Использование mark()
Этот метод является основным в нашем инструментарии анализа времени. Что же делает mark()? Этот метод сохраняет время для будущего использования. Но что самое полезное в нем, так это то, что мы можем давать имена нашим отметкам. В этом случае API сохраняет связь имя-время как отдельный элемент.
Используя mark() в различных местах, можно определить, сколько времени прошло между вызовами.
Спецификацией были предусмотрены стандартные названия отметок, которые довольно понятны, например: ‘mark_fully_loaded’,’mark_fully_visible’,’mark_above_the_fold’ и т. д.
Для примера, мы могли бы сделатьотметку, когда приложение полностью загрузится:
window.performance.mark(‘mark_fully_loaded’);
Устанавливая именованные метки по всему приложению, мы можем собрать огромное количество данных и проанализировать их на досуге, чтобы разобраться, когда и на что тратить время приложение.
Измерения и метод measure()
После того как вы установите временные отметки, вам необходимо вычислить время между ними. Для этого и нужен метод measure(). Он определяет время, которое произошло между отметками. А также может определить время между пользовательской отметкой и одной из стандартных, перечисленных в интерфейсе Performance Timing. Например, чтобы посчитать время с момента загрузки DOM до того как приложение будет полностью загружено, используется следующий код:
window.performance.measure(‘measure_load_from_dom’, ‘domComplete’, ‘mark_fully_loaded’);
Примечание: в этом примере мы передаем зарезервированное имя ‘domComplete’ из интерфейса Performance Timing.
Когда вызывается метод measure(), он сохраняет результат независимо от меток, так что вы сможете получить это значение позже. Сохраняя отдельно данные о времени в момент работы приложения, оно остается отзывчивым и работоспособным, и вы сможете выгрузить данные для анализа после того как приложение сделает какую-то работу.
Сброс отметок с clearMarks()
Иногда полезно избавиться от кучи сохраненных отметок. Например, вы можете запускать приложение из командной строки, поэтому логично будет сбросить все накопленные отметки до запуска.
Достаточно легко избавиться от установленных отметок вызовом clearMarks().
Таким образом, следующий пример кода сбросит все существующие отметки, так что вы сможете настроить это заново, если хотите.
window.performance.clearMarks();
Конечно, есть некоторые ситуации, в которых вы бы не хотели очищать все отметки. Если вы хотите удалить конкретные, то вы можете просто передать имя отметки для удаления. Например, следующим образом:
window.peformance.clearMarks(‘mark_fully_loaded’);
Этот код избавляется от отметки, сохраненной выше. Но все остальные отметки никуда не исчезнут.
Возможно, вы также захотите удалить измерения, которые вы сделали. Для этого есть соответствующий метод clearMeasures(). Он работает точно так же, как clearMarks(). Например:
window.performance.clearMeasures(‘measure_load_from_dom’);
удалит измерение, которые мы сохранили в примере выше. Для удаления всех измерений необходимо вызывать этот же метод без аргументов, как и в clearMarks().
Сохранение данных о времени
Это всё хорошо, устанавливать отметки и измерять время, но в какой-то момент вы захотите получить эти данные для проведения анализа. И это тоже очень просто, всё, что вам нужно — это использовать PerformanceTimeline интерфейс.
Например, метод getEntriesByType() позволяет нам получить все отметки или все наши измерения в виде списка, чтобы у нас была возможность пройти по нему и обработать данные. Что удобно, так это то, что список возвращается в хронологическом порядке, и можно следить за отметками по мере того, как они вызывались в приложении.
var items = window.performance.getEntriesByType(‘mark’);
возвращает все отметки, которые были отмечены в приложении, в то время как этот код:
var items = window.performance.getEntriesByType(‘measure’);
возвращает все измерения, которые были произведены.
Также можно получить список записей по имени, которое вы им присваивали:
var items = window.performance.getEntriesByName(‘mark_fully_loaded’);
вернет список с одним элементом содержащим временную метку ‘mark_fully_loaded’ в свойстве startTime.
Пример расчета времени XHR запроса
Теперь, когда у нас есть полноценная картина о User Timing API, определим как долго выполняются все наши XHR-запросы в приложении.
Сначала нам нужно изменить все send() запросы, чтобы в них устанавливать отметки, а также изменить наши callback-функции, в которых будут устанавливаться другие отметки. А также измерить время между ними, чтобы определить продолжительность запроса.
Обычно, простой XHR запрос выглядит следующим образом:
var myReq = new XMLHttpRequest(); myReq.open(‘GET’, url, true); myReq.onload = function(e) < do_something(e.responseText); >myReq.send();
Для примера мы добавим глобальный счетчик, чтобы следить за количеством запросов а также для использования его в сохранении измерений по каждому запросу. Код для этого будет выглядеть так:
var reqCount = 0; var myReq = new XMLHttpRequest(); myReq.open(‘GET’, url, true); myReq.onload = function(e) < window.performance.mark(‘mark_end_xhr’); reqCnt++; window.performance.measure(‘measure_xhr_’ + reqCnt, ‘mark_start_xhr’, ‘mark_end_xhr’); do_something(e.responseText); >window.performance.mark(‘mark_start_xhr’); myReq.send();
Этот код генерирует измерение с уникальным именем для каждого XHR-запроса, который мы отправляем. Мы предполагаем, что все запросы выполняются последовательно, для параллельных же запросов код нужно немного изменить. Поэтому оставим это как домашнее упражнение для читателей.
После того, как веб-приложение сделало много запросов, мы можем выводить данные в консоль со следующим кодом:
var items = window.performance.getEntriesByType(‘measure’); for (var i = 0; i
Заключение
User Timing API дает много отличных инструментов, готовых к применению в разных частях вашего приложения. Уменьшение количества слабых мест может быть легко достигнуто расстановкой вызовов API по всему приложению, и пост-анализом полученных данных. Но что, если Ваш браузер не поддерживает это API?
Нет проблем, вы можете найти отличный полифил здесь, который эмулирует API действительно хорошо, и не нагружает систему. Так чего же Вы ждете? Попробуйте User Timing API в ваших приложениях сейчас для того, чтобы ускорить их и пользователи будут благодарны вам.
Источник: habr.com
Timing для Mac или Как перестать растрачивать свое время впустую
Все мы порой отвлекаемся от работы на Twitter, сериал или Starcraft 2, например. Но это отрицательно влияет на нашу продуктивность, а небольшая трудовая задача неизбежно растягивается на весь день. Однако, с помощью приложения для контроля времени Timing можно расставить все по полкам и выявить ту активность, которая не дает вам спокойно работать.
Приложение находится в строке меню и в фоновом режиме следит за тем, что именно вы используете на протяжении всего дня. Timing ведет запись только тех приложений, окна которых активны в данный момент. Вы же, в свою очередь, можете посмотреть на графики, подробно описывающие, на что и как долго вы тратили свое время.
Вся статистика разбита по категориям, вроде игр, офисных приложений, браузеров и мессенджеров. Вы также можете добавлять свои категории или редактировать существующие. Кроме того, вы можете ставить трекинг на паузу, чтобы сделать данные более точными, ведь согласитесь, если вас, например, раньше отпустили с работы в пятницу, то незачем портить статистику развлечениями.
Самое интересное, что Timing отслеживает не только приложения, но и их активность, вплоть до лога ходов в шахматах и истории браузера. Эта особенность позволяет переносить определенную активность в другие категории. Так, например, общение в Facebook явно не относится к “полезной” активности в браузере, поэтому лучше отправить весь серфинг на домене facebook.com в раздел “общение” или создать отдельный раздел и назвать его “соцсети”.
Итоги
Timing позволяет довольно точно определять, когда и на что вы тратили свое время, хотя есть в этом подходе и свой недостаток: если вы слушаете музыку, а окно iTunes свернуто, то приложение не запишет эту активность, но таких примеров немного. Зато всего за пару дней вы сможете наглядно увидеть, что именно отнимает ваше время и стать чуточку продуктивней. На официальном сайте можно скачать демо-версию и попробовать Timing ограниченное время бесплатно.
Источник: iphonegeek.me
Timing для Mac покажет на что вы тратите время за компьютером
Вы когда нибудь проводили целый день за компьютером, а потом думали куда и на что потратили свое время? Тем более, если половина дня уже прошла, а Вы так ничего и не успели.
Или составляли смету для клиента и не могли вспомнить сколько времени было потрачено на него?
Можно, конечно, пользоваться ручным трекером времени или записывать потраченное время вручную. Но, если быть откровенным, то это крайне неудобно. Вам нужно запускать и останавливать таймер, записывать что Вы сделали и так далее. А если забыли об этом, то все придется начинать сначала.
Но! Все становится невероятно просто с приложением Timing для Mac.
Оно автоматически и в фоне ведет учет потраченного времени. Записывается все: какие сайты Вы посещали, какими приложениями пользовались, с каким документом работали и так далее. А самое главное, показывает время, потраченное на то или иное занятие.
Вариантов использования приложения много. Например, Вам интересно, насколько часто Вы отвлекаетесь на поиски в интернете, игры, мессенджеры и так далее. Скажу откровенно, но объективно оценить это без специального приложения очень сложно.
Лично для себя я узнал, что довольно много времени провожу в социальных сетях. Причем, заходил я туда только в перерывах на работе. А за целый день все это вылилось в неприлично большое количество времени. Без приложения Timing я вряд ли бы смог сам объективно оценить потраченное время
После первого запуска приложения оно появится в менюбаре в виде иконки будильника и больше не будет Вас отвлекать. Обратите внимание на то, что Timing ведет запись активности только тех приложений, окна которых активны в данный момент.
При нажатии на эту иконку появляется небольшое окно с доступом к быстрым функциям:
- Показать результаты трекинга активности (запускает основное окно приложения)
- Полностью остановить запись активности
- Остановить запись активности на определенный промежуток времени
- Добавить активность вручную. В данном пункте можно ввести ее название, дату начала, время начала и продолжительность.
Возможности приложения
Окно приложения разделено на 2 колонки: слева видны различные категории активности (веб-серфинг, офис, Finder, Media и так далее), а справа диаграмма потраченного времени. Можно включить отображение как по приложениям и тогда будет список активности будет выглядеть как на этом скриншоте:
Или можно выбрать режим «Per Hour»
Слева есть список категорий. Timing автоматически добавляет активность в определенных приложениях в соответствующую категорию. Например, если Вы провели некоторое время в Safari, то увидеть проведенное в нем время можно в категории «Web Browsing». Причем, посмотреть можно не только сколько времени потрачено в брацзере в целом, но и сколько на каждый сайт и любую страницу на этом сайте. Или, если Вы работали в Pages, то соответственно вся активность появится в разделе «Office».
Если приложение неправильно выбрало категорию для выполняемых действий, то можно перенести ее из одной категории в другую простым перетягиванием.
Можно выбрать определенный промежуток времени как вручную (выбрав даты и время), так и предустановленные варианты: неделя, сегодня, вчера и так далее.
В целом, приложение мне понравилось. Если Вам интересно знать на что Вы тратите свое драгоценное время за компьютером, то с помощью Timing это сделать невероятно просто.
Я настоятельно рекомендую скачать пробную версию программы с сайта разработчика и сделать для себя выводы насколько она окажется удобной и полезной именно для Вас.
Источник: tuzovpavel.ru