I am unable to share this project’s code, but I’m looking for some help interpreting performance graphs. I have a large Vue SPA (vue-router, vuex) that I’ve been working on for over 2 years now (made many performance improvements over time), but I’m a bit stuck on this one.
This is a simple page in the app, let’s call it screen A:
Screen A itself isn’t too slow, but moving from screen A to 2 other screens, (let’s call them screens B and C) isn’t as snappy as it should be.
Screen A to B - decently fast
Screen A to C - pretty slow (C is more complex)
So using Chrome’s performance tools and Vue’s performance tools I began to try and debug what was happening. I noticed that
$destroy() were taking the longest when moving from screen A to screens B/C. What surprised me though was that the time spent in these functions changed based on what screen I was going to
Screen A to B
Screen A to C
I was careful to make sure the testing environment was consistent for both transitions. I already have
keep-alive implemented to cache the parent component based on the route, but the
$destroy() calls are impacting the nested components (the 3 rows in my first screenshot), if I enabled a 4th row you see a 4th
teardown() call in this row:
So I guess my main question is - why does what screen I’m rendering next affect the speed of destroying screen A’s children components? It makes sense why going from screen A to C takes longer, but intuitively I’d expect to see that reflected in this part of the performance graph, not in the destroy/teardown part:
Am I completely reading this performance graph incorrectly?