Category Archives: Optimization

Советы по производительности AngularJS

Это перепечатка статьи Релиз Angular.js 2.0 приближается, а проблемы с производительностью первой версии все еще остаются. Эта статья посвящена оптимизации Angular.js приложений и будет полезна как начинающим, так и тем, кто уже использует этот фреймворк, но еще не сталкивался с проблемами его производительности. Немного простой теории Как известно, Angular.js это декларативный фронт-енд фреймворк, предоставляющий удобный …

Как Github логирует клиентские ошибки (Haystack)

http://githubengineering.com/browser-monitoring-for-github-com/ Ничего сверхнового в идеях нет, есть наглядная картинка:

Логирование времени загрузки страниц в piwik

В продолжение темы логирования ошибок в пивик. Неплохо было бы логировать в ту же систему и время загрузки страницы у реальных пользователей. Для этого в упомянутый в предыдущей статье логгер нужно добавить следующее:

	function logTimings()
	{
		setTimeout(function () {
			if (! window.performance || ! window.performance.timing) {
				return;
			}
			var timing = window.performance.timing;
			var perf = {
				dns_lookup: getTime(timing, 'domainLookupStart', 'domainLookupEnd'),
				ttfb: getTime(timing, 'requestStart', 'responseStart'),
				response: getTime(timing, 'responseStart', 'responseEnd'),
				dom_parse_and_js: getTime(timing, 'domLoading', 'domInteractive'),
				dom_ready_cbs: getTime(timing, 'domContentLoadedEventStart', 'domContentLoadedEventEnd'),
				to_dom_ready: getTime(timing, 'responseStart', 'domContentLoadedEventEnd'),
				to_load: getTime(timing, 'responseStart', 'domComplete')
			};

			perf.type = 'timings';
			perf.msg = perf.to_dom_ready;
			perf.ua = navigator && navigator.userAgent;
			perf.href = window.location.href;

			logToPiwik(perf);
		}, 5000);
	}

	function getTime(timing, from, to)
	{
		if (timing[from] && timing[to]) {
			return (timing[to] - timing[from]) / 1000;
		}
		return null;
	}

function logTimings()

{

setTimeout(function () {

if (! window.performance || ! window.performance.timing) {

return;

}

var timing = window.performance.timing;

var perf = {

dns_lookup: getTime(timing, 'domainLookupStart', 'domainLookupEnd'),

ttfb: getTime(timing, 'requestStart', 'responseStart'),

response: getTime(timing, 'responseStart', 'responseEnd'),

dom_parse_and_js: getTime(timing, 'domLoading', 'domInteractive'),

dom_ready_cbs: getTime(timing, 'domContentLoadedEventStart', 'domContentLoadedEventEnd'),

to_dom_ready: getTime(timing, 'responseStart', 'domContentLoadedEventEnd'),

to_load: getTime(timing, 'responseStart', 'domComplete')

};

perf.type = 'timings';

perf.msg = perf.to_dom_ready;

perf.ua = navigator && navigator.userAgent;

perf.href = window.location.href;

logToPiwik(perf);

}, 5000);

}

function getTime(timing, from, to)

{

if (timing[from] && timing[to]) {

return (timing[to] - timing[from]) / 1000;

}

return null;

}

И поправить window.onload на:

	window.onload = function()
	{
		if (! window.__angularLoaded) {
			window.logError({type: 'app-not-started'});
		}

		logTimings();
	};

window.onload = function()

{

if (! window.__angularLoaded) {

window.logError({type: 'app-not-started'});

}

logTimings();

};

Подробнее об объекте window.performance.timing можно почитать тут — https://blog.bullgare.com/2014/12/%D0%BC%D0%BE%D0%BD%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%BD%D0%B3-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D1%81-navigation-timing-api/ или сразу на mdn https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming.

Benchpress: автоматическое тестирование производительности AngularJS-компонент

Использование для своего приложения https://youtu.be/e6J_JZaIOAQ Что это такое и как используется для разработки AngularJS core https://youtu.be/x1PJn5qMUT4

Подробное объяснение EXPLAIN в PostgreSQL

understanding_explain

Мониторинг загрузки страницы с Navigation Timing API

Содержит следующие события: navigationStart unloadEventStart unloadEventEnd redirectStart redirectEnd fetchStart domainLookupStart domainLookupEnd connectStart connectEnd secureConnectionStart requestStart responseStart responseEnd domLoading domInteractive domContentLoadedEventStart domContentLoadedEventEnd domComplete loadEventStart loadEventEnd Поддерживается ie9+ и нормальными браузерами. Подробнее — https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming и https://developer.mozilla.org/en-US/docs/Navigation_timing. Пример использования от Яндекса — Как мы измеряем скорость загрузки Яндекс.Почты

Voronoi algorithm

Использование алгоритма Вороного в javascript. Смотреть с 10 минут. http://youtu.be/90NsjKvz9Ns?t=10m15s Ссылки: http://cgm.cs.mcgill.ca/~mcleish/644/Projects/DerekJohns/Sweep.htm http://philogb.github.io/blog/assets/voronoijs/voronoi.html (http://philogb.github.io/blog/2010/02/12/voronoi-tessellation/) https://code.google.com/p/javascript-voronoi/ https://github.com/mikolalysenko/voronoi-diagram https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D1%80%D0%B0%D0%B1%D0%BE%D0%BB%D0%B0 (ликбез по параболе) http://habrahabr.ru/post/110790/ http://www.cs.princeton.edu/~edwardz/voronoi/voronoi.html http://www.devforrest.com/examples/voronoi/ http://www.ams.org/samplings/feature-column/fcarc-voronoi https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B0_%D0%BF%D0%BE%D0%B8%D1%81%D0%BA%D0%B0_%D0%B1%D0%BB%D0%B8%D0%B6%D0%B0%D0%B9%D1%88%D0%B5%D0%B3%D0%BE_%D1%81%D0%BE%D1%81%D0%B5%D0%B4%D0%B0 http://strongriley.github.io/d3/ex/voronoi.html http://www.raymondhill.net/voronoi/rhill-voronoi-demo3.php

Встроенные утилиты linux для слежения за системой

ps
top
vmstat
strace
perf
netstat

top

vmstat

strace

perf

netstat

и многие, многие другие на одной схеме:

Оптимизация вывода длинного списка в браузере

Попросили оптимизировать вывод меню. Состоит оно из нескольких пунктов верхнего уровня, при нажатии на каждый открывается соответствующее подменю. В одном из подменю расположено более 30000(!) пунктов, и ожидается его дальнейшее увеличение.

Отладка мобильных сайтов через Google Chrome

Отличное видео от Paul Irish. Рассказывает, как отлаживать сайты на мобильных устройствах без плагинов. Как поменялась эмуляция. Ну и немного про workspaces (теперь поддерживается и less) http://youtu.be/gZH1d2Co1X0