Optimization vuex?

Hi all. Doing a component drag and drop. Works in tandem with vuex.

When the move event plugin pass the event to the drag(x, y)

Then do:
<element @drag="onDrag" />

the <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 is off.
To change the situation immediately, that is, when mouseUp is not suitable.

In damage fps is a bit small(52fps), if you close the debug works fine (60fps), but that way the elements 30 have such smooth not.

5e294c24c8d5c181094900.png
5e294bde3a907920521078.png

How to optimize?
April 4th 20 at 13:26
3 answers
April 4th 20 at 13:28
Solution
1. Changing the position of an element using absolute positioning, is slower than transform. Try to alter the left/top on transform: translate.
2. There is a magic css property will-change, try to connect it.
3. In the answers you have been advised to try to use the throttle, it's definitely worth making clearly about how it works and what is the difference with debounce — here
Can you explain the demo throttle/debounce? I like and have an idea about these words, and still misunderstood what was wanted to show the authors. What to do, what's going on on the charts? :) - delphine_Turcotte commented on April 4th 20 at 13:31
@delphine_Turcotte, the fact that both of these functions are the decorators — they take the input of some other function(say f), along with special parameters, and then return the modified function(say f2). Throttle and debounce to prevent unreasonably frequent calling f. For example, this is true in cases when we want to do something when the mouse is moved or when best personal Finance.

The demo shows an example with the movement of the mouse. Displayed 3 graphics, in the first case, in the event of a movement hung the function f. Long strokes appear when the function f is triggered. Hence the two charts below shows how throttle and debounce filter unnecessary calls to f. In the case of throttle can be seen that if without stopping to move the cursor, then the call happens consistently after a certain period of time(which was passed in parameters when calling the decorator).
In the case of debounce logic is different. After each call to f2 starts a timer that counts the time until the next call, if the call is not happening during the time period(which was passed in parameters when calling the decorator), then the call to f, when you call f2, the timer is reset. - frida_Lebsack commented on April 4th 20 at 13:34
@frida_Lebsack, I know the purpose of those features, I have a misunderstanding of the demos. Thank you. - delphine_Turcotte commented on April 4th 20 at 13:37
@Mason If the answer helped, mark the solution please :) - frida_Lebsack commented on April 4th 20 at 13:40
@frida_Lebsack, may have any ideas. If, nevertheless, the coordinates are stored locally in drag.vue and comicity only dragend event. Is it possible to monitor them and draw the minimap with local variables? - Mason commented on April 4th 20 at 13:43
@Mason, ie you about how to transfer the coordinates between the two components — drag and the mini-map without vuex? - frida_Lebsack commented on April 4th 20 at 13:46
@frida_Lebsack, Yes, only these components through a lot of levels between them. While the options are:
1. global $emit() to make
2. mixin with a global variable - Mason commented on April 4th 20 at 13:49
@Mason, if you're talking about this global $emit, I think he is not a bad decision in this case. - frida_Lebsack commented on April 4th 20 at 13:52
@frida_Lebsack, Yes, both of these solutions I don't like, but writing in vuex just do not want. - Mason commented on April 4th 20 at 13:55
April 4th 20 at 13:30
Why do you commitish every change @drag ?, all you need to wait for the dragEnd and already committing.
Optimization vuex? - Mason commented on April 4th 20 at 13:33
Vuex not designed for this (huge number of 'quick changes'), but the logic makes no sense, until the user moves the item to keep track of the coordinates in local variables, and it is possible to follow the logic that the elements are not beyond the boundaries of the unit, container, etc. But when he finished the action, or entered the boundary of the unit, you change the state and record the coordinates in Vuex. - alanis_Gre commented on April 4th 20 at 13:36
@alanis_Grewhy are not designed for quick changes ? It's essentially just a variable - Mason commented on April 4th 20 at 13:39
April 4th 20 at 13:32
To use throttle (from lodash or where else you like) in 5-10ms. The more — the less stress will be on the processor. In any case, you most likely don't need hundreds-thousands of events per second.
Tried to do so, but it seems even worse:

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}) })
}
- Mason commented on April 4th 20 at 13:35
Tried throttle

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


5e29530a12401671505987.png - Mason commented on April 4th 20 at 13:38
@Mason,
1. debaun works a bit differently than he is. It will "hold" function, while the action (i.e., drag) will not stop and will not do for N MS
2. And debounce and throtle need to specify a second argument, which you did not do - aurore commented on April 4th 20 at 13:41

Find more questions by tags JavaScriptVue.js