Базоввые советы по оптимизации

Прежде всего, оптимизируйте только то, что работает не так быстро как хотелось бы. Преждевременная оптимизация ни кому не нужна.

Кешируйте

Например, вызов querySelectorAll в цикле — очень плохая идея. Кешируйте всё что только можно, особенно в циклах.

Не меняйте DOM

Изменение DOM — одно из самых узких мест веба. Избегайте частых изменений, особенно в циклах.

Упрощайте колбеки событий

Не вставляйте большую логику в колбеки событий, таких как touchmove или onscroll. Возможно лучшим вариантом будет сохранение значения в переменную, а логику реализовать через requestAnimationFrame.

let x;

element.addEventListener('touchmove', (e) => {
    x = e.changedTouches[0].pageX;
}

function loop () {
    requestAnimationFrame(loop);
    element.style.left = x + 'px';
}

Никогда не меняйте DOM в событиях, которые вызываются очень часто.

requestAnimationFrame || setInterval

Многие рекомендуют использовать requestAnimationFrame вместо setInterval, и в большинстве случаев это правильно. Но не всегда, так что сравнивайте!

Давайте браузеру "отдыхать"

Прежде чем поменять DOM или стили, дайте браузеру время (100–300 ms):

setTimeout(function () {
    // Do something with DOM
}, 100);