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

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

I use the following simple JavaScript code to illustrate:image.pngThe Snapshot1 is generated.

image.pngAnd switch to Profiles tab again to make the second snapshot:

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.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.pngimage.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.pngimage.pngimage.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


相关文章
|
1天前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中,数据绑定是Vue.js框架的核心特性之一,它实现了视图与数据的双向绑定,极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理,从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析,帮助读者更好地理解Vue.js框架的工作机制。
8 0
|
2天前
|
存储 缓存 JavaScript
解密前端框架Vue.js的响应式原理
作为当下最流行的前端框架之一,Vue.js的响应式原理是其核心之一。本文将深入探讨Vue.js的响应式原理,从数据劫持、依赖收集到更新视图的完整流程,帮助读者更好地理解Vue.js框架的工作方式。
|
20天前
|
JavaScript 前端开发 开发者
深入理解前端框架Vue.js的数据响应式原理
本文将深入探讨Vue.js前端框架中的数据响应式原理,包括双向绑定、依赖追踪和虚拟DOM等核心概念。通过详细解析Vue.js内部实现机制,读者能够更好地理解其工作原理,并在实际开发中更灵活地运用。
|
21天前
|
JavaScript 前端开发 算法
探究前端框架Vue.js的响应式原理
本文将深入探讨前端框架Vue.js的核心特性——响应式原理。我们将介绍Vue.js中的数据绑定、依赖追踪和虚拟DOM等概念,并通过具体的示例代码解析其工作机制。通过了解Vue.js的响应式原理,开发者可以更好地利用这一特性构建灵活、高效的前端应用。
|
23天前
|
存储 JavaScript 前端开发
JavaScript 自定义对象 及 new()原理与实现 如何完整地手写实现new
JavaScript 自定义对象 及 new()原理与实现 如何完整地手写实现new
35 0
|
28天前
|
缓存 JavaScript 前端开发
从引擎到垃圾回收器:JavaScript内存管理全方位解析(二)
从引擎到垃圾回收器:JavaScript内存管理全方位解析
|
28天前
|
存储 JavaScript 前端开发
从引擎到垃圾回收器:JavaScript内存管理全方位解析(一)
从引擎到垃圾回收器:JavaScript内存管理全方位解析
|
29天前
|
JavaScript
原生js实现div跳动效果---很多炫酷效果的基本原理
原生js实现div跳动效果---很多炫酷效果的基本原理
14 0
|
1月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
18 0
|
1月前
|
算法 JavaScript 前端开发
JavaScript学习 -- SM3算法基本原理
JavaScript学习 -- SM3算法基本原理
16 0