preface

The interviewer asks:How can I quickly troubleshoot memory leaks?

Trust me, the tone is set right from the start. Whether an interviewer asks a dead question or a flat one depends on a seemingly simple answer that requires a lot of information.

1. Explain the memory leak

Memory leak explanation: the heap memory that has been dynamically allocated in the program is not released or cannot be released for some reason.

Interviewer: So what’s the reason for not being released?

• According to the JS garbage collection mechanism, memory is reclaimed only when the number of references in memory reaches zero
• Objects in the global execution context are not released until they are marked no longer in use

Memory leak scenarios

• Too many global variables.Usually, the variable is undefined or references global variables arbitrarily

// main.js
/ / scenario 1
function a(){
    b=10;
}
a();
b++;

/ / scenario 2
setTimeout(() = >{
    console.log(b)
},1000)

Copy the code

• closure. Memory references left behind by required packages are not resolved manually.Defining closures eliminates the side effects of closures.

function closuer (){
    const b = 0;
    return (c) = > b + c
}

const render = closuer();

render();
render = null; // Set it to null manually and the GC will clear it

Copy the code

• Event listening was not removed

function addEvent (){
 const node =  document.getElementById('warp');
    node.addEventListener('touchmove'.() = >{
        console.log('In Move'); })}const onTouchEnd = (){
   const node =  document.getElementById('warp');
   node.
}

useEffect(() = >() = >{
     const node =  document.getElementById('warp');
     node.removeEventListener('touchmove');
}) // React life cycle function: componentWillUnmount
render(<div id='warp' onTouchEnd={onTouchEnd}>
 // code...
</div>)
Copy the code

• The cache. No matter what the cache is, you need to set the expiration time.

Interviewer: Can you tell me how you troubleshoot memory leaks?

Analysis of a wave: here, answer to the point. But is that really the end of the interviewer’s question? Clearly not. When the interviewer asks you how to identify a problem, he or she is asking you again how you identified the problem.

That is, a memory leak can cause pages to stall or even crash. I believe that when you use the APP development package or development package test problems, you must have encountered the whole APP flash back, because in the process of debugging the real machine will inevitably meet the memory is not enough.

So, here’s the problem. Memory leaks can cause pages to stagnate or crash. Is the page stagnate caused by memory leaks? So what the interviewer really wants to ask is, how did you discover that a page might have a memory leak, and how did you diagnose the problem as a memory leak?

As I mentioned in other articles, front-end performance optimization starts with establishing some performance metrics, but isn’t memory leakage a formal performance metric? Isn’t that the point of defining metrics to capture the data and report it to the performance platform?

Establishment of performance indicators related to memory leaks

• The number of new properties added to the Window object
  • Before loading the pageObject.kyes(window)
  • Before leaving the page (route redirecting, page closing, background APP closing, etc.)Object.kyes(window)
• Special functions, such as whether the function variable that generated the closure is reassigned to null. So is the closure you wrote cleaned up? In other words,

function closuer(){
    const a = 0;
    return (b) = > a + b
}
API.addClosuer(closuer);
const result = closuer();
API.addClosuer(result);
result = null;
closuer = null;

// Record when the page leaves and whether the closure being listened on is released.
const list = API.getClosuer(); // 被监听的闭包函数集合，最好的结果就是 {closuer:null,result: null,...}API. Report (API. GetClosuer ());Copy the code

This way, your performance platform will be able to see the data reported this time, and the page will know exactly when the closure was generated and when the closure was cleared.

• The number of times an event is emitted and the time it takes to process the event.

  • If the main js thread is blocked, the event firing of the current scene must be delayed or wait indefinitely. Here withperformance.now
  • performance.now()Method to return the current page fromperformance.timing.navigationStartThe number of microseconds between the current time,Its accuracy is reachableA millionth of a second.
  • performance.now()Approximately equalDate.now(), but the former returns milliseconds, while the latter returns microseconds, which are 1,000 times more accurate.

• Whether the number of PAGE DOM elements is abnormal.

  • Depth-first traversal to obtain the depth of the DOM tree. You can set the maximum threshold for DOM tree depth for different scenes and pages. Exceeding the maximum threshold, the platform will alert. This means that the page is dynamically adding a DOM.

  • FPS, with significant long band instability.

  • Number of redraws.

Performance SDK design

See article money, is one of the most hard bottom (performance SDK design ideas)