floating-vue icon indicating copy to clipboard operation
floating-vue copied to clipboard

Performance fix: prevent unnecessary re-rendering

Open rustjson opened this issue 3 years ago • 1 comments
trafficstars

We are having an issue with unnecessary re-rendering for every user input on our tiptap rich-text-editor.

The typing is super laggy and unresponsive when there are many tooltips on the same page. Because ALL tooltips are re-rendered on every update/keypress.

I have a tests page: Performance, which contains one rich-text-editor and 1000 tooltips, simply

change this line https://github.com/Akryum/floating-vue/compare/vue2...rustjson:floating-vue:vue2?diff=split#diff-57103f054b23f6ac8c4a70f7b1ac4d9219b5c2693a75a05903b3967f9d57c6aaR132

to the old version: update: bind to reproduce the problem

Some additional information from vue2's document:

https://v2.vuejs.org/v2/guide/custom-directive.html#Hook-Functions

update: called after the containing component’s VNode has updated, but possibly before its children have updated. The directive’s value may or may not have changed, but you can skip unnecessary updates by comparing the binding’s current and old values (see below on hook arguments).

rustjson avatar Jul 13 '22 14:07 rustjson

@Akryum Could you please take a look and follow up on this? We are kinda depending on this now.

Thank you so much!

rustjson avatar Jul 15 '22 08:07 rustjson