Email:
Mobile:
YouTube

Мне пришла в голову идея сравнить производительность Vue.JS и jQuery, как библиотек, позволяющих добавлять интерактивности на сайт, а именно при каком-то действии что-то изменять на странице.

Тест был произведен для анимаций. Результаты теста:

Все! я перехожу на Vue.

На самом деле, я выбрал оптимальные, на мой взгляд, параметры для тестирования, а именно взял процессороёмкий фильтр CSS {filter: blur(15px)} + opacity. Тесты удивили меня, как начинающего изучать Vue. Приблизительно, разница в производительности почти в 3 раза (на глаз). Загрузка GPU – ~одинаковая.

Тест VueJS vs jQuery

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

HTML+скрипт+стили для теста VUE

HTML+скрипт+стили для теста jQuery

Как можно заметить, оба скрипта подгружают во все h1 текст 'Transition me', всего анимируемых элементов – 100 штук. По нажатию на кнопку 'Нажми меня', происходит очень простая анимация. Меняется размытие при помощи CSS фильтра и прозрачность элементов. Так как с jQuery я уже знаком давно, то скорее всего, мой код не такой уж и плохой, а также я по-моему сделал его максимально оптимизированным в плане производительности для вычислений.

Код Vue был взят из уроков на YouTube.

Тест VueJS vs jQuery

Файлы Тест VueJS vs jQuery:

Скачать Тестовая страница Vue
DEMO
Скачать Тестовая страница jQuery
DEMO

Задать вопрос

Отзывов пока нет