Skip to content

Conversation

basvanmeurs
Copy link
Contributor

In some cases (such as the Vugel renderer), action needs to be taken immediately after a patch. nextTick could be used. But the danger is that application callbacks could be scheduled before it. queuePostFlushCb allows us to implement a more 'integrated' and less error-prone mechanism.

Our use case
In the case of Vugel, we use Vue3 with the custom renderer api to render on tree2d nodes. Three2d uses a render tree with children stored in arrays rather than linked list (HTML DOM). This causes O(n*n) complexity when adding new elements to a v-for. It leads to bad performance in some cases, when using a lot of items in a v-for. This is caused by the facts that vue iterates all items from the start, and when inserting new items one by one at the start of the array it will have to be copied over and over. We had a (very heavy, 10'000 item) case where an update took 1 second.

After our fix it went down to 60ms. We deferred the synchronisation between Vugel and tree2d until after all child operations (per parent node) have been done. One problem we had is that we can't tell which operation (appendChild, insertBefore, removeChild, clearChildren) operation is the final one. So we wait until a new parent is encountered (vue patches the list items until traversing into the children).

This allows us to sync all nodes properly except for the last encountered one. Because we have no way of telling when the complete patch was done. For this reason, we sync the last encountered parent using nextTick(). https://github.com/Planning-nl/vugel/blob/master/src/runtime/nodes/Base.ts#L132

But the danger is that application callbacks could be scheduled before it. queuePostFlushCb allows us to implement a more 'integrated' and less error-prone mechanism.

basvanmeurs and others added 2 commits April 29, 2020 11:51
In some cases (such as the Vugel renderer), action needs to be taken immediately after a patch. nextTick could be used but application callbacks could be scheduled before it. queuePostFlushCb allows us to implement a more 'integrated' and less error-prone mechanism.
@yyx990803 yyx990803 merged commit ba240eb into vuejs:master Apr 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants