Category Archives: Client Optimization

Simple way to detect browser’s FPS via JS

It’s dumb and dead simple but works. You can even track browser’s metrics with that.

(() => {
    const times = [];
    let fps;

    function refreshLoop() {
        window.requestAnimationFrame(() => {
            const now = performance.now();
        while (times.length > 0 && times[0] <= now - 1000) {
            times.shift();
        }
        times.push(now);
        fps = times.length;
        refreshLoop();
    });
    }
    refreshLoop();
    
    // output to console once per second
    setInterval(() => {console.log(fps);}, 1000)
})();

(() => {

const times = [];

let fps;

function refreshLoop() {

window.requestAnimationFrame(() => {

const now = performance.now();

while (times.length > 0 && times[0] <= now - 1000) {

times.shift();

}

times.push(now);

fps = times.length;

refreshLoop();

});

}

refreshLoop();

// output to console once per second

setInterval(() => {console.log(fps);}, 1000)

})();

Cool talk on js event loop and call stack

It’s junior-middle level, but animations are nice as well. https://youtu.be/8aGhZQkoFbQ Here’s an article about almost the same but in more details about difference between tasks’ queue (timeouts) and microtasks’ queue (promises and DOM modifications). The main idea is that there are several queues that have different priorities. And microtasks are more important than tasks. https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

React. Benchmarking and optimizing performance

There is a tool called react-addons-perf that should be imported into your project.

import Perf from 'react-addons-perf';

window.Perf = Perf;

import Perf from 'react-addons-perf';

window.Perf = Perf;

After that you can use Perf object in your console. It can tell you about your react performance issues, not including redux. For instance, you can check unnecessary renders or unnecessary change calculations:

Perf.start();
// do whatever you want to measure
Perf.stop();

Perf.printOperations(); // to show DOM manipulations
Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards

Perf.start();

// do whatever you want to measure

Perf.stop();

Perf.printOperations(); // to show DOM manipulations

Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards

Here’s more on that — https://reactjs.org/docs/perf.html. And …

Отладка сторонних скриптов в Google Chrome

Если у вас есть на сайте какая-нибудь вредная система, которая вставляет произвольные скрипты на сайт, то рано или поздно встаёт проблема с тем, что их нужно отладить. В Google Chrome это можно сделать так: .

Как выявить лишние стили на сайте

https://github.com/ben-eb/gulp-uncss https://github.com/addyosmani/critical

Загрузка css, которая не блокирует загрузку страницы

Забавный хак-костыль, вдруг когда-нибудь пригодится. Конечно, лучше сначала загрузить critical path css, а все остальные стили убрать в конец страницы (при этом загрузка css не будет мешать загрузке кода страницы), но вдруг пригодится:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="css.css"></noscript>

1 2	<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"> <noscript><link rel="stylesheet" href="css.css"></noscript>

http://keithclark.co.uk/articles/loading-css-without-blocking-render/

Chrome Dev Tools Filmstrip View

Что это Это дополнительная кнопка во вкладке «Сеть» в Google Chrome, которая показывает «раскадровку». Как включить Make sure you are on Chrome 44.0.2388.0+ Go to chrome://flags Find Enable Developer Tools experiments and enable it. Click the gear icon. Go to Experiments in the left hand sidebar. Press shift 6 times to reveal hidden features. Enable …

Советы по производительности 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.