• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

About half a year ago Bronley Plumb kindly made me aware of a memory leak in one in every of my open-supply packages. To see this memory leak in motion it was essential to open a browser and its dev instruments to execute some manual steps. On top of that, the memory needed to be inspected manually. It was an advanced process. Normally I just add a failing take a look at before I repair a bug. This time it was a bit more tricky. But ultimately I found a means to check the memory consumption automatically and right here is what I got here up with. If you are not involved within the adventurous path which led me to the answer be happy to skip right to the top to read on from there. What's a memory leak? Basically a memory leak is the scenario in which a software program holds on to a chunk of memory which it doesn't really want anymore. In JavaScript this almost definitely means that there's a reference to an object somewhere which you totally forgot about.

But for the garbage assortment it's inconceivable to distinguish between objects that are nonetheless in use and people that have simply been forgotten somewhere. Traditionally a memory leak was one thing that web developers did not need to care about. Every hyperlink on a web page precipitated a brand new web page to be loaded which in turn wiped the memory. But memory leaks are usually very shy and only develop into noticeable when a selected program retains running for cognitive enhancement tool a long time. With todays Single Web page Applications and Progressive Net Apps the situation has changed. Many web sites do behave like apps and are designed to run for a very long time and that is especially true for apps that use the online Audio API. The memory leak in question was present in standardized-audio-context which is a library to attain cross browser compatibility for that API. Probably the most simple instance of a memory leak that I could consider is attaching some metadata to an object.

For example you've gotten a couple of objects and also you need to store some metadata for every of them. However you don't wish to set a property on those objects because you want to keep the metadata in a separate place. This may be solved by using a Map as shown in the following snippet. It permits to retailer some metadata, to get it back and to delete it again. All that is needed is a Map which makes use of an object as the important thing to index its metadata. But what if an object with metadata just isn't referenced anywhere else anymore? It nonetheless can't be rubbish collected as a result of the Map still has a reference to it to index the metadata. The next instance is after all contrived but many memory leaks can be reduced to something so simple as this. All of the created objects do survive each garbage collection as a result of the Map still has a reference to them. This is the right use case for a WeakMap.

The references held by a WeakMap don't forestall any object from being rubbish collected. By changing the Map with a WeakMap this frequent trigger for Memory Wave a memory leak will be eradicated. The issue that precipitated the Memory Wave leak in my code was very comparable though it was not that obvious to spot. Puppeteer is a instrument which can be utilized to distant management Chrome or any other Chromium browser. It is a simpler different to Selenium and WebDriver but it has the downside that it only works with browsers based mostly on Chromium (for now). It comes with access to some APIs which aren't accessible by Selenium because it tries to work together with a web site like an actual user. Puppeteer on the other hand has access to many APIs which aren't accessible to regular users. This works by utilizing the Chrome DevTools Protocol. A kind of issues that Puppeteer can do which Selenium cannot is inspecting the memory. And this is of course tremendous helpful when trying to find memory leaks.

At first look there seems to be a perform within the API of Puppeteer which offers all that is needed to trace the memory utilization. It's the web page.metrics() methodology. It does amongst different issues additionally return a metric known as JSHeapUsedSize. That is the number of bytes that V8, the JavaScript engine utilized in Chrome, uses as memory. Unfortunately getting the scale of the memory is not sufficient. The memory of a JavaScript program is managed by a very autonomous garbage collection. Unlike the rubbish collection in the actual world which often reveals up on a very strict and well-known schedule the JavaScript rubbish assortment does its job whenever it thinks it's the appropriate time to do so. It may well usually not be triggered from within the JavaScript code. But it is critical to ensure it ran before inspecting the memory to make certain that all the trash has been picked up and the memory consumption has been computed primarily based on the most recent adjustments made by the code.