/gatsby-memory-leak-repro

Repro repo for GatsbyJS issue #14525

Primary LanguageCSSMIT LicenseMIT

Steps to repro gatsbyjs#14525

To see the memory leak in action

  1. Clone the repo: git clone git@github.com:phacks/gatsby-memory-leak-repro.git
  2. Install deps: yarn or npm install
  3. Launch the development server: gatsby develop
  4. Open Google Chrome on localhost:8000, open the Chrome Dev Tools, the “Memory” tab, and take a snapshot
  5. Click on any of the ten links in the page, then take another snapshot
  6. Filter on objects containing “detached”

Here’s what one should see:

Before clicking on a link: image

After clicking on a link: image

I searched for detached DOM Nodes following a personal hint of where the leak should be visible. Some other artifact of the leak may be visible elsewhere.

We can see that following the page transition, 9 DetachedHTMLAnchorElement, alongside many others, appear in the “detached” query.

  1. To see another potential visualisation of the leak, click on the “three dots menu” on the upper-right hand of the dev tools, then “More Tools”, then “Performance Monitor”
  2. Click the links to go back and forth between the two pages, and you can see the DOM Nodes counter (and JS heap size) increasing:

Jun-24-2019 20-06-36

Note: the superfluous DOM Nodes eventually get Garbage Collected. One can force this operation in the Memory tab of the Dev Tools.