慕课1299前端面试题-知识广度和深度day06

知识深度面试题

- 我的博客需要缩宽页面观看，图片无法均放，很抱歉。

1. JS内存泄漏如何检测？场景有哪些？

• JavaScript内存泄漏是指在不需要使用某个变量或对象的时候，它仍然存在于内存中，从而导致内存占用过高的问题。检测JavaScript内存泄漏可以使用以下方法：

1. 内存快照：使用Chrome浏览器的开发者工具或Node.js的heapdump模块，生成内存快照并分析其内容，找出哪些对象占据了过多的内存空间。

2. 资源监控：使用浏览器的Performance API或Node.js的process.memoryUsage()方法，监控应用程序的内存使用情况，以及资源加载和释放情况。

3. 代码审查：通过静态或动态代码分析，检测是否存在明显的内存泄漏风险，例如未关闭文件、未清理定时器或事件监听器等。

4. 内存剖析工具：使用专业的内存剖析工具如Memory Analyzer Tool（MAT）、Chrome DevTools中的Heap Profiler等，帮助开发人员找到内存泄漏的根本原因。

具体检测方法怎么使用，直接问chatgpt，它回答很全面

常见的JavaScript内存泄漏场景包括：

1. 定时器未清除：在使用setInterval或setTimeout方法创建定时器时，如果未及时清除，会导致回调函数一直占用内存。例如：

var timer = setInterval(function() {
   
  // do something
}, 1000);

// 及时清除定时器
clearInterval(timer);

在使用定时器之后，一定要记得及时清除。

2. 闭包未释放：如果闭包中引用了外部的变量，并且该闭包不再需要使用时，外部变量仍然会被保留在内存中不释放。例如：

function init() {
   
  var name = 'John';

  return function() {
   
    console.log(name);
  };
}

// 访问闭包函数并返回一个新的函数
var sayHello = init();

// 执行完毕闭包函数之后，手动解除对name变量的引用
sayHello = null;

在使用闭包时，一定要确保不再需要引用外部变量时，解除闭包对该变量的引用。

3. 循环引用：当两个对象相互引用，并且没有及时解除引用关系时，会导致两个对象都无法被垃圾回收，造成内存泄漏。例如：

var obj1 = {
   };
var obj2 = {
   };

obj1.obj2 = obj2;
obj2.obj1 = obj1;

// 手动解除obj1对obj2的引用
obj1.obj2 = null;

避免循环引用的最佳方法是避免相互引用。如果无法避免，可以通过手动解除其中一个对象对另一个对象的引用来解决问题。

4. DOM节点未移除：在动态生成DOM节点时，如果未及时从文档树中移除节点，会导致节点一直占据内存，无法被垃圾回收。例如：

var container = document.getElementById('container');

// 在循环中动态生成DOM节点
for (var i = 0; i < 1000; i++) {
   
  var node = document.createElement('div');
  container.appendChild(node);
} // 如果不及时从文档树中移除这些节点，会导致内存泄漏

// 在不需要节点时，手动从文档树中移除它们
while (container.firstChild) {
   
  container.removeChild(container.firstChild);
}

在生成DOM节点时，一定要及时从文档树中移除节点。

5. 大对象未释放：当程序中创建了大对象时（例如大数组），如果这些对象不再需要使用，但是仍然被保留在内存中，就会导致内存泄漏。例如：

var data = [];

// 创建1亿个随机数加入data数组
for (var i = 0; i < 100000000; i++) {
   
  data.push(Math.random());
}

// 不再需要data数组时，手动将其置为null
data = null;

当不再需要大对象时，可以手动将它们置为null，以便让垃圾回收器及时回收它们的内存。

2. vue当中常见内存泄漏，及解决方法