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

#vue #performance #benchmark

Пару слов об эффективности и качестве некоторых очень популярных библиотек и кода на их основе.

Tanstack - собрание универсальных пакетов и утилит, Суммарно более 70K GitHub звезд, 1000+ контрибьютеров.

Пакет vurtual, 4.8K звезд, предназначен для реализации бесконечного скрола

Файл examples/vue/infinite-scroll/src/App.vue, строка 108

Получение последнего элемента массива virtualRows:

watchEffect(() => {
  const [lastItem] = [...virtualRows.value].reverse()

  if (!lastItem) {
    return
  }
  // ...
});

Этот файл не сама библиотека, а образец ее использования в пользовательском коде, но, тем не менее, хороший показатель уровня.

#performance #tanstack

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

Красивые симуляции на JavaScript с целью изучения его возможностей по производительности

Статья

#js #performance

Мэйнтенер Volar Джонсон со своим помощником последние недели носятся с alien-signals - своей реализацией Signals в JS

Уверяют, что она самая быстрая, и пытаются встроить ее везде где могут - в системы стейт менеджмента для Solid.js, Dart, Lua. Движение unjs выходит за рамки js.

Пока наталкиваются на "непонимание".

Также хотят встроить ее во Vue. Эван, вроде, одобряет.

Но по поводу увеличения скорости на проценты хотелось бы спросить Эвана - зачем же он тогда перешел на js Proxy в своей системе реактивности и ухудшил производительность в десятки и сотни раз, если скорость так важна?

#vuejs #performance #reactivity

Если у вас есть массив, в каждом элементе которого есть computed, то лучше создать один на весь массив, чем много для каждого элемента

// Bad
const rows = productRows.map(row => ({
  ...row,
  total: computed(() => row.price * row.qty),
}));

// Good
const computedRows = computed(() => 
  productRows.map(row => ({
    ...row,
    total: row.price * row.qty,
  }))
);

#tip #performance #reactivity