Mechanically Detect Memory Leaks With Puppeteer
(Die Seite wurde neu angelegt: „<br>About half a yr ago Bronley Plumb kindly made me aware of a memory leak in one of my open-source packages. To see this memory leak in motion it was essenti…“) |
K |
||
| Zeile 1: | Zeile 1: | ||
| − | <br>About half a yr ago Bronley Plumb kindly made me | + | <br>About half a yr ago Bronley Plumb kindly made me conscious of a memory leak in one among my open-supply packages. To see this memory leak in action it was essential to open a browser and its dev instruments to execute some guide steps. On top of that, the memory needed to be inspected manually. It was an advanced process. Normally I just add a failing test before I repair a bug. This time it was a bit extra tricky. But in the long run I discovered a way to test the memory consumption routinely and here is what I got here up with. If you aren't interested in the [https://www.accountingweb.co.uk/search?search_api_views_fulltext=adventurous%20path adventurous path] which led me to the answer be at liberty to skip proper to the end to learn on from there. What's a memory leak? In general a memory leak is the state of affairs during which a software holds on to a piece of memory which it does not really want anymore. In JavaScript this most definitely means that there's a reference to an object somewhere which you totally forgot about.<br><br><br><br>But for [https://git-test.zcy.dev/carina57637790 MemoryWave Official] the garbage collection it's impossible to differentiate between objects which are nonetheless in use and people that have simply been forgotten someplace. Historically a memory leak was something that net builders did not need to care about. Each link on a page caused a new page to be loaded which in flip wiped the memory. However memory leaks are usually very shy and solely develop into noticeable when a specific program retains operating for a very long time. With todays Single Web page Purposes and Progressive Internet Apps the situation has changed. Many websites do behave like apps and are [https://www.reddit.com/r/howto/search?q=designed designed] to run for a very long time and that is particularly true for apps that use the net Audio API. The memory leak in question was found in standardized-audio-context which is a library to achieve cross browser compatibility for that API. Probably the most easy example of a memory leak that I could consider is attaching some metadata to an object.<br> <br><br><br>For instance you've gotten a few objects and you wish to retailer some metadata for [https://www.hanyunmedical.com/lanoramelbourn Memory Wave] each of them. However you don't wish to set a property on those objects because you need to maintain the metadata in a separate place. This can be solved through the use of a Map as proven in the next snippet. It allows to retailer some metadata, to get it again and to delete it again. All that is needed is a Map which makes use of an object as the key to index its metadata. But what if an object with metadata just isn't referenced anywhere else anymore? It nonetheless cannot be rubbish collected because the Map nonetheless has a reference to it to index the metadata. The next instance is in fact contrived however many memory leaks could be reduced to one thing as simple as this. All the created objects do survive every garbage collection as a result of the Map still has a reference to them. This is the proper use case for a WeakMap.<br><br><br><br>The references held by a WeakMap don't prevent any object from being rubbish collected. By replacing the Map with a WeakMap this widespread cause for a memory leak might be eliminated. The issue that precipitated the memory leak in my code was very related though it was not that obvious to spot. Puppeteer is a software which can be used to remote management Chrome or some other Chromium browser. It's a simpler various to Selenium and WebDriver nevertheless it has the draw back that it only works with browsers based on Chromium (for now). It comes with access to some APIs which aren't accessible by Selenium as a result of it tries to work together with an internet site like a real user. Puppeteer then again has entry to many APIs which aren't accessible to normal users. This works by using the Chrome DevTools Protocol. A type of things that Puppeteer can do which Selenium cannot is inspecting the memory. And that is after all super useful when looking for memory leaks.<br><br><br><br>At first look there appears to be a perform within the API of Puppeteer which offers all that is required to track the memory usage. It is the web page.metrics() technique. It does among different things additionally return a metric called JSHeapUsedSize. This is the variety of bytes that V8, the JavaScript engine used in Chrome, uses as memory. Sadly getting the size of the memory will not be sufficient. The memory of a JavaScript program is managed by a very autonomous garbage assortment. Not like the garbage collection in the true world which usually exhibits up on a very strict and well known schedule the JavaScript garbage assortment does its job each time it thinks it's the fitting time to do so. It can usually not be triggered from inside the JavaScript code. But it is critical to make sure it ran before inspecting the memory to be sure that all the trash has been picked up and the memory consumption has been computed based mostly on the most recent changes made by the code.<br> |
Aktuelle Version vom 14. August 2025, 12:33 Uhr
About half a yr ago Bronley Plumb kindly made me conscious of a memory leak in one among my open-supply packages. To see this memory leak in action it was essential to open a browser and its dev instruments to execute some guide steps. On top of that, the memory needed to be inspected manually. It was an advanced process. Normally I just add a failing test before I repair a bug. This time it was a bit extra tricky. But in the long run I discovered a way to test the memory consumption routinely and here is what I got here up with. If you aren't interested in the adventurous path which led me to the answer be at liberty to skip proper to the end to learn on from there. What's a memory leak? In general a memory leak is the state of affairs during which a software holds on to a piece of memory which it does not really want anymore. In JavaScript this most definitely means that there's a reference to an object somewhere which you totally forgot about.
But for MemoryWave Official the garbage collection it's impossible to differentiate between objects which are nonetheless in use and people that have simply been forgotten someplace. Historically a memory leak was something that net builders did not need to care about. Each link on a page caused a new page to be loaded which in flip wiped the memory. However memory leaks are usually very shy and solely develop into noticeable when a specific program retains operating for a very long time. With todays Single Web page Purposes and Progressive Internet Apps the situation has changed. Many websites do behave like apps and are designed to run for a very long time and that is particularly true for apps that use the net Audio API. The memory leak in question was found in standardized-audio-context which is a library to achieve cross browser compatibility for that API. Probably the most easy example of a memory leak that I could consider is attaching some metadata to an object.
For instance you've gotten a few objects and you wish to retailer some metadata for Memory Wave each of them. However you don't wish to set a property on those objects because you need to maintain the metadata in a separate place. This can be solved through the use of a Map as proven in the next snippet. It allows to retailer some metadata, to get it again and to delete it again. All that is needed is a Map which makes use of an object as the key to index its metadata. But what if an object with metadata just isn't referenced anywhere else anymore? It nonetheless cannot be rubbish collected because the Map nonetheless has a reference to it to index the metadata. The next instance is in fact contrived however many memory leaks could be reduced to one thing as simple as this. All the created objects do survive every garbage collection as a result of the Map still has a reference to them. This is the proper use case for a WeakMap.
The references held by a WeakMap don't prevent any object from being rubbish collected. By replacing the Map with a WeakMap this widespread cause for a memory leak might be eliminated. The issue that precipitated the memory leak in my code was very related though it was not that obvious to spot. Puppeteer is a software which can be used to remote management Chrome or some other Chromium browser. It's a simpler various to Selenium and WebDriver nevertheless it has the draw back that it only works with browsers based on Chromium (for now). It comes with access to some APIs which aren't accessible by Selenium as a result of it tries to work together with an internet site like a real user. Puppeteer then again has entry to many APIs which aren't accessible to normal users. This works by using the Chrome DevTools Protocol. A type of things that Puppeteer can do which Selenium cannot is inspecting the memory. And that is after all super useful when looking for memory leaks.
At first look there appears to be a perform within the API of Puppeteer which offers all that is required to track the memory usage. It is the web page.metrics() technique. It does among different things additionally return a metric called JSHeapUsedSize. This is the variety of bytes that V8, the JavaScript engine used in Chrome, uses as memory. Sadly getting the size of the memory will not be sufficient. The memory of a JavaScript program is managed by a very autonomous garbage assortment. Not like the garbage collection in the true world which usually exhibits up on a very strict and well known schedule the JavaScript garbage assortment does its job each time it thinks it's the fitting time to do so. It can usually not be triggered from inside the JavaScript code. But it is critical to make sure it ran before inspecting the memory to be sure that all the trash has been picked up and the memory consumption has been computed based mostly on the most recent changes made by the code.