javascript内存管理
认识内存管理
◼ 不管什么样的编程语言，在代码的执行过程中都是需要给它分配内存的，不同的是某些编程语言需要我们自己手动的管理内存， 某些编程语言会可以自动帮助我们管理内存：
◼ 不管以什么样的方式来管理内存，内存的管理都会有如下的生命周期：
- 第一步：分配申请你需要的内存（申请）；
- 第二步：使用分配的内存（存放一些东西，比如对象等）；
- 第三步：不需要使用时，对其进行释放；
◼ 不同的编程语言对于第一步和第三步会有不同的实现：
- 手动管理内存：比如C、C++，包括早期的OC，都是需要手动来管理内存的申请和释放的（malloc和free函数）；
- 自动管理内存：比如Java、JavaScript、Python、Swift、Dart等，它们有自动帮助我们管理内存；
◼ 对于开发者来说，JavaScript 的内存管理是自动的、无形的。
- 我们创建的原始值、对象、函数……这一切都会占用内存；
但是我们并不需要手动来对它们进行管理，JavaScript引擎会帮助我们处理好它；
JavaScript的内存管理
◼ JavaScript会在定义数据时为我们分配内存。
◼ 但是内存分配方式是一样的吗？JS对于原始数据类型内存的分配会在执行时， 直接在栈空间进行分配；
- JS对于复杂数据类型内存的分配会在堆内存中 开辟一块空间，并且将这块空间的指针返回值 变量引用；
垃圾回收机制算法
总结
常见的GC（垃圾回收）算法有两种：
1.引用计数：当一个对象有一个引用指向它的时候，它的count++ ，当count为0时候，GC会回收这个对象，缺点：会循环引用，导致无法清除
2.标记清除（V8）：设置一个根节点，所有对象都跟这个根节点有联系，根据根节点计算每个对象是否具有可达性，如果不具备就会被GC算法回收（这里用到的数据结构类似：图）
◼ 因为内存的大小是有限的，所以当内存不再需要的时候，我们需要对其进行释放，以便腾出更多的内存空间。
◼ 在手动管理内存的语言中，我们需要通过一些方式自己来释放不再需要的内存，比如free函数：
- 但是这种管理的方式其实非常的低效，影响我们编写逻辑的代码的效率；
- 并且这种方式对开发者的要求也很高，并且一不小心就会产生内存泄露；
◼ 所以大部分现代的编程语言都是有自己的垃圾回收机制：
- 垃圾回收的英文是Garbage Collection，简称GC；
- 对于那些不再使用的对象，我们都称之为是垃圾，它需要被回收，以释放更多的内存空间；
- 而我们的语言运行环境，比如Java的运行环境JVM，JavaScript的运行环境js引擎都会内存 垃圾回收器；
- 垃圾回收器我们也会简称为GC，所以在很多地方你看到GC其实指的是垃圾回收器；
◼ 但是这里又出现了另外一个很关键的问题：GC怎么知道哪些对象是不再使用的呢？
常见的GC算法 - 标记清除（mark-Sweep）
◼ 标记清除：
- 标记清除的核心思路是可达性（Reachability）
- 这个算法是设置一个根对象（root object），垃圾回收器会定期从这个根开始，找所有从根开始有引用到的对象，对于哪些没有引用到的对象，就认为是不可用的对象；
- 这个算法可以很好的解决循环引用的问题；
常见的GC算法 - 其它算法优化补充
◼ JS引擎比较广泛的采用的就是可达性中的标记清除算法，当然类似于V8引擎为了进行更好的优化，它在算法的实现细节上也会 结合一些其他的算法。
◼ 标记整理（Mark-Compact） 和“标记－清除”相似；
- 不同的是，回收期间同时会将保留的存储对象搬运汇集到连续的内存空间，从而整合空闲空间，避免内存碎片化；
◼ 分代收集（Generational collection）—— 对象被分成两组：“新的”和“旧的”。
- 许多对象出现，完成它们的工作并很快死去，它们可以很快被清理；
- 那些长期存活的对象会变得“老旧”，而且被检查的频次也会减少；
◼ 增量收集（Incremental collection）
- 如果有许多对象，并且我们试图一次遍历并标记整个对象集，则可能需要一些时间，并在执行过程中带来明显的延迟。
- 所以引擎试图将垃圾收集工作分成几部分来做，然后将这几部分会逐一进行处理，这样会有许多微小的延迟而不是一个大的延迟；
◼ 闲时收集（Idle-time collection）
垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。
闭包的概念理解
◼ 闭包是JavaScript中一个非常容易让人迷惑的知识点：
有同学在深入JS高级的交流群中发了这么一张图片；
- 并且闭包也是群里面大家讨论最多的一个话题；
◼ 闭包确实是JavaScript中一个很难理解的知识点，接下来我们就对其一步步来进行剖析，看看它到底有什么神奇之处。
JavaScript的函数式编程
◼ 在前面我们说过，JavaScript是支持函数式编程的
◼ 在JavaScript中，函数是非常重要的，并且是一等公民：
- 那么就意味着函数的使用是非常灵活的；
- 函数可以作为另外一个函数的参数，也可以作为另外一个函数的返回值来使用；
◼ 所以JavaScript存在很多的高阶函数：
- 自己编写高阶函数
- 使用内置的高阶函数
◼ 目前在vue3+react开发中，也都在趋向于函数式编程：
- vue3 composition api: setup函数 -> 代码（函数hook，定义函数）；
- react：class -> function -> hooks
闭包的定义
◼ 这里先来看一下闭包的定义，分成两个：在计算机科学中和在JavaScript中。
◼ 在计算机科学中对闭包的定义（维基百科）：
- 闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）；
- 是在支持 头等函数 的编程语言中，实现词法绑定的一种技术；
- 闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）；
- 闭包跟函数最大的区别在于，当捕捉闭包的时候，它的 自由变量 会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行；
◼ 闭包的概念出现于60年代，最早实现闭包的程序是 Scheme，那么我们就可以理解为什么JavaScript中有闭包：
- 因为JavaScript中有大量的设计是来源于Scheme的；
◼ 我们再来看一下MDN对JavaScript闭包的解释：
- 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；
- 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；
- 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来；
◼ 那么我的理解和总结：
- 一个普通的函数function，如果它可以访问外层作用域的自由变量，那么这个函数和周围环境就是一个闭包；
- 从广义的角度来说：JavaScript中的函数都是闭包；
从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用域的变量，那么它是一个闭包；
闭包的形成过程
总结
作用域记住一个点，函数声明的位置（词法作用域）
闭包有一个别名:词法闭包，词法一次实际和作用域是相同的，函数在执行的时候会形成自己的作用域，如果函数正常执行结束JS引擎会销毁这个作用域，但是如果在函数的作用域中，有声明一个函数且返回了这个函数（有变量赋值），那么就会形成所谓的闭包，闭包保存了函数定义时的作用域并且在函数执行结束之后不会销毁，等待下次调用。
闭包是js的一大特性，在不知不觉中为我们提供了很多便利，但是闭包最大的问题就是内存泄漏，因为函数执行结束之后并没有销毁作用域会导致占用内存，合适的做法是在我们使用完闭包之后要将接受函数的变量赋值为空，JS引擎就会为我们销毁这个作用域闭包的访问过程
◼ 如果我们编写了如下的代码，它一定是形成了闭包的：
function maskeAdder(count){return function(num){return count + num}}var add10 = maskeAdder(10)console.log(add10(5))
闭包的执行过程
◼ 那么函数继续执行呢？
这个时候makeAdder函数执行完毕，正常情况下我们的AO对象会被释放；
- 但是因为在0xb00的函数中有作用域引用指向了这个AO对象，所以它不会被释放掉；
闭包的内存泄露
◼ 那么我们为什么经常会说闭包是有内存泄露的呢？
- 在上面的案例中，如果后续我们不再使用add10函数了，那么该函数对象应该要被销毁掉，并且其引用着的父作用域AO也应 该被销毁掉；
- 但是目前因为在全局作用域下add10变量对0xb00的函数对象有引用，而0xb00的作用域中AO（0x200）有引用，所以最终 会造成这些内存都是无法被释放的；
- 所以我们经常说的闭包会造成内存泄露，其实就是刚才的引用链中的所有对象都是无法释放的；
◼ 那么，怎么解决这个问题呢？
- 因为当将add10设置为null时，就不再对函数对象0xb00有引用，那么对应的AO对象0x200也就不可达了；
- 在GC的下一次检测中，它们就会被销毁掉；
add10 = null
闭包的内存泄露测试
function testArray() {var arr =new Array ( 1024*1024).fi11(1)return function() {console.log(arr)}}var arr =[]var createBtnEl = document.querySelector( ".create")var destroyBtnEl = document.querySelector( ".destroy")createBtnEl.onclick = function() {for (var i = 0; i <100; i++){arr.push(testArray())}}destroyBtnEl.onclick = function() {arr =[]}
AO不使用的属性优化
◼ 我们来研究一个问题：AO对象不会被销毁时，是否里面的所有属性都不会被释放？
- 下面这段代码中name属于闭包的父作用域里面的变量；
- 我们知道形成闭包之后count一定不会被销毁掉，那么name是否会被销毁掉呢？
- 这里我打上了断点，我们可以在浏览器上看看结果；
作业与总结
一. 说说你对GO/AO/VO的理解以及作用域和作用域链的理解
GO
- Global Object JS代码在执行前会现在堆内存中创建一个全局对象(GO)
- 用于存放一些定义好的变量方法等包含Date Array String Number setTimeout等
- 同时有一个window属性指向自己
- 同时在语法分析转成AST的过程中也会将一些变量 函数 存放在GO中 只是变量的初始值为undefined
AO
- 函数在执行前会先在堆内存中创建一个AO(Activation Object)对象 里面存放这arguments 对应函数的形参 以及在函数中定义的变量 初始值为undefined
VO
- Variable Object 在执行函数时 会在执行上下文栈(ECS)中进入一个函数执行上下文(FEC)其中有三个核心 核心之一是VO 指向的是该函数在内存中解析时创建的AO 而在全局执行上下文中指向的是GO
作用域,作用域链
- 当进入到一个执行上下文时 执行上下文会关联一个作用域链
通常作用域链在解析时就被确定 因此 作用域链域函数的定义位置有关 而与它的调用位置无关
三. 说说V8引擎的内存管理以及垃圾回收器
内存管理
JavaScript的内存管理是自动的
- 关于原始数据类型 直接在栈内存中分配
- 关于复杂数据类型 在堆内存中分配
垃圾回收(GC)
- 因为内存大小是有限的 所以在内存不需要的时候 需要进行释放 用于腾出空间
- GC对于内存管理有着对应的算法
- 常见的算法
- 引用计数(Reference Count)
- 当一个对象有引用指向它时 对应的引用计数+1
- 当没有对象指向它时 则为0 此时进行回收
- 但是有一个严重的问题 - 会产生循环引用
- 标记清除(Mark-Sweep)
- 核心思路: 可达性
- 有一个根对象 从该对象出发 开始引用到所用到的对象 对于根对象没有引用到的对象 认为是不可用的对象
- 对于不可用的对象 则进行回收
- 该算法有效的解决了循环引用的问题
- 目前V8引擎采用的就是该算法
- 引用计数(Reference Count)
V8引擎为了优化 在采用标记清除的过程中也引用了其他的算法
- 标记整理
- 和标记清除相似 不同的是回收时 会将保留下来的存储对象整合到连续的内存空间 避免内存碎片化
- 分代收集(Generational Collection)
- 将内存中的对象分为两组 新的空间 旧的空间
- 对于长期存活的对象 会将该对象从新空间移到旧空间中 同时GC检查次数减少
- 将新空间分为from和to 对象的GC查找之后从from移动到to空间中 然后to变为from from变为to 循环几次 对于依然存在的对象 移动到旧空间中
- 增量收集(Increment Collection)
- 如果存在许多对象 则GC试图一次性遍历所有的对象 可能会对性能造成一定的影响
- 所以引擎试图将垃圾收集工作分成几部分 然后这几部分逐一处理 这样会造成微小的延迟 而不是很大的延迟
- 闲时收集(IdIe-time Collection)
- 标记整理
闭包使得原本该销毁的作用域由于内部函数的引用没有销毁 始终存在在堆内存中 因此产生了内存泄露
- 解决
- 将保存着上层作用域引用的函数在使用完之后置为null将它的引用销毁在GC的下一次检查中 对应的内存就会被销毁(要将函数的引用消除)
若有收获，就点个赞吧
0 人点赞
