31.01.2014

User Timing/Performance, grasp.

window.performance

Немного истории

				// Начало замера
				var startTime = new Date;

				slowFunction();

				// Время выполнения
				var duration = (new Date) - startTime;
			

Немного истории

И это способ до сих пор актуален, даже больше, он едиственно возможный, для передачи этих замеров в мониторинг. Есть ещё console.time/timeEnd, но они только выводитят результат в консоль.

Немного истории

Но у new Date есть один существенный недостаток. Если замеряемый участок кода выполнется в пределах 1ms, продолжительность такого участка получится 0ms.

User Timing

Декабрь 2013, принес нам полноценную работу с «засечками»:

performance.mark

Cоздает следующую запись:
				{
				   name: "foo", // название записи
				   entryType: "mark", // тип записи
				   startTime: 2686782.357000047, // время засечки
				   duration: 0 // всегда ноль, т.к. это засечка
				}
			

performance.measure

Создает такую же запись, как и performance.mark, только с иным entryType и запоненым duration.
				{
				   name: "foo_bar", // название записи
				   entryType: "measure",  // тип записи
				   startTime: 2686782.357000047, // время последней засечки
				   duration: 7876.608999911696  // продолжительность
				}
			

Важно

Хочу обратить внимание, оба метода не перезаписывают предыдущее значение, а добавляют новую запись. performance.measure — работает с последними метками.

Получение записей

Пример. Замеряем head.

			<head>
			  <script>performance.mark("head_start");<script>
			  ...
			  <script>
			    performance.mark("head_end");
			    performance.measure("head", "head_start", "head_end");
			  <script>
			<head>
		

Пример. Замеряем body.

			<body>
			  <script>performance.mark("body_start");<script>
			  ...
			  <script>
			    performance.mark("body_end");
			    performance.measure("body", "body_start", "body_end");
			  <script>
			<body>
		

Скидываем замеры в мониторинг

			var entries = performance.getEntriesByType("measure");
			var i = entries.length;
			while( i-- ){
			   var entry = entries[i];
			   __monitoring("page", entry.name, entry.duration);
			}
		

Мониторинг

Если у вас нет своего мониторинга, то вы всегда можете использовать Google Analytics:

			function __monitoring(category, name, duration){
			  duration = Math.round(duration);
			  (window._gaq || (window._gaq = []))
			    .push(["_trackTiming", category, name, duration]);
			}
		

Ммм?

Всё это конечно хорошо, но:
				performance.mark("body__end");
				performance.measure("body", "body_start", "body_end");
			

Кто поддерживает?

grasp

grasp

Интсрумент для поиска и рефакторинга JavaScript кода на основе его структуры, а не текста.

Устанавливаем: npm install -g grasp

Есть метод

			api.edit = function (action, items, extra, callback){
			   //* __ *//
			};
		

Найдем все места, где он используется

grasp -r -e 'api.edit(_$)' path/to

			path/to/foo.js:37            api.edit("remove", [1, 2])
path/to/sub/bar.js:3    api.edit("mark", ids)
path/to/baz.js:3          api.edit("more", list, extra, callback)

Заменяем

grasp -r -e 'api.edit($a, $i)'
-R 'api.edit({ action: {{a}}, items: {{i}} })'
path/to -i

grasp -r -e 'api.edit($a, $i, $e, $c)'
-R 'api.edit({ action: {{a}}, items: {{i}}, extra: {{e}}, callback: {{c}} })'
path/to -i

The End

github.com/RubaXa
@ibnRubaXa