“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

External manifestation of memory problems

  • Delayed loading or frequent pauses on the page (normal network environment)

    Task: How to observe using Performance?

  • The page continues to have poor performance

    Memory bloat: a page that has requested a large amount of memory to run smoothly exceeds its current load

  • Page performance deteriorates as time goes by. Overflow of memory. When the memory leaks start and are not stacked, there is more space in the memory, and the user does not experience significant lag

Monitor the memory

There are three common memory problems:

  • A memory leak
  • Memory ballooning
  • Frequent garbage collection

Criteria for defining memory problems

  • Memory leak: Memory usage continues to rise
  • Memory bloat: Performance issues on most devices
  • Frequent garbage collection: Analyzed by memory variation graph

Several ways to monitor memory

  • Browser task manager
  • Timeline Records the Timeline diagram
  • Heap snapshot looks for detached DOM
  • Determine if there is frequent garbage collection

Browser task manager

Let’s start by creating an HTML file to test the browser’s performance

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title> Task manager monitors memory changes </title> </head> <body> <button ID =" BTN ">ADD</button> <script type="text/javascript"> const btn = document.getElementById("btn"); btn.onclick = function() { let arr = new Array(100000); } </script> </body> </html>Copy the code

Then open the HTML file and use the Shift+Esc button shortcut to bring up the Browser task Manager

Right-click any of them -> SelectMemory used by JavaScript So how do we look at memory usage?

First we find that there are two bits of memory:

  • Memory footprint -> The memory occupied by DOM nodes. If the memory continues to increase, it means that DOM nodes are constantly being added
  • Memory used by JavaScript: The memory used by all reachable objects. If the value is increasing, it means that we are adding new objects, or the value of reachable objects is increasing

Ok with that in mind we started testing:Click on the Add button

We will see a significant increase in memory usage, and indeed memory usage is being monitored.

Timeline Records the Timeline diagram

Test cases as usual

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title> Task manager monitors memory changes </title> </head> <body> <button ID =" BTN ">ADD</button> <script type="text/javascript"> const arrList = [] function test() { for(let i = 0; i< 100000; i++){ document.body.appendChild(document.createElement('p')) } arrList.push(new Array(100000).join('x')) } const btn = document.getElementById("btn"); btn.addEventListener('click', test) </script> </body> </html>Copy the code

After punching in the screen, enter the Console-Performance panelAfter we finished recording, we clicked onMemoryMemory panel

The panels are in order:

  • Js heap
  • The document
  • node
  • The listener
  • GPU

Now let’s compare our graph: first of all, our browser execution has been flat for a long time, how many ups and downs are our event trigger + garbage collection situation

Heap snapshot looks for detached DOM

The old rule is to start with the test cases

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title> Task manager monitors memory changes </title> </head> <body> <button ID =" BTN ">ADD</button> <script type="text/javascript"> var tempEle function test() { var ul = document.createElement('ul') for(var i = 0; i < 10; i++) { var li = document.createElement('li') ul.appendChild(li) } tempEle = ul } const btn = document.getElementById("btn"); btn.addEventListener('click', test) </script> </body> </html>Copy the code

Determine if there is frequent garbage collection

  • Frequent ups and downs in TimeLine
  • Frequent data increases and decreases in task manager