用 Chrome 开发者工具分析 javascript 的内存回收(GC)
来源:互联网 发布:手机淘宝首页如何装修 编辑:程序博客网 时间:2024/06/04 18:16
今天在知乎看到一个问题:"通过 createElment 创建的元素,不 append 到 html 中,那么此元素被自动销毁的时机是什么?"
比如:
var a;
(function(){
a = document.createElment("div");
})();
a = "Hello";
此时浏览器能否正确销毁和回收这个没有被 append 到页面上 dom 元素?
如果此元素不会被主动销毁或者回收,那么通过什么方法将其销毁呢?
我们知道,这种通过 document.createElment 创建出来的元素,是没有 parentNode 的,因为它创建时候并没有被添加到页面中。那么如何才能销毁它?
对 javascript 内存模型有了解的同学一定对下面的图很熟悉
当一个对象占用(使用)内存时,使用两种方式:直接和间接。直接占用内存很容易理解,而间接占用内存指对象中保持了对其它对象的引用,这样垃圾回收(GC 机制)就无法对那些对象进行回收。
在 GC 中一个很重要的概念就是 GC 根(GC root),当 javascript 程序中的某一个对象无法从 GC root 遍历到时,这个对象使用的内存就会被回收。
如下图的 9 和 10 就会被回收:
那么我们从原理角度分析一下最上面的代码,当执行 document.createElment("div") 时创建了一个 div 的 dom 对象,并赋值给了 a 变量,随后又把一个字符串 "Hello" 赋值给了 a 变量。此时 a 的值是 "Hello",类型是字符串。而之前创建的 div 对象已经不能通过 GC 遍历到,因此 div 对象被回收了。如果 div 对象没有被回收的话,我们观察如上代码,这个对象已经无法被任何变量所引用,因此就会产生内存泄漏。
下面我们通过使用 Chrome 的开发者工具分析一下如上代码。
首先新建一个空白 html 页面,页面里面什么代码也不写。
为了防止干扰,在 chrome 中新建一个隐身窗口,在隐身窗口中打开这个空白页面。
按 F12 或者 Ctrl + Shift + I,调出 devtools,选中 Profile 面板。
这时会记录此刻的内存使用情况
按 ESC 打开 Console,或者手动切换到 Console 面板,输入
var a;
(function(){
a = document.createElment("div");
})();
然后按 Ctrl + E,或者再次点击 Take Heap Snapshot 按钮,这时又会记录一个 Snapshot2,选择 Comparison,可以将本次内存和上次记录的进行对比。
差异比较多,好多可以不用管,看最后一个:
选中之后下面有详细:
Detached DOM 的意思是这个 DOM 是游离在页面 DOM 之外的。
运行代码
a = "Hello";
继续上面的步骤后,Snapshot3 和 Snapshot2 相比,DOM 被 Delete 了:
Snapshot3 和 Snapshot1 相比,多了字符串 "Hello":
而通过 Heap Allocation Timeline 可以观察到 DOM 到底在什么时候被 GC 的。
欢迎关注我的公众号,长按图片识别二维码
- 用 Chrome 开发者工具分析 javascript 的内存回收(GC)
- Chrome开发者工具(javascript内存分析)
- Chrome开发者工具之JavaScript内存分析
- Chrome开发者工具之JavaScript内存分析
- 用Chrome开发者工具做JavaScript性能分析
- 用Chrome开发者工具做JavaScript性能分析
- 使用用Chrome开发者工具(Timeline、Profiler)做JavaScript性能分析
- chrome的开发者工具(F12),十分好用
- 通过使用Chrome的开发者工具来学习JavaScript
- 比firebug更好用的chrome开发者工具,开发者神器~
- Chrome的开发者工具详解
- Chrome开发者工具的使用
- chrome开发者工具的使用
- java的内存回收机制GC
- 【JavaScript】使用Chrome进行调试(如何使用Chrome开发者工具)
- .NET的GC内存管理与GC回收机制
- 内存垃圾回收 GC
- 内存垃圾回收 GC
- [V8内核系列] 开启对象属性的“fast”模式
- 从 V8 的单元测试源码看“同值相等”
- V8 使用“常量折叠”优化技巧,导致幂(**)运算有时候不等于 Math.pow()
- JavaScript 函数式编程的性能问题
- 昨天收到PHPHub创始人Summer的道歉,已经线下和解
- 用 Chrome 开发者工具分析 javascript 的内存回收(GC)
- javascript 之谜系列:为什么 [1,2] + [3,4] 不等于 [1,2,3,4]?
- hashCode不相等则equals一定不相等,equals相等则hashCode一定相等,覆盖equals时总要覆盖hashCode(记录一下)
- 详解 javascript 的 delete 操作符
- justjavac的2016:热门文章汇总
- HTML状态码
- 为什么这样也能运行? [ ].concat[1,2,3]
- 当你决定把代码开源之前先选择一个合适的 License
- 走进JSON