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

Question

[andrei_pro]

Всем привет. Делаю компонент перетаскивания. Работает в паре с 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 уже такой плавности нет.




Как можно оптимизировать?

Comments

[Athanor]

Сложно сказать из представленного кода, что можно оптимизировать, т.к. не известно, как вы потом с x и y работаете. Если скинете пример, может и получится дать конкретные рекомендации

[andrei_pro]

Примерно так:

Container.vue

<template>
  <element v-for="element in elements" :element="element" :key="element.id" />
</template>

<script>
 export default {
   computed: {
      elements() {
        return this.$store.state.project[this.$store.state.projectId].elements
     }
   }
 }
</script>

Element.vue

<template>
 <drag @drag="onDrag" :x="element.x" :y="element.y"><div>{{ element.id }} </div></drag>
</template>

[Aetae]

По хорошему, с передвижением надо работать прямо на месте, ничего никуда не записывая и не вызывая, "виртуально" - т.е. чисто на экране, а уже по завершению производить запись.

[Athanor]

andrei_pro, Так до конца и не понятно, что у вас происходит при перетаскивании элемента —
1. его x и y зачем-то записываются vuex — зачем?
2. На что влияют эти координаты? Они привязаны к каким-то другим элементам? если так, то каким образом они на них влияют? через какие css свойства?

[andrei_pro]

Aetae, в идеале да, но есть такие компоненты как миникарта и превью в которых при движении элементов на container.vue должны везде перетаскиваться - окна все сразу на странице

[andrei_pro]

Athanor,

1. В vuex так как другие компоненты на странице зависят от расположения элементов, то есть нужно сразу менять
2.
Drag.vue

export default {
 render(createElement) {
   return createElement(
                'div',
                {
                    style: {
                        position: 'absolute',
                        left: `${this.x}px`,
                        top: `${this.y}px`,
                        width: `${this.w}px`,
                        height: `${this.h}px`,
                    },
                    on: {
                        mousedown: this.onMouseDown,
                    },
                },
                this.$slots.default
            )
 },
 methods: {
  onMouseDown(e) {
    // set start cords

    addEvent(document.documentElement, 'mousemove', this.onMouseMove)
   },
  onMouseMove(e) {
   const x = //
   const y = //
   this.$emit('drag', x, y)
  } 
 }
}

Answer 1

[Athanor]

1. Изменение положения элемента через абсолютное позиционирование работает медленней чем через transform. Попробуйте переделать left/top на transform: translate.
2. Есть в css волшебное свойство will-change, попробуйте подключить его.
3. Вам в ответах уже советовали попробовать использовать throttle, это точно стоит сделать, наглядно о том, как это работает и в чем разница с debounce — тут

Comments

[dom1n1k]

Можете объяснить демку throttle/debounce? Я вот вроде бы и имею представление об этих словах, а всё равно недопонимаю, что хотели показать авторы. Что нужно делать, что вообще происходит на графиках? :)

[Athanor]

dom1n1k, дело в том, что обе эти функции являются декораторами — они принимают на вход какую-то другую функцию(допустим f), вместе с специальными параметрами, после чего возвращают уже измененную функцию(допустим f2). Throttle и debounce предотвращают неоправданно частый вызов f. Например, это актуально в случаях, когда мы хотим что-то делать при перемещении мыши или при скролле.

На демке показан пример именно с перемещением мыши. Отображены 3 графика, в первом случае, на событие перемещения навешана функция f. Длинные штрихи появляются когда функция f срабатывает. Следовательно на двух графиках ниже видно, как throttle и debounce фильтруют ненужные вызовы f. В случае с throttle видно, что если без остановки двигать курсор, то вызов стабильно происходит через определенный период времени(который был передан в параметрах при вызове декоратора).
В случае с debounce логика совсем другая. После каждого вызова f2 запускается таймер, который считает время до следующего вызова, если вызова не происходит за период времени(который был передан в параметрах при вызове декоратора), то происходит вызов f, при вызове f2 таймер сбрасывается.

[dom1n1k]

Athanor, я знаю назначение этих функций, у меня возникло недопонимание именно самой демки. Спасибо.

[Athanor]

andrei_pro Если ответ помог, отметьте решением, пожалуйста :)

[andrei_pro]

Athanor, может есть какие идеи. Если все-таки координаты хранить локально в drag.vue, а комитить только dragend событие. Можно ли как-то отследить их изменение и рисовать миникарту с локальных переменных?

[Athanor]

andrei_pro, т.е. вы про то, как передать координаты между двумя компонентами — таскаемым и мини-картой без vuex?

[andrei_pro]

Athanor, да, только эти компоненты через много уровней между собой. Пока варианты такие:
1. глобальный $emit() сделать
2. миксин с глобальной переменной

[Athanor]

andrei_pro, если вы про этот глобальный $emit, то мне он кажется не плохим решением в данном случае.

[andrei_pro]

Athanor, да, оба эти решения мне не нравятся, но и писать в vuex сразу не хочется.

Answer 2

[Alex Pospeliri]

А зачем ты коммитишь каждое изменение @drag ?, все что тебе нужно дождаться dragEnd и уже его коммитить.

Comments

[andrei_pro]

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

[Alex Pospeliri]

Vuex не предназначен для этого (огромное число 'быстрых изменений'), но и в самой логике нет смысла, пока пользователь двигает элемент, нужно отслеживать координаты в локальных переменных, и возможно следить за логикой, чтобы элемент не вышел за границы блока, контейнера и.т.д. А вот когда он закончил действие, или вошел в границу блока, ты меняешь состояние и записываешь координаты во Vuex.

[andrei_pro]

Alex Pospeliri, почему не предназначен для быстрых изменений ? Это же по сути просто переменная

Answer 3

[Roman K]

Использовать throttle (из lodash или откуда ещё угодно) в 5-10мс. Чем больше — тем меньше нагрузки будет на процессор. В любом случае, тебе скорее всего не нужны сотни-тысячи ивентов в секунду.

Comments

[andrei_pro]

Пробовал сделать так, но вроде еще хуже:

function debounce(callback, ms = 500) {
    let timer = null;

    return function (...args) {
        const onComplete = () => {
            callback.apply(this, args)
            timer = null
        }

        if (timer) {
            clearTimeout(timer)
        }

        timer = setTimeout(onComplete, ms)
    }
}

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

[andrei_pro]

Попробовал throttle

throttle(() => {
    commit('moveElement', {element, x, y})
})

[Roman K]

andrei_pro,
1. дебаунс работает немного не так, как тротл. Он будет "удерживать" функцию, пока действия (то есть, драг) не прекратятся и их не будет поступать в течении N мс
2. И у дебаунса, и у тротла нужно указывать время вторым аргументом, чего ты не сделал