Popover mount performance

[mrherickz]

I'm using v-tooltip@2.0.3 in an application and I was wondering why the performance was getting bad, after some time of investigation I've discovered that v-popover was causing UI to freeze when mounting.

In the app we have a list of messages and each message has a popover.

For this test I have removed all the other components and we let only the popover there for each message (look at the cpu usage and general slowness):

With v-popover: https://gyazo.com/8fd88d0c00502ce2502933459476fde8
Without v-popover: https://gyazo.com/551289b183ce594d7db3e997b2e7ff1a

I have already tried to add a v-if for the popover's content but no luck.
Is there something we can do for fixing it's performance?

Thanks in advance.

[agazso]

I also have a performance problem when tooltips are added to list items iterated with v-for. It only happens on Chrome, Firefox works well. It seems it doesn't matter what is the content of the popover, it's enough if the items has the v-popover property.

@MrHerickS is this the same situation for you?

[mrherickz]

I also have a performance problem when tooltips are added to list items iterated with v-for. It only happens on Chrome, Firefox works well. It seems it doesn't matter what is the content of the popover, it's enough if the items has the v-popover property.

@MrHerickS is this the same situation for you?

Yeah it's happening only in chrome for me, but I managed to temporarily fix it by creating a new component (fork from Popover.vue) and removing the ResizeObserver from it.

[agazso]

For that isn't it enough to pass the handleResize property set to false?

[mrherickz]

For that isn't it enough to pass the handleResize property set to false?

I have not tried it, but it might work as well. Thanks for the complementation.

[Zagrebelin]

I have a page with a 893 popovers. There is a render time in chromium:

Rendering with :handleResize="false"- 1.5s
Rendering with :handleResize="true"- 6.2s
Removing v-popover at all - 0.44s

[voskresla]

@agazso @MrHerickS thx a lot, i have custom virtual-scroll component and tooltip in every table row. My case was not about performance at all, but broken listener firing on scroll event. Thanks again!

[sagarrabadiya]

@voskresla which component do you use for virtual scroll in table form?

[voskresla]

@sagarrabadiya my own custom component.

[sagarrabadiya]

@voskresla would you please share it for reference like codesandbox or something?

[laurensiusadi]

I'm also having some performance issue. I'm thinking the culprit might be events emitted on mounted: hide, update:open, and dispose. That's 3 emits per instance times how many popover on the page.

[laurensiusadi]

I think this discussion is an issue. For the reasons I and others stated above.
This component bogs down mounted, when changing route, each popover instance emit adds delay.