使用Chrome开发者工具分析JavaScript garbage collector(垃圾回收器)的实现原理

简介: 使用Chrome开发者工具分析JavaScript garbage collector(垃圾回收器)的实现原理

I use the following simple JavaScript code to illustrate:image.pngCreate a new empty tab in your Chrome, and first create a snapshot with empty heap status by click “Take Snapshot” button:image.pngThe Snapshot1 is generated.image.pngNow switch to tab Console, paste the JavaScript code and execute it in console.

image.pngAnd switch to Profiles tab again to make the second snapshot:image.pngOnce done, select the second snapshot, choose “Comparison” and “Snapshot1” as filter:image.pngWe can find out from column “New” that 100 div nodes are created as we expect.image.pngSince these nodes are not appended to document node so they are invisible to end user, so displayed as “Detached DOM”. The JerryTestArray still holds the reference to each div node so Garbage collector will not touch these nodes.


In order to make Garbage collector recycle the memory occupied by these nodes, just assign another value to JerryTestArray in console:image.pngimage.pngOnce done, make the third snapshot and compare it with the second. Now we can find that the re-assignment to JerryTestArray will trigger the destruction of those 100 div nodes by Garbage collector:image.pngMeanwhile, the string we use in assignment could also be inspected via the combination of filters below:

image.pngThere is another kind of profile in Chrome development tool which can give you an overview about timeline of memory allocation:image.pngClick Start button in above screenshot, and paste the following code in console and executed:image.pngAfter the code is executed, paste the following code and execute:image.pngNow stop the profile. The profile is displayed as below. The highlighted vertical blue line indicates the timeslot when the 97 Span elements are created. Note that the number of Span elements displayed here is not 98 but 97 since Chrome development tool displays the final status of objects after “stop profile” button is clicked ( the reference to 30th Span element is replaced by String, so it is recycled by GC ).image.pngYou can drag the two vertical bars to define the time range between which you would like to inspect. For example the time range below contains the timeslot when the below assignment occurs:image.pngWith this gained knowledge now we can check the memory allocation and destruction in some real application. For example click tile “My Tasks” to enter this application, make the first snapshot and click back button within application to return to launchpad, and make the second snapshot and review the comparison result.image.pngFrom the result we find out lots of stuff are deleted after we return to launchpad:image.pngHover your mouse to a given destructed object and you can review its detail:image.pngFor more tips How I use Chrome development tool in my daily work, please refer to this blog Chrome Development Tool tips used in my daily work


image.pngimage.png


相关文章
|
17小时前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
14 9
|
1天前
|
前端开发 JavaScript
JS-instanceof 的实现原理
`instanceof` 运算符在前端 JavaScript 中用于检测对象的原型链是否包含指定构造函数的 `prototype` 属性。它通过遍历对象的原型链来实现。每个对象都有一个内部链接 `[[Prototype]]` 指向其原型对象,当访问属性或方法时,JavaScript 引擎会沿着原型链查找。`instanceof` 的具体实现是通过比较对象的原型链中的原型与构造函数的 `prototype` 属性,直到找到匹配的原型或到达原型链的顶端。示例代码展示了如何使用 `instanceof` 检查对象的继承关系。此外,`instanceof` 可用于验证继承关系和类型检查,支持多态性。
|
5月前
|
Web App开发 前端开发 JavaScript
Chrome 浏览器中执行 JavaScript
Chrome 浏览器中执行 JavaScript
326 0
|
5月前
|
Web App开发 存储 前端开发
深入探索Chrome开发者工具:开发者的利器
Chrome DevTools是Chrome浏览器内置的网页开发与调试神器,包含元素检查、网络请求分析、性能监控和JavaScript调试等功能。可通过快捷键F12或菜单打开。主要面板有:Elements(查看编辑HTML/CSS),Console(运行JS代码及查看日志),Network(分析网络请求),Performance(优化网页性能)和Application(管理应用数据)。高级功能包括断点调试、网络限速和屏幕模拟,助力高效开发和调试。
77 0
|
4月前
|
Java 开发者
Java实现基于清除后分配规则的垃圾回收器及其实现原理
通过上述简化模型的实现,我们可以理解基于清除后分配规则的垃圾回收器的基本工作原理。实际上,现代JVM中的垃圾回收器比这个例子复杂得多,它们可能包括更多阶段、优化策略,以及不同类型的垃圾回收器协同工作。然而,理解这一基本概念对于深入理解垃圾回收机制和内存管理非常有帮助。
23 3
|
3月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
5月前
|
存储 监控 算法
深入理解Java的垃圾回收机制(GC)实现原理
深入理解Java的垃圾回收机制(GC)实现原理
215 1
|
4月前
|
Web App开发 存储 缓存
Chrome开发者工具学习
Chrome开发者工具学习
|
6月前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
|
6月前
|
Web App开发 缓存 JavaScript
Chrome 开发者工具 Request content was evicted from inspector cache
Chrome 开发者工具 Request content was evicted from inspector cache