用浏览器测试几种闭包占用内存的情况

简介:

更多相关内容见博客 github.com/zhuanyongxi…

这一篇首先是打算证明一下《三个闭包实例理解闭包对内存的影响》

一共有9个例子,例7、8、9需要注意

只测试了Chrome,Chrome版本为67.0.3396.87(正式版本) (64 位)

例1



var a = 12;
function fn() {
  var a = new Array(10000000).join('x');
  return function () {
    var b = 1 + a;
  }
}
var f = fn();

结果,占用内存。

图一

566a5df53eb0b385be2abc5fcb1de2f5be773cf3

例2


var oDiv = document.getElementById("div1");
~function() {
  var fn = function() {};
  fn.data = new Array(10000000).join('x');
  oDiv.onclick = fn;
}();

结果同上图。如果把例子改成:


var oDiv = document.getElementById("div1");
~function() {
  var fn = function() {};
  fn.data = new Array(10000000).join('x');
  // oDiv.onclick = fn;
}();

结果就是这样了,局部作用域中的函数fn被销毁了。

图二

140a8cecd1b97afb00def1ed807137db9006f8ed

例3


function fn(){
  var a = new Array(10000000).join('x');
  return function(){
    var b = 1 + a;
  }
}
fn();

结果同图二,返回函数没有被全局变量接住。

例4

这是一个延时销毁的例子。


function fn(){
  var a = new Array(10000000).join('x');
  return function(){
    var b = 1 + a;
  }
}
fn()();

先这样卡主断点:

fca41c03f98a79e871371ba1d5197c5083d799b9

测试内存结果同图一。

然后让程序运行完成,测试内存的结果就变成了图二。

例5


var fn;
function foo() {
  var a = new Array(10000000).join('x');
  function baz() {
    var b = 1 + a;
  }
  fn = baz;
}

foo();

结果同图一。

例6


function fn() {
  var a = new Array(10000000).join('x')
  return function () {
    console.log("test");
  }
}
var f = fn();

结果同图二,没有被返回的函数使用,销毁。

例7


function fn() {
  var a = new Array(10000000).join('x')
  var b = new Array(10000000).join('x')
  return function () {
    var b = 1 + a;
  }
}
var f = fn();

结果同图一,被返回的函数使用的变量被储存了,没有被使用的被销毁了。

例8


function fn() {
  var a = new Array(10000000).join('x');
  
  function another() {
    var b = 1 + a;
  }
  
  return function() {
    console.log("test");
  };
}
var f = fn();

结果同图一,变量没有被除返回函数之外的其他函数使用,依然会有内存被占用。

例9


function fn() {
  var a = new Array(10000000).join('x');
  return function(a) {
    var b = 1 + a;
  }
}

var f = fn();

结果同图二,没有被占用,变量a实际上被重新声明了。

总结

闭包环境中的变量会有存储在内存中的条件:返回了一个函数被使用(通常是被赋值给了一个外部的变量,例4是一个特殊的情况),且这个函数所在的执行环境中的变量被这个执行环境中的函数使用。

---- 20180625

文章最开始的版本,在返回函数中使用上级变量的方式是console.log(a),这里错了,console.log会把内容打到内存里面,所以在测试例4的时候会有问题。其他的结果虽然在修改之后没有变化,但是在开始时测试的思路不对。



原文发布时间为:2018年06月21日
原文作者:砖用冰西瓜
本文来源:  掘金  如需转载请联系原作者


相关文章
|
2月前
|
Web App开发 编解码 前端开发
面试题22:如何测试Web浏览器的兼容性?
面试题22:如何测试Web浏览器的兼容性?
|
3月前
|
存储 JavaScript 前端开发
|
1月前
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程)
【2月更文挑战第13天】《手把手教你》系列基础篇之(四)-java+ selenium自动化测试- 启动三大浏览器(下)基于Maven(详细教程) 上一篇文章,宏哥已经在搭建的java项目环境中实践了,今天就在基于maven项目的环境中给小伙伴们 或者童鞋们演示一下。
66 1
|
1月前
|
Web App开发 Java 测试技术
《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程)
【2月更文挑战第12天】《手把手教你》系列基础篇之(三)-java+ selenium自动化测试- 启动三大浏览器(上)(详细教程) 前边宏哥已经将环境搭建好了,今天就在Java项目搭建环境中简单地实践一下: 启动三大浏览器。按市场份额来说,全球前三大浏览器是:IE.Firefox.Chrome。因此宏哥这里主要介绍一下如何启动这三大浏览器即可,其他浏览器类似的方法,照猫画虎就可以了。
44 1
|
9天前
|
Java 测试技术 定位技术
《手把手教你》系列技巧篇(二十三)-java+ selenium自动化测试-webdriver处理浏览器多窗口切换下卷(详细教程)
【4月更文挑战第15天】本文介绍了如何使用Selenium进行浏览器窗口切换以操作不同页面元素。首先,获取浏览器窗口句柄有两种方法:获取所有窗口句柄的集合和获取当前窗口句柄。然后,通过`switchTo().window()`方法切换到目标窗口句柄。在项目实战部分,给出了一个示例,展示了在百度首页、新闻页面和地图页面之间切换并输入文字的操作。最后,文章还探讨了在某些情况下可能出现的问题,并提供了一个简单的本地HTML页面示例来演示窗口切换的正确操作。
37 0
|
2月前
|
Java 测试技术 C#
常见浏览器兼容性测试工具
常见浏览器兼容性测试工具
|
2月前
|
编解码 缓存 前端开发
Web浏览器的兼容性测试需要考虑哪些测试点?
Web浏览器的兼容性测试需要考虑哪些测试点?
|
2月前
|
监控 测试技术 Shell
APP的CPU,内存和流量如何测试?
APP的CPU,内存和流量如何测试?
|
3月前
|
缓存 测试技术 项目管理
软件测试/测试开发|给你剖析闭包与装饰器的魔力
软件测试/测试开发|给你剖析闭包与装饰器的魔力
26 0
|
3月前
|
Web App开发 Linux 数据安全/隐私保护
Docker本地部署开源浏览器Firefox并远程访问进行测试
Docker本地部署开源浏览器Firefox并远程访问进行测试
147 1