Chrome 开发工具之 Memory


上面有三个按钮:
- Heap snapshot - 用以打印堆快照,堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
- Allocation instrumentation on timeline - 在时间轴上记录内存信息,随着时间变化记录内存信息。
- Allocation sampling - 内存信息采样,使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销,可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

- Summary - 可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象(及其内存使用),适用于跟踪 DOM 泄漏。
- Comparison - 可以显示两个快照之间的不同。使用此视图可以比较两个(或多个)内存快照在某个操作前后的差异。检查已释放内存的变化和参考计数,可以确认是否存在内存泄漏及其原因。
- Containment - 此视图提供了一种对象结构视图来分析内存使用,由顶级对象作为入口。
- Statistic - 内存使用饼状的统计图。
var _____testArray_____ = [{ value: 'hello' }] function someTodo() {
_____testArray_____.push({
value: ':::::::::'
})
} document.querySelector('#btn').addEventListener('click', someTodo, false)


- DOMWindow - 是被视为 JavaScript 代码 "全局" 对象的对象。
- GC - VM 的垃圾使用的实际 GC 根。GC 根可以由内置对象映射、符号表、VM 线程堆栈、编译缓存、句柄作用域和全局句柄组成。
- 原生对象 - 是 "推送" 至 JavaScript 虚拟机内以允许自动化的浏览器对象,例如 DOM 节点和 CSS 规则。
- Contructor - 表示使用此构造函数创建的所有对象
- Distance - 显示使用节点最短简单路径时距根节点的距离
- Shallow Size - 显示通过特定构造函数创建的所有对象浅层大小的总和。浅层大小是指对象自身占用的内存大小(一般来说,数组和字符串的浅层大小比较大)
- Retained Size - 显示同一组对象中最大的保留大小。某个对象删除后(其依赖项不再可到达)可以释放的内存大小称为保留大小。
- #New - Comparison 特有 - 新增项
- #Deleted - Comparison 特有 - 删除项
- #Delta - Comparison 特有 - 增量
- Alloc. Size - Comparison 特有 - 内存分配大小
- Freed Size - Comparison 特有 - 释放大小
- Size Delta - Comparison 特有 - 内存增量
- 基础类型 string 值为 hello ,内存标记是 string@353953,这个 string 值存在于 Object @362113 对象上的 value 属性上;
- Object @362113 在 Object 列表里,在 Array @356493 的索引 0 位置存在该对象的引用;
- Array @356493 在 Window / @353829 对象上存在引用,属性名为"___testArray___";
- Window / @353829 是个 Windows 对象,在 Windows 列表里。
"hello" -> 在(string)列表里 -> string@353953 -> value in Object @362113 Object -> 在 Object 列表里 -> [0] in Array @356493 Array -> 在(array)列表里 -> _____testArray_____ in Window / @353829 Windows -> 在 Windows 列表里 -> Window / @353829
var _____testArray_____ = [{ value: 'hello' }]
var count = 1 function someTodo() {
// 每次点击 字符串长度都以上一次为基础增加到5倍,拉大差异突出效果,并且之后在字符串头部加上count值做区分
count *= 5
var str = new Array(count * 10).join(':')
_____testArray_____.push({
value: count + str
})
} document.querySelector('#btn').addEventListener('click', someTodo, false)

# 前面的数字代表本次记录索引,点击了5次 # 0 Shallow Size : 112
Constructor Distance Shallow Size Retained Size
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(array)×9 3 5008 0% 5008 0%
(system)×60 3 2416 0% 2640 0%
(closure)×1 3 4768 0% 2928 0%
Object×3 3 144 0% 768 0%
MouseEvent×3 4 112 0% 7200 0%
(string)×2 5 96 0% 96 0%
(concatenated string)×2 4 64 0% 160 0%
Event 5 56 0% 2040 0%
UIEvent 5 32 0% 648 0% # 1
(string)×2 5 296 0% 296 0%
(concatenated string)×2 4 64 0% 360 0%
Object 3 32 0% 392 0% # 2
(string)×2 5 1296 0% 1296 0%
(concatenated string)×2 4 64 0% 1360 0%
Object 3 32 0% 1392 0% # 3
(string)×2 5 6296 0% 6296 0%
(concatenated string)×2 4 64 0% 6360 0%
Object 3 32 0% 6392 0% # 4
(string)×2 5 31296 0% 31296 0%
(array) 4 80 0% 80 0%
(concatenated string)×2 4 64 0% 31360 0%
(system) 4 32 0% 32 0%
Object 3 32 0% 31392 0%


