Destroy performance in Chromium browsers on macOS (w. potential solution)

Version

2.7.8

Reproduction link

codesandbox.io/s/spqkdn

Steps to reproduce

We’ve recently noticed a performance problem in our Vue 2 application when destroying 100+ item components in our grid, it can take a significant amount of time (30+ seconds). Each of our item components contains a lot of child components that all use a number of computed properties which is the root cause of this issue, as looking into how the destroy process works, it needs to clean all of them up. After doing some further digging we discovered this issue is ONLY occurring on Chromium browsers on macOS (tested on Chrome and Edge). Other browsers do not see this destroy delay.

Further performance digging has found the root cause to be the Array.prototype.splice() in the remove function used by Vue in the destroy process.

In the name of looking for an easy win, simply switching the logic in the remove function to use Array.protoype.pop() instead fixes the issue.

Of course, this approach would only work if the order of the arrays passed into the remove function did NOT matter. Looking at the source code I can see there’s a number of files that make use of this remove function in the util file, and I don’t know the codebase well enough to understand the ramifications of this particular approach.

Could be we might need to create an alternative remove function that can be called by callers who don’t care about the order of their arrays (assuming some do care about the order)?

Hoping some people can chime in on this, thanks! 🙂

Note the attached minimal reproduction is a very simplified version of the issue.

What is expected?

Destroy should happen without any major delays.

What is actually happening?

Destroy takes 30+ seconds.