@andrei_pro

Оптимизация vuex?

Всем привет. Делаю компонент перетаскивания. Работает в паре с vuex.

При событии move плагин передает событие drag(x, y)

Затем делаю:
<element @drag="onDrag" />

<script>
onDrag(x, y) {
 this.$store.dispatch('dragElement', {element: this.element, x, y})
}
</script>


Vuex:
const actions = {
  dragElement({commit, state}, {element, x, y}) {
    commit('moveElement', {element, x, y})
}

const mutations = {
  moveElement(state, {element, x, y}) {
    element.x = x
    element.y = y
  }
}


strict mode выключен.
Менять положение нужно сразу, то есть при mouseUp не подходит.

В дабаге фпс маловат(52fps), если закрыть дебаг работает хорошо (60fps), но при этак элементах 30 уже такой плавности нет.

5e294c24c8d5c181094900.png
5e294bde3a907920521078.png

Как можно оптимизировать?
  • Вопрос задан
  • 277 просмотров
Решения вопроса 1
Athanor
@Athanor
Лайк + Решение: не жмись, нажми
1. Изменение положения элемента через абсолютное позиционирование работает медленней чем через transform. Попробуйте переделать left/top на transform: translate.
2. Есть в css волшебное свойство will-change, попробуйте подключить его.
3. Вам в ответах уже советовали попробовать использовать throttle, это точно стоит сделать, наглядно о том, как это работает и в чем разница с debounce — тут
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
apospeliri
@apospeliri
А зачем ты коммитишь каждое изменение @drag ?, все что тебе нужно дождаться dragEnd и уже его коммитить.
Ответ написан
@deliro
Использовать throttle (из lodash или откуда ещё угодно) в 5-10мс. Чем больше — тем меньше нагрузки будет на процессор. В любом случае, тебе скорее всего не нужны сотни-тысячи ивентов в секунду.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект