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

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

I use the following simple JavaScript code to illustrate:


var JerryTestArray = [];

(function(){

     for( var i = 0; i < 100; i++){

    JerryTestArray[i] = document.createElement("div");

      }

})();

1

2

3

4

5

6

Create a new empty tab in your Chrome, and first create a snapshot with empty heap status by click “Take Snapshot” button:


image.pngimage.pngimage.pngimage.pngimage.png

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

目录
相关文章
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:理解其原理与实际应用
探索JavaScript中的闭包:理解其原理与实际应用
19 0
|
1月前
|
JavaScript
JS数组增删方法的原理,使用原型定义
JS数组增删方法的原理,使用原型定义
|
3天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
13天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
1月前
|
监控 JavaScript 安全
监控内网电脑软件设计与实现:基于Node.js的服务器端架构分析
在当今信息技术高度发达的时代,监控内网电脑的需求日益增长。企业需要确保网络安全,个人用户也需要监控家庭网络以保护隐私和安全。本文将介绍一种基于Node.js的服务器端架构,用于设计和实现监控内网电脑软件。
102 0
|
1月前
|
Web App开发 SQL 前端开发
性能工具之前端分析工Chrome Developer Tools性能标签
【2月更文挑战第22天】性能工具之前端分析工Chrome Developer Tools性能标签
36 1
性能工具之前端分析工Chrome Developer Tools性能标签
|
1月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
|
1月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
30 0
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
2月前
|
缓存 JavaScript 前端开发
深入理解Vue.js 3中的响应式原理与使用技巧
【2月更文挑战第1天】Vue.js 3作为一款流行的前端框架,其核心特性之一是响应式数据绑定。本文将深入探讨Vue.js 3中的响应式原理,包括Reactivity API的设计思路和实现原理,并结合实际案例介绍在项目中如何有效地利用Vue.js 3的响应式特性。通过本文的学习,读者将更加全面地理解Vue.js 3的内部工作原理,提升在前端开发中的实践能力。
80 2