Does JavaScript affect website speed?

Question

JavaScript

For example, an element needs to be transformed. Is it better to use JavaScript or CSS for this. What are the cons and what are the pros?

Answer 1

Я немного опровергну то, что писали выше.
На самом деле самое затратное в анимации — это пересчет свойств и отрисовка. Я уверен вы часто попадали на сайт, который просто тормозит при скролле без всяких поползновений в JS. Стадия отработки JS редко превышает 1/10 от всего количества времени потраченного на подготовку кадра. Сам кадр готовится не каждые 1/60с, а когда прошлый кадр был подготовлен и отображен, если использовать requestAnimationFrame.
CSS анимация часто занимает больше времени на обсчет кадров, т.к. при использовании любой easing функции, заданной через точки на кривой Безье идет на много больше вычислений. Безье это функция (x, y) от t, а нам надо получить функцию x от y. Потому в CSS идет обсчет 8 точек кривой, а потом для каждой точки которую мы хотим получить, проводится аппроксимация. В JS же мы можем просто применить функцию x от y и сократить пачку обсчетов. Это практически незаметно при небольшом количестве элементов на странице, но при большом довольно таки чувствуется разница.
Другое дело, что грамотно написать всю анимацию на JS куда сложнее, чем просто пульнуть пару свойств на CSS.
В общем случае используйте CSS всегда, когда у вас нет кучи объектов и когда вам не сильно важен контроль над происходящим на странице.
Самый большой буст в производительности анимации вы можете получить не при смене CSS на JS, а при хорошем понимании того, что может вашу анимацию затормозить.

Answer 2

Влияет очень сильно.
Советую хорошо выучить анимацию на CSS3: здесь - отличный "быстрый" учебник.
Я бы сказал, что нужно делать так:
1. Установка параметров и события, отличающиеся от тех, что есть в CSS - используем JS
2. Прокрутка готового ролика для объекта - CSS
Т.е., весь по-кадровый просчёт - оставлять на CSS.

Answer 3

Что удобней, то и используйте. Все современные библиотеки для анимации оптимизированы, и по быстроте не особо отличаются от css. Тем более можно использовать современный стандарт web animations.
Тормозит, как правило, из-за обилия DOM-элементов, или из-за затратных свойств, как filter: blur, box-shadow, и прочее