【Day07】记忆体存放与释放

Day04 有提到在 JavaScript 里,

函式执行时会产生函式执行环境,在该执行环境中会创造属於自己的记忆体空间,

而在函式执行完毕後,会将记忆体空间释放出来

而在释放记忆体是有条件的,

JavaScript 回收机制:当没有其他任何物件参考它时,就会被当成可回收的记忆体

我们来实际看一下范例

首先准备一个随机生成字串的函式

function randomString(length) {
    let result = '';
    let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return result;
}

范例一

let demoData = [];
function getData() {
  for (let i = 0; i < 1000; i++) {
    demoData.push(randomString(5000));
  }
}
getData();
console.log(demoData);

在 Chrome 浏览器的 Console 中能看到很长阵列

此时我们进到开发人员工具中的 Momory,

之後点击左侧的圆形图案(Take heap snapshot)或下方的 Take snapshot 按钮来撷取当前占用的记忆体大小

https://ithelp.ithome.com.tw/upload/images/20210907/20141036oyRldMm2ss.png

此时可以看见当前占用记忆体空间为 8.2 MB

当我们将 getData() 注解後,来看占用记忆体剩多少

let demoData = [];
function getData() {
  for (let i = 0; i < 1000; i++) {
    demoData.push(randomString(5000));
  }
}
// getData();
console.log(demoData);

注解後占用记忆体剩下 3.1 MB

由上述结果可以得知,函式会占用记忆体空间

范例二

function getData() {
    let demoData = [];
    for (let i = 0; i < 1000; i++) {
        demoData.push(randomString(5000))
    }
    console.log(demoData);
}
getData()

此时会在 Console 中看到很长的阵列,

再到 Memory 看占用的记忆体

此时占用的记忆体为 8.2 MB

但是照理来说函式执行完後记忆体会被释放掉,

为何还占有 8.2 MB 呢?

此时我们可以在 Console 的地方将显示结果清除掉

点击红框处可以清空 Console

之後再到 Memory 看占用的记忆体还有多少

此时占用记忆体剩下 3.2 MB

这就表示 Chomre 的 console 中的行为也需要记忆体

而函式中所宣告的变数在函式执行完毕後,会因为没有其他物件参考它,而直接释放记忆体

以上为今天的内容,感谢观看。


<<:  DFIR的重要性神知道

>>:  从登入画面开始做起(上)Day3

[Day 17] - 『转职工作的Lessons learned』 - Cube.js / Redis TimeoutError

今天要继续讲转职工作使用到的工具以及遇到的一些问题及处理方式。 公司的专案在制作图表有使用到Cube...

《赖田捕手:番外篇》第 39 天:探索 Netlify Functions 的暂存空间

《赖田捕手:番外篇》第 39 天:探索 Netlify Functions 的暂存空间 在第 38 ...

[DAY10]Service:服务与POD的连结

在k8s中,pod可以随时被建立,也可以随时被移除。 如透过Deployments来建立时,它时可是...

练习严谨

我自己秉持着最少力气解决问题,但换句话说就是,有点得过且过,尤其如果快要放假的时候,这时候“选对环境...

DAY1 筑个前端毛胚屋

嗨我是稚鸟。这是一个for比菜鸟还菜的幼鸟前端指南。 幼鸟品种说明:学过一种程序语言,但对前端没啥概...