Реактивность во Vue рефакторилась после версии 3.1 два раза
В результате, прирост скорости по некоторым направлениям очень значительный

#vue #performance #benchmark

Вышла вторая редакция проекта PLB (Programming Language Benchmark) по тестированию производительности решения типовых задач на различных языках программирования

В ней измеряется производительность кода для умножения матриц и решения задачи расстановки 15-ферзей, а также дополнительно оценивает поиск решений в игре Судоку и определение пересечений двух массивов.

Как видно, все языки программирования находятся примерно на одном уровне, за исключением Elixir, PHP, Perl, Python:CPython и Ruby.

Bun не показывает чудес по отношению к Node.js+JIT

В реальных задачах данная производительность обычно играет глубоко второстепенную роль после DX (удобства работы с языком), задержек в работе с UI, сетью, базой данных и прочих накладных расходов.

#benchmark

У каких фреймворков есть реактивный state management из коробки.

Внутри компонента, и за пределами компонентов.

#illustration #benchmark #state #react #solidjs #svelte #angular

Жесткий наезд на разработчиков GitLab

В этой статье проводился анализ тяжеловесности сайтов в плане JavaScript кода. В общем зачёте первое место заняли Slack с 55Мб (в несжатом виде), а также react.dev, который при скроле подгружается скриптами и был доведен до 100Мб. Для справки, дистрибутив всего Windows 95 занимал 50Мб.

В конце статьи в разделе "лендинги" похвалили сайт jquery.com, который использует всего 100Кб скриптов, и опустили сайт gitlab.com, который грузит 13Мб JavaScript-a для своего статичного лендинга, и по этому параметру занимает первое место в разделе.

Напомню, GitLab частично написан на Vue. На главной странице обнаруживается Nuxt.js.

Стыд и позор...

#jquery #gitlab #facepalm #benchmark #video

Кто выбирает OS для разработки, Linux в среднем на одном и том же железе чуть быстрей Windows, а Win 10 быстрей Win 11

#benchmark

Рейтинг фронтенд фреймворков по количеству набранных в 2023 году GitHub звезд

Забавно, что Vue 2 набрал не сильно меньше Vue 3. По общему числу звезд Vue 2 уже отстал от React.

Также интересно, что у Svelte и Vue примерно одинаковое количество звезд каждый месяц (что может коррелировать с вливанием новых разработчиков в фреймворк), но число реальных проектов в коммерческой сфере отличается на порядок (или порядки)

#rating #benchmark #framework

Proxy - объект, появившийся в JavaScript начиная с ES6, и позволяющий сделать над объектом "обертку" для перехвата операций get, set, defineProperty и некоторых других.

Именно он используется во Vue 3 Reactivity API для реализации Reactive (и Ref на объектах).

Однако за это приходится платить производительностью. Доступ к свойству объекта через Proxy примерно в 30 раз медленней, чем просто к свойству объекта.

let sum = 0

// 1. proxy access
const point = new Proxy({ x: 10, y: 20 }, { get: (t, k) => t[k] })
 
for (let i = 0; i < 100_000; i++) { sum += point.x }

// 2. direct access
const point = { x: 10, y: 20 }
 
for (let i = 0; i < 100_000; i++) { sum += point.x }

Это из-за того, что Proxy плохо поддаётся JIT оптимизации.

Разница в производительности простого объекта с Reactive будет еще больше.

Поэтому использовать ref/reactive на статичных данных или данных, которым не нужна реактивность (например, для хранения JWT токена в сторе) - не очень разумно.

#tip #performance #benchmark #proxy #reactive

Интересное исследование по производительности CSS в scoped областях в браузерах.

Vue использует HTML уникальные атрибуты для обозначения скоупа, Svelte - классы. В статье показаны результаты бенчмарков для различных вариантов скоупинга. Конкретно сравнение подходов разных фреймворков - в самом конце.

Выводы: Shadow DOM самый быстрый, подход Vue с data-v- атрибутом тоже вполне эффективен

#css #benchmark

К Дурову можно по-разному относиться, но людей, у которых руки растут не из жопы, он умеет находить

Chrome DevTools -> Memory -> Total JS heap size

#benchmark #telegram #nuxt

Web WhatsApp - 170MB
Slack - 125MB
VK.com - 120MB
Dzen.ru - 70MB
Nuxt.com - 40MB
Google Calendar - 40MB
Google.com (пустой) - 30MB
Web Telegram - 25MB
Vuejs.org, vue-faq.org - 5-10MB

Недавние тесты производительности Vapor

Чудес особых не будет - Vue и так быстр. Хотя на больших сложных компонентах преимущество может быть уже ощутимей.

Поэтому не пишите большие сложные компоненты. Разбиение помогает оптимизировать рендеринг.
Признак хорошего Vue.js кодинга №4.

#vapor #benchmark

Заспорил тут в Твиттере с создателем FormKit Justin Schroeder, который с чего-то призвал отказаться от использования ref в пользу reactive

На аргумент о ShallowRef он привел ShallowReactive, и стало интересно, как сильно они отличаются

В итоге получился вот такой бенчмарк на Stackblitz по замеру времени изменения разных массивов

ShallowRef не использует JavaScript Proxy, отсюда такая эффективность

С одной стороны, ужасно, как Proxy уронил общую производительность в JS

С другой, еще раз стало очевидно, что писать программы на Vue надо с умом. Необходимо полностью контролировать модель и потоки данных. Именно поэтому доверять таким библиотекам, как VueUse и Tanstack, это, как минимум, торговать производительностью и архитектурой.

#optimization #benchmark

Vue унизили...

Да еще и где - на LogRocket. Опять она только для маленьких проектов и не поддерживает TS

Правда, когда я запускал их варианты landing page, у меня Vue был на первом месте и локально в LightHouse, и на PageSpeed.

Ну и статичный лэндинг ничего не говорит о том, как все это будет быстро работать с динамическими данными.

#benchmark

Принес новогодние подарки

Cтатистика от w3techs.com. Они используют Chrome User Experience Report, так что данные достаточно объективные

По сравнению с прошлым годом - у Vue явная положительная динамика

А теперь смотрим на top 1000 (сайтов по посещаемости) и... закуриваем безникотиновую сигару

Элита интырнэта

#benchmark #vue #react #angular #stats

jsbenchmark.com - очень удобный сервис для проведения замеров производительности небольших кусков кода

#benchmark