Вычисляется ли математика в CSS быстрее, чем математика в JS?

Question

Например, если я хочу обновить значение CSS со скоростью 60 кадров в секунду, будет ли быстрее сделать что-то вроде setCSS(i * 10 + 'px') в JS или что-то вроде в css property: calc(10px * var(--i))?

Answer 1

Это сильно зависит от вашего дерева DOM и разметки, а не от JS против CSS.Если ваш элемент, который вы планируете изменить, имеет дочерние элементы, стоимость изменений будет высокой.

Если вы измените свойство «layout», чтобы оно изменяло геометрию элемента, например его ширину, высоту или положение слева или сверху, браузер должен будет проверить все остальныеэлементы и «переформатировать» страницу.Любые затронутые области нужно будет перекрасить, а окончательно закрашенные элементы нужно будет снова объединить.

Дополнительные сведения о рендеринге веб-страниц можно найти на https://developers.google.com/web/fundamentals/performance/rendering/

Есть также информация и некоторые тесты о css cals с переменными vs js https://lisilinhart.info/posts/css-variables-performance/

Answer 2

Я не думаю, что скорость - это проблема, которую вы бы использовали, чтобы определить, какую использовать.Любой клиент, который поддерживает calc(), будет быстрым, и он будет зависеть от того, насколько быстро.

Причиной выбора одного из них является не скорость, а гибкость и ваш вариант использования.calc() ограничивает вас жестко запрограммированными значениями, что идеально подходит для некоторых случаев, в то время как JavaScript позволяет ссылаться на значения.Конечно, переменные CSS появляются, но они еще не здесь, и даже когда они здесь, благодаря полной мощи языка JS и полного API DOM весит очень много.