CSS vs JS — Какой код работает быстрее?

Question

[Дмитрий Пуценко]

У меня имеется сайт - bit.ly/1qdNJJs
Работает на HTML\CSS без JS
Есть смысл писать слайдеры\меню и т.п на JS? Eсли можно на CSS!
Объясните дурочку :)

Answer 1

[ClaraOswald]

зависит от того будишь ли ты писать на нативном js ли ипользовать что. К примеру есть такая вещь как velocity js, он работает куда быстрее и плавнее нежели анимация jquery или css и нагрузка на fps куда меньше. На хабре даже была статья сейчас попробую найти

Comments

[Nikolay Talanov]

Нет. В этих вещах нет никакой магии. В велосити, как в любой нормальной либе для анимации, под капотом юзается requestAnimationFrame, а не setInterval как в старом jQuery (в 3 версии jQ уже тоже rAF будет). Жс анимация у ксс по производительности выигрывать не может. Но жс анимация лучше для сложных вещей, потому-что это не декларативка + имеется возможность анимации множества свойств трансформов одновременно с разными изингами и длительностями, за счет динамического переумножения матриц, в то время как в css все ограничено на одной перемноженной матрице в свойстве transform. Велосити вообще лучше забудьте, юзать надо GSAP.

[Ihor Gevorkyan]

Nikolay Talanov,
скажи, пожалуйста, где можно почитать / посмотреть про "матрицы", о которых ты написал? или объясни, если получится, в двух словах.

1. Просто не понятно, почему именно "матрица", это как-то связано с одноименной структурой данных?

2. Например, я правильно понимаю, что ты имел в виду, что через js есть возможность запускать сразу несколько keyframes (если грубо говорить), в то время, как сss - только последовательное выполнение?

[maxonlinux]

Ihor Gevorkyan, воскрешаю тему трехлетней давности, если ответ еще не найден. Матрица - функция matrix() в css, можно почитать на сайте Mozilla Developer: https://developer.mozilla.org/en-US/docs/Web/CSS/t... . Большего не скажу, потому что не пользуюсь.

Answer 2

[dom1n1k]

Слайдеры всё-таки лучше на JS - намного удобнее, гибче и управляемее.
Плюс много готовых библиотек (которые под капотом могут частично использовать CSS-анимации).
Если использовать в меру, с производительностью будет всё нормально.

Answer 3

[Владимир Грабко]

https://habrahabr.ru/post/229071/

Answer 4

[novrm]

Если сайт для себя - пиши как нравится.
Если под заказ - используй для динамики js, а для статики css. Иначе заказчик может предъявить претензии об поддерживаемости сайта.

Comments

[Дмитрий Пуценко]

А об это я и не подумал... спасибо!

Answer 5

[Максим Тимофеев]

Учитывая что css работает у всех, а js иногда отключают. Думаю разумно делать так:
все что можно писать на css, остальное на js, хотя откровенно говоря считаю тех кто отключают js в браузере - олигофренами, а они не являются целевой аудиторией большинства сайтов.

Comments

[TheBububo]

CSS работает у всех, но слайдер на css или анимации не у всех будут работать. Анимировать svg path не может даже ie11, не говоря уже о ie9

[Максим Тимофеев]

TheBububo: Естественно.

Answer 6

[Nikolay Talanov]

Если речь идет о столь примитивном сайте, то без разницы.