New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: Performance issue with large documents migrating from vue 2 to vue 3 #5031
Comments
Thanks for reporting! I tried to get a quick grasp via performance debugging in Chrome Dev Tools but seems like it even crashes my chrome instance on that. I just saw that the NodeViewRenderer takes a lot of time for each component - I don't have a Vue 2 setup now that I could easily test. Do you still have your code around that you could put into a sandbox real quick so I can do my tests on that to compare where and what increases the rendering time that much? |
Quick test (which I don't think is reliable) shows that each VueRenderer's constructor takes around 9 to 13ms which adds up real quick on 1500 elements. |
Hi @bdbch , Thank you for your reply ! For comparison, here is the same content with tiptap vue-2. I've inspected the vue-3 package and I think the performance problem comes partly from the `render() {
}` It appears that with each successive update to add a new node, all previously rendered nodes are rendered each time. I hope this will help you solve this bug. Thank you very much for your help! |
We are also using tiptap (vue2) in my company and we are starting the process of migrating to vue3. Thank you @Rirax for highlighting this performance issue ! @bdbch Any clues regarding the timeline of this fix ? 🙏 Thanks in advance for your work |
No timeline yet – @Rirax send in a PR which I'll check asap when I find time to see if it improves rendering performance and doesn't break anything – after that we'll see to release it in a new minor if everything is working fine. But can't give a time estimate rn. |
Hello everyone, |
Hello, tried to build tiptap with pr from @Rirax and to add it to our project that uses a lot of VueNodeViewRenderer components, unfortunately didn't work for us, the tab just crashes, though it worked almost flawless with vue2 :/ |
Yep, same here. Were using it on vue2 and got those issues with vue3. Tried to solve it by myself but no luck for now. Honestly still hope for an update. Thanks for the work again! |
Hi! Thanks @Rirax for writing about this problem. |
Hello, I also tried integrating Tiptap with the PR from @Rirax into our Vue 3 project and faced similar issues with the browser tab crashing, despite it working well with Vue 2 |
Hi @bdbch, it's been a month since this thread has been opened and it seems to be a critical issue for several tiptap users for transitioning from vue2 to vue3 Any news on the timeline ? Thanks in advance for your work |
I see many problems similar to mine, but I decided to share anyway. A couple of days ago we completed the migration of the project to Vue 3 and started getting tab crashes when there was a large amount of content Maybe there is some intermediate solution for us? Tried to make a build from pr above, but it did not fix the issue. |
Hi! I've also stumbled upon this issue, unfortunately, vue2 performance was much better, it's a major blocker for us also. Hope there is some kind of solution, thank you for all your hard work! |
Which packages did you experience the bug in?
@tiptap/vue-3
What Tiptap version are you using?
2.2.4
What’s the bug you are facing?
Hello everyone,
In my company, we're fervent Tiptap users, and Tiptap pro subscribers. Today we're experiencing a blocking performance issue with
tiptap/vue-3
.Since migrating from
tiptap/vue-2
totiptap/vue-3
, we've noticed a slowdown on documents with a large number of nodes that need to be rendered in Vue.A look at the thread on tiptap-vue3 implementation](#1166 (comment)) mentions the breaking changes between vue-2 and vue-3, and the use of Teleport to add elements to the DOM, which may explain this drop in performance.
To demonstrate the bug, you need content with at least 1500 nodes.
The loading time increases quadratically with the number of nodes.
The repository below reproduces the bug 👇
What browser are you using?
Chrome
Code example
https://codesandbox.io/p/devbox/tiptap-vue-3-vuenodeviewrenderer-mg4dp8?file=%2Fsrc%2FApp.vue%3A16%2C1
What did you expect to happen?
We are a knowledge management software company, and our applications are particularly dependent on tiptap for the user experience.
We are in the process of migrating our stack from Vue 2 to Vue 3 and as a result are looking to adopt tiptap/vue-3.
The current performance issue is blocking our migration to Vue3.
Anything to add? (optional)
Let us know if we can be of any help to reproduce this bug or contribute a fix to it.
Did you update your dependencies?
Are you sponsoring us?
The text was updated successfully, but these errors were encountered: