面试题-知识深度

wythhhhh

已于 2024-03-13 12:28:18 修改

阅读量861

点赞数 24

分类专栏：面试文章标签：面试

于 2024-02-21 16:45:26 首次发布

本文链接：https://blog.csdn.net/wythhhhh/article/details/134404135

版权

本文探讨了JavaScript的内存泄漏检测方法，包括使用Chrome DevTools的Performance和Memory工具。介绍了常见的内存泄漏场景，如全局变量、事件和定时器引用。此外，文章还比较了for循环与forEach遍历的速度，讨论了Vue的生命周期及其对DOM操作的影响，以及Vue2和Vue3的Diff算法差异。同时，还涵盖了浏览器和Node.js的事件循环区别、多进程与线程的概念以及它们在JavaScript中的应用。

摘要由CSDN通过智能技术生成

文章目录

如何检测js内存泄漏？js内存泄漏场景有哪些

内存泄漏
可使用 Chrome devTools 的 Performance和Memory 工具来检测js 内存

heap锯齿状是是没有内存泄漏
heap曲线上升是存在内存泄漏

内存泄漏场景（以vue为例）

被全局变量、函数引用，组件销毁时未清除
被全局事件、定时器引用，组件销毁时未清除
被自定义事件引用，组件销毁时未清除

解决方法

// 事件监听器及时销毁
mounted() {
   
  window.addEventListener('scroll', this.handleScroll) 
} 
beforeDestroy() {
   
  window.removeEventListener('scroll', this.handleScroll)
}

// 定时器及时销毁clearTimeout，clearInterval
mounted() {
   
  this.timer = setInterval(this.handleTimer, 1000)
}
beforeDestroy() {
   
  clearInterval(this.timer)
}

// EventBus 的事件解绑
mounted () {
   
 this.$EventBus.$on('handleScroll', res => this.func(res))
},
destroyed () {
   
 this.$EventBus.$off('handleScroll')
}

// 弱引用
const wMap = new weakMap()
function fn() {
   
  const obj = {
    x: 100 } // 会销毁
  wMap.set('a', obj ) // weakMap的key只能是引用类型
}
fn()

GC垃圾回收

普通函数执行完后，定义的变量会被回收，
但在闭包中的数据是不会被回收，还有被外面window引用的不会。
闭包不算内存泄漏，非预期的情况才算，闭包里的数据没被销毁是在预期内的情况

test() {
   
    function fn1() {
   
      const a = 'aa'
      console.log(a)

      const obj = {
    x:</

最低0.47元/天解锁文章