vuejs / vuejs/devtools

Extreme slowdown on page loading, potential memory leak?

Open
#909 3 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

need reproduction
Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

I've been noticing extreme slowdown on page load with the devtools activated.

(I use the 7.7.7 version on Firefox, but it does the same thing on Chrome)

When I load the page, it works for 1-2 seconds, then it freezes for about 30-40s (I even get a warning if I want to stop the script), and after that it works again! I get this at each page load.

If I disable the extension, it works without any issue.

Here's a performance profiling with the extension activated. As you can see, the CPU is at 100% for a very good amount of time. Also, the memory has this sawtooth shape, which led me to believe it might be some kind of memory leak. The callstack indicates that the "traverse" function is called a lot of times.

Image

For comparison, here's a performance profiling with the extension disabled.

Image

I admit, I don't know how to reproduce easily, my project is fairly big and not open source... I don't expect you guys to be able to solve this without much input, I just want to warn you about this potential issue, maybe it rings a bell.

EDIT: It might have to do with iframe? This bug happens only on the page where I have one, and when I disable it, it's a bit quicker.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the slowdown with the devtools extension enabled on a page containing an iframe, then compare profiling results with the extension disabled. Inspect the profiled "traverse" call path and use the reported CPU and memory behavior to narrow the regression; done means page loads no longer freeze for 30–40 seconds.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.