Отзывчивый UI без блокировки Event Loop

Отзывчивый UI без блокировки Event Loop

rdner

Денис Речкунов
Ведущий JavaScript-разработчик

Что такое производительность JavaScript?

Что такое производительность UI?

Почему приложение может подвисать?

Почему Event Loop блокируется?

Блокирующий код

			function sort(arr) {
				var tmp = null;
				for(var i = 0; i < arr.length; i++)
					for(var j = 0; j < arr.length - 1; j++)
						if(arr[j] > arr[j+1]) {
							tmp = arr[j];
							arr[j] = arr[j+1];
							arr[j+1] = tmp;
						}
			}

В чем же он блокирующий?

Неблокирующая версия

			function sortStep(arr, i, j, callback) {
				if(arr[j] > arr[j + 1]) {
					var tmp = arr[j];
					var[j] = arr[j + 1];
					arr[j + 1] = tmp;
				}
				if (++j === arr.length - 1) {
					i++; j = 0;
				}
				if (i === arr.length) {
					callback();
					return;
				}
				setTimeout(sortStep.bind(this, arr, i, j, callback));
			}

Неблокирующая версия

			function sort(arr, callback) {
				if (arr.length < 2) {
					callback();
					return;
				}
				sortStep(arr, 0, 0, callback);
			}

Демо

Преимущества неблокирующего кода

Недостатки неблокирующего кода

Полезные ссылки

Денис Речкунов, Flamp