Front end memory monitoring – using performance tools

Time:2021-10-20

catalogue

  • Why should memory management be monitored??
  • Performance tool usage process
  • Memory problem

    • Phenomenon and essence of memory problems
    • Criteria for defining memory problems
  • Several ways to monitor memory

    • Browser Task Manager
    • Timeline sequence diagram record
    • Heap snapshot lookup separates DOM (memory leak can be observed)

      • How many states does DOM exist?
      • example
      • How to deal with separating DOM?
    • Determine whether there is frequent garbage collection (different tools are required)

      • Why judge?
      • How to use monitoring to judge?

This is about usingPerformanceTools to monitor memory and garbage collection, if memory management, garbage collection andGCIf you don’t understand, please refer to the articleJavaScript — memory management and garbage collection, let’s get to the point

Why should memory management be monitored?

GCThe purpose is to realize the virtuous circle of memory space, and the cornerstone of the virtuous circle isRational use of memory space。 becauseHTMLNo memory operations are provided inAPITherefore, we can always pay attention to memory changes to determine whether it is reasonablePerformanceThis tool locates the problem,PerformanceThe tool provides a variety of monitoring methods, which can monitor the memory at any time.

Performance tool usage process

  1. Open the browser and enter the target web address. Use hereChrome
  2. Enter the developer tools panel and select performancePerformance
  3. Turn on the recording function to access the specific interface
  4. Execute user behavior and stop recording after a period of time
  5. Obtain the report and analyze the memory information recorded in the interface

Front end memory monitoring - using performance tools

In the screenshot below, you can see the memoryMemoryThe broken line chart of the option shows the memory situation. Rising and falling is the normal operation:

Front end memory monitoring - using performance tools

Memory problem

Phenomenon and essence of memory problems

Limit the normal condition of current network problems:

Emerging phenomena Existing problems
The page has delayed loading or frequent pauses Memory problem, andGCFrequent garbage collection operations are related. There must be memory explosion in the code
Poor performance of page persistence There is memory expansion. In order to achieve the best use speed, the current interface will apply for a certain memory space, which exceeds the upper limit
Page performance gets worse over time Concomitant memory leak

Criteria for defining memory problems

  • Memory leak: memory usage continues to rise
  • Memory expansion: in order to achieve the best effect, the current application needs a certain memory space, which may be related to the lack of hardware support of the current device itself, so there is a performance difference. It is necessary to judge whether it is the problem of the program or the problem of the device. More tests are needed. There are performance problems on most devices, indicating that there is a problem with the program itself.
  • Frequent garbage collection: analysis through memory change diagram

Several ways to monitor memory

Browser Task Manager

The change of memory during the execution of the program is presented in the form of numerical value

In the browser – >shift+Esc->Right click to select【JavaScriptMemory used]

Front end memory monitoring - using performance tools

  • The memory in the first column is native memory【DOMThe memory occupied by the node increases, indicating that a new node is createdDOMNode.
  • Last columnJavaScriptMemory is heap memory, which is the memory used by all reachable objects in the interface. This data increase indicates that either new objects are being created or objects are growing.

The following is an example:

<!-- Create a large array -- >
<body>
  <button id="add">Add</button>
  <script>
    const add = document.getElementById('add')
    add.onclick = function() {
      let arrList = new Array(1000000)
    }
  </script>
</body>

Front end memory monitoring - using performance tools

Front end memory monitoring - using performance tools

Click the button to know that the memory will increase because we have created a large array. After the script, you can take this to monitor.

Timeline sequence diagram record

The above method can only say that there is a problem with our memory, but it can not more accurately locate when it happened, which is related to those codes. We can passTimelineThe sequence diagram directly presents the trend of the current application in the form of time points.

The following is an example:

<body>
  <button id="btn">Add</button>
  <script>
    const arrList = []
    function test() {
      for( let i = 0 ; i < 100000; i++) {
        document.body.appendChild(document.createElement('p'))
      }
      arrList.push(new Array(1000000).join('x'))
    }

    document.getElementById('btn').addEventListener('click',test)
  </script>
</body>

Enter the page and openperformanceTo record, click the button three times to stop recording.

Front end memory monitoring - using performance tools

You can see that the memory is normal, rising and falling, and the place where it falls isGCI’m working. If there is no place to fall, there is a problem.

Heap snapshot lookup separates DOM (memory leak can be observed)

Heap snapshot is very targeted to find out whether there are some separated objects in the current interface objectDOM, separationDOMThe existence of is a memory leak.
So find out firstWhat is detached DOM? How many states does DOM exist?

How many states does DOM exist?

  • Interface elements live inDOMon the tree
  • When garbage objectsDOMNode——DOMfromDOMFrom the tree,jsThere are no references.
  • Separated stateDOMNode——DOMfromDOMFrom the tree,jsThere are references in it. They can’t be seen on the interface. They exist in memory.

example

Let’s take a look at the following example. The following example is createdulandli, it is not presented in the page, but there are references in the code. These are separationDOM

<!---->
<body>
  <button id="btn">Add</button>
  <script>
    var tmpEle

    function fn() {
      var ul = document.createElement('ul')
      for (var i = 0; i < 10; i++) {
        var li = document.createElement('li')
        ul.appendChild(li)
      }
      tmpEle = ul
    }

    document.getElementById('btn').addEventListener('click',fn)
  </script>
</body>

Open browser – >Memory -> Profiles -> Heap snapshot -> Take snapshot

Front end memory monitoring - using performance tools

clickAddButton – >Take snapshot->You can see moreulLabels andliLabel, this is separationDOM

Front end memory monitoring - using performance tools

How to deal with separating DOM?

FunctiontemEleSet asnullthat will do

var tmpEle
function fn() {
  var ul = document.createElement('ul')
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li')
    ul.appendChild(li)
  }
  tmpEle = ul
  tmpEle = null
}

At this time, the heap snapshot is separatedDOMNot anymore.

Determine whether there is frequent garbage collection (different tools are required)

Why judge?

becauseGCWhen working, the application is stopped if the currentGCIt’s right to work frequently and for too longWebThe application is very unfriendly, which will lead to the application pretending to be dead and saying I am in a state. Users will perceive that the application is stuck in use.

How to use monitoring to judge?

  1. adoptTimeline sequence diagramJudge and monitor the memory trend in the current performance panel. If it rises and falls frequently, there will be frequent garbage collection. At this time, locate the code to see what caused this situation during execution.
  2. useBrowser Task ManagerIt will be simpler. In the task manager, there are mainly numerical changes. The frequent instantaneous increase and decrease of data is also frequent garbage collection.