Open jasperf opened 2 years ago
I guess _manager.blade.php
loads a load of v-touch
events. We have:
<ul class="__files-boxs" ref="filesList">
<li v-for="(file, index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortName, sortDirection)"
:key="file.name"
:data-file-index="index"
@click.stop="setSelected(file, index, $event)">
<v-touch class="__file-box mm-animated"
:class="{'bulk-selected': IsInBulkList(file), 'selected' : isSelected(file)}"
@swipeup="swipGesture($event, file, index)"
@swipedown="swipGesture($event, file, index)"
@swiperight="swipGesture($event, file, index)"
@swipeleft="swipGesture($event, file, index)"
@hold="pressGesture($event, file, index)"
@dbltap="pressGesture($event, file, index)">
in resources/views/vendor/MediaManager/_manager.blade.php
could be 6 calls per media item and if I have 55 that would be 330 calls and then there are two sidebar calls:
<v-touch v-if="infoSidebar"
class="__stack-sidebar is-hidden-touch"
@swiperight="toggleInfoSidebar(), saveUserPref()"
@swipeleft="toggleInfoSidebar(), saveUserPref()">
and then we have the button
<div class="control" v-if="!isBulkSelecting()">
<v-touch class="button is-primary"
ref="refresh"
:disabled="isLoading"
tag="button"
v-tippy="{arrow: true}"
title="(R) efresh"
@tap="refresh()"
@hold="clearAll()">
with another two calls. So that is 2x55 calls = 110 calls .
Then there is the files box with another 5 swipe calls so another 275
Then I am about half way to 1605 beforeUpdate and
updateRender` calls. And not counting them all. The calls grow depending on your interactions or times you load or select items.
Should these then not be loaded just once as events? Like with v-once
perhaps? Or only send out events after when an item is really selected or edited?
And then there is the questions still.. why would these events be fired when I use a screen that does not support swipe events?
u can use most of the touch gestures with the mouse/mice, thats why its registerd on normal pcs as well.
i wanted to add a replacment for it along ago but i dont have time to rewrtie it, if u can help with it plz do.
@ctf0 I did not know that the touch gestures were used by the mouse as well on the desktop. Thanks for letting me know that. Learned something here.
The repository https://github.com/bsdfzzzy/vue2-hammer is a relatively more recent VueJS Hammer wrapper, but it is also three years old. It is however not in beta but supposedly stable and updated three years ago compared to the beta https://github.com/vuejs/vue-touch/tree/next updated 4 years ago. But all rather poor choices I'm afraid.
So I guess we can keep what we have and or fork. If forked we can at least work on it when need be and make it a stable version. Just wonder why Linus Borg stopped working on it. He is an excellent Vue developer and must have had his reasons..
Update
There is also Vue Touch Events for Vue 2. Last update three months ago. It uses the same directive v-touch
. May need to change event names and such though..
End Update
What I was also wondering about is the many calls / events when I load the images for a project inside the media manager. I was wondering if we could limit beforeUpdate
, updateRender
calls for VTouch
or the vue-touch
component. I for example had 2283/49
so 22843 beforeUpdate
/ updateRender
calls vs 49 create
calls in one Vue Performance test:
There are 44 images and I see 49 create
calls. Perhaps some more for other elements that are loaded with vue-touch
. Then mounting takes the most time - 5459 ms - and for beforeUpdate
and updateRender
less is needed. There just are many calls for those and I wonder why. I also wonder why the mounting takes so much time on my box.
I also see the event save-image-dimensions
quite a lot on opening the media manager, loading images and just clicking on one for selection.
perhaps called by:
// get images dimensions
EventHub.listen('save-image-dimensions', (obj) => {
if (!this.checkForDimensions(obj.url)) {
this.dimensions.push(obj)
}
})
or
sendDimensionsToParent() {
const manager = this
let url = this.src
this.$refs.img.addEventListener('load', function() {
manager.applyStyles = true
manager.$el.style.border = 'none'
if (!manager.checkForDimensions(url)) {
EventHub.fire('save-image-dimensions', {
url: url,
val: `${this.naturalWidth} x ${this.naturalHeight}`
})
}
})
}
So I guess it is to call the image dimensions for some of the 44 images in our case... images I click on?
Then mounting takes the most time - 5459 ms
to get around that we either remove the whole thing, or use a better wrapper "already under the enhancements ticket".
So I guess it is to call the image dimensions for some of the 44 images in our case... images I click on?
yes
Yeah, the package I mentioned https://github.com/jerrybendy/vue-touch-events is perhaps one we could use instead of current one. But not sure if that is better performance wise. Just better maintained it is.
Was also thinking about better loading of the images and icons.. using v-for
indexing or caching of some kind. We however already have:
{{-- files --}}
<ul class="__files-boxs" ref="filesList">
<li v-for="(file, index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortName, sortDirection)"
:key="file.name"
:data-file-index="index"
@click.stop="setSelected(file, index, $event)">
for loading so not sure what else we could do to improve the display of images. Perhaps preloading thumbs at fixed dimensions....
Other thing I was thinking about it not loading the media manager with the application main app.js
but only on activating the modal we load the media manager in. That would speed up the initial load and modal with media manager is only needed later on anyways. Just was having issues doing that getting issue with recursive components
as a warning loading the manager.js
and modal.vue
separatately, so no luck yet.
Still a lot to learn so is going to take more time.
Isn't
vue-touch
, wrapper for Hammer..js touch gestures no longer maintained and beta still? See https://github.com/vuejs/vue-touch/tree/next Should it not get a replacement?It is loaded in our
resources/assets/vendor/MediaManager/js/manager.js
:The component
VTouch
also seems to be the cause of lots of requests on my desktop or laptop. You would think they would not be used there as the screens are not touch screen...? See DevTools Vue Performance results:If this is mainly for Hammer JS touch gestures why the loads of
beforeUpdate
updateRender
andupdated
calls? Any ideas how I can reduce these or avoid them?