{"id":23045281,"url":"https://github.com/phacks/gatsby-memory-leak-repro","last_synced_at":"2025-04-03T01:45:07.825Z","repository":{"id":42010540,"uuid":"193237192","full_name":"phacks/gatsby-memory-leak-repro","owner":"phacks","description":"Repro repo for GatsbyJS issue #14525","archived":false,"fork":false,"pushed_at":"2023-01-04T00:51:32.000Z","size":5356,"stargazers_count":1,"open_issues_count":29,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-01T23:53:09.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phacks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-22T13:30:46.000Z","updated_at":"2023-01-31T17:22:08.000Z","dependencies_parsed_at":"2023-02-01T16:16:52.504Z","dependency_job_id":null,"html_url":"https://github.com/phacks/gatsby-memory-leak-repro","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phacks%2Fgatsby-memory-leak-repro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phacks%2Fgatsby-memory-leak-repro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phacks%2Fgatsby-memory-leak-repro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phacks%2Fgatsby-memory-leak-repro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phacks","download_url":"https://codeload.github.com/phacks/gatsby-memory-leak-repro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922232,"owners_count":20855343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T21:19:27.084Z","updated_at":"2025-04-03T01:45:07.708Z","avatar_url":"https://github.com/phacks.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Steps to repro [gatsbyjs#14525](https://github.com/gatsbyjs/gatsby/issues/14525)\n\n## To see the memory leak in action\n\n1. Clone the repo: `git clone git@github.com:phacks/gatsby-memory-leak-repro.git`\n2. Install deps: `yarn` or `npm install`\n3. Launch the development server: `gatsby develop`\n4. Open Google Chrome on `localhost:8000`, open the Chrome Dev Tools, the “Memory” tab, and take a snapshot\n5. Click on any of the ten links in the page, then take another snapshot\n6. Filter on objects containing “detached”\n\nHere’s what one should see:\n\n_Before clicking on a link_:\n![image](https://user-images.githubusercontent.com/2587348/59964627-5da44d00-9503-11e9-8db4-2acc3a72f0b4.png)\n\n_After clicking on a link_:\n![image](https://user-images.githubusercontent.com/2587348/59964640-790f5800-9503-11e9-8c84-bc16774ef506.png)\n\nI 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.\n\nWe can see that following the page transition, 9 `DetachedHTMLAnchorElement`, alongside many others, appear in the “detached” query.\n\n7. 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”\n8. 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:\n\n![Jun-24-2019 20-06-36](https://user-images.githubusercontent.com/2587348/60041515-e82fac80-96bb-11e9-8aba-e819843715fb.gif)\n\n_Note: the superfluous DOM Nodes eventually get Garbage Collected. One can force this operation in the Memory tab of the Dev Tools._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphacks%2Fgatsby-memory-leak-repro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphacks%2Fgatsby-memory-leak-repro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphacks%2Fgatsby-memory-leak-repro/lists"}