使用Chrome开发者工具研究JavaScript的垃圾回收机制
I use the following simple JavaScript code to illustrate:
var JerryTestArray = []; (function(){ for( var i = 0; i < 100; i++){ JerryTestArray[i] = document.createElement("div"); } })();
Create a new empty tab in your Chrome, and first create a snapshot with empty heap status by click “Take Snapshot” button:
The Snapshot1 is generated.
Now switch to tab Console, paste the JavaScript code and execute it in console.
And switch to Profiles tab again to make the second snapshot:
Once done, select the second snapshot, choose “Comparison” and “Snapshot1” as filter:
We can find out from column “New” that 100 div nodes are created as we expect.
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:
Once 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:
Meanwhile, the string we use in assignment could also be inspected via the combination of filters below:
There is another kind of profile in Chrome development tool which can give you an overview about timeline of memory allocation:
Click Start button in above screenshot, and paste the following code in console and executed:
var JerryTestArray = []; (function(){ for( var i = 0; i < 98; i++){ JerryTestArray[i] = document.createElement("span"); JerryTestArray[i].className = "JerryClassName" + i; } })();
After the code is executed, paste the following code and execute:
JerryTestArray[30] = "this is a long test............................end";
Now 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 ).
You 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:
JerryTestArray[30] = "this is a long test............................end";
With 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.
From the result we find out lots of stuff are deleted after we return to launchpad:
Hover your mouse to a given destructed object and you can review its detail:
For 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
本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Java JDK目录下的jmap和jhat工具的使用方式
Suppose you have a running Java process and you would like to inspect its running status, for example how many object instance are created or memory consumption status, you can use some standard tool provided by JDK.This blog is written based on JDK 1.8.The sample code I am using to simulate a endless running process: package jmap; class Tool{ private int count = 0; public void Run() throws InterruptedException{ while(true){ System.out.println("Hello: " + this.count++); Thread.sleep(5000); } } }...
- 下一篇
Chrome开发者工具里的一个隐藏技能:chrome://net-internals
During my holiday I was writing a small tool for fun, which extracts my personal posts from http://www.baidu.com for further analysis.I am using AJAX in jQuery to perform a synchronous call to fetch html source code of given url specified by argument requestURL.、 function getPostByAJAX(requestURL){ var html = $.ajax({ url: requestURL, async: false}).responseText; return html; } The requestURL I am using is http://tieba.baidu.com/i/i/my_tie However when I try to access it via my JavaScript code a...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS关闭SELinux安全模块
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS6,7,8上安装Nginx,支持https2.0的开启