前端内存泄露问题

    科技2022-07-10  137

    内存泄露问题是各种应用程序都会存在和需要解决的,web页面一般不会像客户端那样长时间运行,很多内存泄露问题不容易被重视。

    前端一般在可视化方向的页面需要长时间运行,内存泄露影响很大。

    区别与c语言,很多像java,js等语言都有自动垃圾回收机制,有一定的内存管理,但是我们还是需要编程中注意避免内存泄露。

    内存分配与回收

    JavaScript 的内存模型,其主要也是由堆、栈、队列三方面组成:

    其中队列指的是消息队列、栈就是函数执行栈。

    而主要的用户创建的对象就存放在堆中,这也是我们内存分析与内存泄漏定位所需要关注的主要的区域。

    JavaScript 中开发者并不需要手动地为对象申请内存,只需要声明变量,JavaScript Runtime 即可以自动地分配内存。

    某个对象的内存生命周期分为了内存分配、内存使用与内存回收这三个步骤,当某个对象不再被需要时,它就应该被清除回收。

    大部分的垃圾回收器是根据引用(Reference)来判断某个对象是否存活,所谓的引用即是某个对象是否依赖于其他对象,如果存在依赖关系即存在引用;譬如某个 JavaScript 对象引用了它的原型对象。

    最简单的垃圾回收算法即是引用计数(Reference Counting),即清除所有零引用的对象。

    不过这种算法往往受制于循环引用问题,即两个无用的对象相互引用。

    const obj1 = {} const obj2 = {} obj1.val = obj2 obj2.val = obj1

    现在广泛使用的算法是标记是否可达,即是沿着引用树向下遍历,标记所有可达的对象为可用,并且清除其他未被标记的对象。

    全局变量

    一旦某个变量被挂载到了 window 对象,就意味着它永远是可达的。严格模式可以避免此问题。

    定时器与闭包

    定时器保有对某变量的引用,如果我们不手动清除定时器话,那么该变量也就会一直可达,不被回收。闭包也是常见的可能导致内存泄漏的元凶之一。

    DOM 引用与监听器 有时候我们可能会将 DOM 元素存放到数据结构中,这也就导致了每个 DOM 元素存在了两个引用,仅仅删除这个dom没用,它还好存在于内存中。

    现代浏览器移除dom时会自动帮助清除上面的监听。

    完结撒花,有疑问留言探讨哈~~~

    Processed: 0.008, SQL: 8