Chrome 开发工具之 Memory的更多相关文章
- Chrome 开发工具之Timeline
之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...
- Chrome 开发工具之Timeline/Performance
之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline(现已更名Performance)更多的是用在性能优化 ...
- Chrome 开发工具之Sources
Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常 ...
- Chrome 开发工具之Console
前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也 ...
- Chrome开发工具之Console
Chrome开发工具-Console 看了别人的博客,才发现在百度主页用开发工具“Console”可以看到百度的招聘信息 前端调试工具可以按F12打开,谷歌的开发工具中的Console面板可以查看错误 ...
- Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
- Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...
- Chrome 开发工具 Javascript 调试技巧
http://www.w3cplus.com/tools/dev-tips.html 一.Sources 面板介绍: Sources 面板分为左中右 3 部分左:Sources 当前页面加载的资源列表 ...
- Chrome 开发工具 Workspace 使用
前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次, ...
随机推荐
- Oracle数据库常用的脚本命令(一)
--连接数据库的命令connect,用于切换连接用户,简写形式conn--语法格式:conn 用户名/密码conn yanln/yanln --显示当前登录的用户show user --执行操作系统的 ...
- HTML认识二
<!doctype html> <html lang="en"><head> <meta charset="UTF-8" ...
- 前端经常碰到的小知识点-----js篇
一 js 1.可视区宽和高 ① document.documentElement.clientWidth //可视区的宽度 document.documentElement.clientHei ...
- Spring+MyBatis时Access denied for user '高欢欢'@'localhost' (using password: YES)的异常解决方案
今天在做spring+mybatis整合的时候系统只要一运行就会报下面的错误,搞了几个小时硬是没有找的原因 警告: com.mchange.v2.resourcepool.BasicResourceP ...
- HiLoGenerator生成id
using System.Linq; namespace Product.Host { public class HiLoGenerator { ; ; ; private object Sequen ...
- TreeMap原理实现及常用方法
目录 一. TreeMap概述 二. 红黑树回顾 三. TreeMap构造 四. put方法 五. get 方法 六. remove方法 七. 遍历 八. 总结 前面我们分别讲了Map接口的两个实现类 ...
- 题解 P2272 【[ZJOI2007]最大半连通子图】
P2272 [ZJOI2007]最大半连通子图 萌新初学Tarjan,在<信息学奥赛一本通-提高篇>中看到这题,看到题解不多,便想发布一篇较为清新简洁的题解.--第5道紫题 题目大意: 定 ...
- MongoDB 启动时关于 NUMA 警告 的分析----(To avoid performance problems)
1. 需求描述 观察MongoDB的启动Log,会看到一个关于 NUMA 的警告 和 优化建议 --17T17:: I CONTROL [initandlisten] ** WARNING: You ...
- [leetcode]375 Guess Number Higher or Lower II (Medium)
原题 思路: miniMax+DP dp[i][j]保存在i到j范围内,猜中这个数字需要花费的最少 money. "至少需要的花费",就要我们 "做最坏的打算,尽最大的努 ...
- 高级MySQL
一.MySQL的架构介绍 1.高级MySQL MySQL内核 SQL优化 MySQL服务器的优化 各种参数常亮设定 查询语句优化 主从复制 软硬件升级 容灾备份 SQL编程 2.MySQL的Linux ...