Chrome 开发工具之 Memory
Chrome 开发工具之 Memory
本文转载自:https://www.cnblogs.com/ys-ys/p/11336811.html
开发过程中难免会遇到内存问题,emmm... 本文主要记录一下Chrome排查内存问题的面板,官网也有,但有些说明和例子跟不上新的版本了,也不够详细...
上面有三个按钮:
- 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 @362113Object -> 在 Object 列表里 -> [0] in Array @356493Array -> 在(array)列表里 -> _____testArray_____ in Window / @353829Windows -> 在 Windows 列表里 -> Window / @353829
var _____testArray_____ = [{ value: 'hello' }] var count = 1function someTodo() {// 每次点击 字符串长度都以上一次为基础增加到5倍,拉大差异突出效果,并且之后在字符串头部加上count值做区分count *= 5var 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%
转载于:https://www.cnblogs.com/zwh-Seeking/articles/11337985.html
Chrome 开发工具之 Memory相关推荐
- chrome gwt1.7_快速提示:使用Chrome开发工具调试GWT应用程序
chrome gwt1.7 调试是软件开发的重要方面. 拥有正确的工具可以节省大量时间和头痛. 在GWT Super Dev模式之前,经典的Dev模式允许使用JVM调试. 开发人员可以在其IDE中设置 ...
- 快速提示:使用Chrome开发工具调试GWT应用程序
调试是软件开发的重要方面. 拥有正确的工具可以节省大量时间和头痛. 在GWT Super Dev模式之前,经典的Dev模式允许使用JVM调试. 开发人员可以在其IDE中设置断点,并使用调试模式来跟踪错 ...
- chrome 开发工具_我最喜欢的Chrome开发工具提示和技巧
chrome 开发工具 Chrome Developer Tools are a super powerful suite of tools for developing web applicatio ...
- Chrome 开发工具 (Chrome Developer Tools):Network Panel说明
出处:http://www.cnblogs.com/starof/p/5443445.html 官方资料:Chrome Developer Tools: Network Panel 一.chrome ...
- Chrome开发工具Network没有显示完整的http request和response对话
为什么80%的码农都做不了架构师?>>> Chrome开发工具Network没有显示完整的http request和response对话 这几天看<http defint ...
- Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
- Chrome 开发工具之Sources
Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常 ...
- Chrome开发工具使用技巧
一. 打开Chrome开发工具 . 在Chrome菜单中选择:更多工具 > 开发者工具 . 页面点击右键 > 检查 . 快捷键也可以用来打开开发工具: Cmd + Opt+ I (Wind ...
- chrome 开发工具
你真的会degguger吗?-- 最实用的Chrome 开发者工具使用总结_阿镇@吃橙子的博客-CSDN博客 開發不難,會 Debug 就好!如何靈活運用 Chrome DevTools 來開發網站 ...
最新文章
- 连续发表三篇NAR的数据库文章——数据库承建
- linux i2c子系统看不懂啊,Linux 下的I2C子系统
- 综合布线系统技术培训资料
- 面对行业难题,华为云邀请物联网全行业拿出“亮剑”精神
- Google云也想为中国企业服务,正与腾讯浪潮谈合作
- linux下安装配置net-snmp
- 什么是持续集成(CI)/持续部署(CD)?
- 拓端tecdat|r语言中使用Bioconductor 分析芯片数据
- 凤凰系统基于android x x86,凤凰系统X86|Phoenix OS X86 V3.0.8.529官方版
- 论文阅读--Emotion Recognition in Conversation: Research Challenges, Datasets, and Recent Advances
- android 新建桌面文件夹在哪里,添加并管理桌面文件夹
- Power Query零基础入门(Excel2021专业加强版)
- 【CityHunter】通过Unity3D来制作游戏中AR部分的内容
- R语言使用sort函数对日期向量数据进行排序、默认从小到大升序排序、设置decreasing参数为真进行降序排序
- uiautomator2输入中文的问题
- Elasticsearch7.6.2 rpm集群部署及异常处理
- 孤岛危机保存的文件在哪里?
- [论文解析] NeRDi: Single-View NeRF Synthesis with Language-Guided Diffusion as General Image Priors
- 操作系统实验(二):进程调度(c实现优先权调度和时间片轮转调度)
- 中国排球市场趋势报告、技术动态创新及市场预测
热门文章
- 大数据分析四大分析要素
- log4net异步写入日志_redis学习笔记(三)RDB日志
- c++ 后台 sendstring_苹果狂杀微信后台,微信官方出必杀技!
- 笔记本电脑主板电池_深圳外星人笔记本电脑维修服务中心
- 动态磅是怎么原理_浅谈动态地磅的原理及未来发展方向
- oracled update_oracle中要谨慎使用update交叉更新!
- R︱mlr包挑选最适机器学习模型+变量评估与选择(案例详解)
- sklearn库的学习入门
- 多继承 , 组合 , 菱形继承 , 接口 , 抽象 , 鸭子类型
- Nordic Collegiate Programming Contest 2016