利用chrome devtool 观察页面占用内存
推荐阅读:解决内存问题
1. 任务管理器
我们看看下面这幅图:
内存占用空间:原生内存,Dom节点就是存在原生内存里面的。
Javascript使用的内存:代表JS堆内存,我们只需要关心括号里面的值(实时值)就可以了,JavaScript对象就存在JS堆里面。
2. Performance
我们看看下面这幅图,我在不停给vue的v-for加元素,很明显的Nodes不断在增长,但是JS Heap却起起落落。
JS堆占用上升我们可以理解,但是为什么会下降了,我们放大看可以看到,每次下降都是GC(garbage collection 垃圾回收)执行过后。
所以我们不但可以利用performance来看JS堆的使用情况,还可以看线程在执行什么任务,占用了多久时间。
3.Memory 拍摄堆快照
刚刚我们我们在任务管理器和Performance可以看到JS Heap的大小和趋势,但是我们没办法看到堆里面的细节内存,这个时候,我们可以到Memory页签,拍摄一个堆快照,看看里面的细节内容。
下面这幅图我们看到了堆里面都有什么对象,其中非常醒目的2列就是shallow size 和 Retained Size (推荐阅读:内存术语)
Shallow Size:浅层大小,就是对象本身的大小(不包括它内部引用的对象),这个我们通常不太关注
Retained Size:保留大小,就是如果GC回收这个对象后,可以释放多少内存,这个我们非常关注
以下面这幅图为例,VueComponent本身的大小非常小,但是它的Retained Size很大,占了总占用的60%,如果把VueComponent销毁,我们就可以释放出16.85M的内存。
这个是典型的小对象,导致大问题。对象本身不大,但是引用了一些大对象,使得这些大对象没办法被GC回收。
好奇的我看了下,vue给对象加上双向绑定的话,占用的内存多了多少。newObj是我自定义写的构造函数,可以看到,上面一副图的newObj占了6.16M(加了getter setter的双向绑定),下面这幅图newObj只占用640K。可以判断出来,加了双向绑定,对象本身是10倍的内存占用。这个还不排除Watcher的占用 (不过watcher通常占用不多,这个例子的话是从1k变成了837k)
4. Performance Monitor
还有一个入口比较隐蔽的内存监测器,在下图这里打开。
这个监测器我理解就是上面说到的Performance的实时简化版本,上面的Performance可以录快照,可以看到每个点比较详细的信息,但是不是实时的。
而这个Performance Monitor是实时的,但是没办法像Performance一样可以看到这么多细节信息。
利用chrome devtool 观察页面占用内存的更多相关文章
- 移动WebApp利用Chrome浏览器进行调试
详细的请看这个(HBuilder是我长期使用,而且值得支持的国内前端开发编辑器) http://ask.dcloud.net.cn/article/151 http://ask.dcloud.net. ...
- 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
- 利用Chrome插件向指定页面植入js,劫持 XSS
资源来自:http://www.2cto.com/Article/201307/225986.html 首页 > 安全 > 网站安全 > 正文 利用Chrome插件向指定页面植入js ...
- 利用Chrome的Performance工具排查页面性能问题(原叫timeline)
当页面中发生卡顿,最先考虑的是swf文件造成的卡顿,经过排查发现不是swf造成的影响,利用Chrome的Performance工具发现页面中的一些元素不断在重新布局,造成潜在的性能瓶颈. 首先在Chr ...
- Windows下利用Chrome调试IOS设备页面
本文介绍如何在 Windows 系统中连接 iOS设备 并对 Web 页面进行真机调试 必须前提 iOS设备.数据线 Node.js 环境 Chrome 浏览器 环境准备 安装Node环境 参考Nod ...
- Chrome开发者工具之JavaScript内存分析
阅读目录 对象大小(Object sizes) 对象的占用总内存树 支配对象(Dominators) V8介绍 Chrome 任务管理器 通过DevTools Timeline来定位内存问题 内存回收 ...
- Chrome开发者工具之JavaScript内存分析(转)
尽管JavaScript使用垃圾回收进行自动内存管理,但有效的(effective)内存管理依然很重要.在这篇文章中我们将探讨分析JavaScript web应用中的内存问题.在学习有关特性时请确保尝 ...
- Linux内存描述之内存页面page--Linux内存管理(四)
1 Linux如何描述物理内存 Linux把物理内存划分为三个层次来管理 层次 描述 存储节点(Node) CPU被划分为多个节点(node), 内存则被分簇, 每个CPU对应一个本地物理内存, 即一 ...
- 设置Redis最大占用内存
https://blog.csdn.net/happyrabbit456/article/details/54945667 Redis需要设置最大占用内存吗?如果Redis内存使用超出了设置的最大值会 ...
随机推荐
- SpringMVC 出现 406(Not Acceptable)
首先,需要清楚,http state 406代表什么意思: 406是HTTP协议状态码的一种,表示无法使用请求的特性来响应请求的网页.一般指客户端浏览器不接受所请求页面的MIME类型. 出现这样的错误 ...
- CCF 2017-09-2 公共钥匙盒
CCF 2017-09-2 公共钥匙盒 题目 问题描述 有一个学校的老师共用N个教室,按照规定,所有的钥匙都必须放在公共钥匙盒里,老师不能带钥匙回家.每次老师上课前,都从公共钥匙盒里找到自己上课的教室 ...
- ES6语法 学习
ECMAScript 6,也被称为ECMAScript 2015是ECMAScript标准的最新版本.6是语言的一个重要更新,并第一次更新语言由于ES5 2009标准.现在主要JavaScript引擎 ...
- qt连接oracle数据库
由与qt开源版本没有提供oracle数据库驱动,需要自己根据源代码来手动编译oracle驱动. 经过近三天的折腾,终于成功编译oracle驱动,连接到数据库 ps:期间经过各种失败疼苦迷茫.现在终于完 ...
- VBA术语(三)
在本章中,将介绍常用的Excel VBA术语.这些术语将在很多的模块中使用,因此理解其中的每一个术语都很重要. 模块 模块是编写代码的区域.如下图中,这是一个新的工作簿,因此没有任何模块. 要插入模块 ...
- leetcode-104.二叉树最大深度 · BTree + 递归
easy 题就不详细叙述题面和样例了,见谅. 题面 统计二叉树的最大深度. 算法 递归搜索二叉树,返回左右子树的最大深度. 源码 class Solution { public: int maxDep ...
- 6.Java集合-LinkedList实现原理及源码分析
Java中LinkedList的部分源码(本文针对1.7的源码) LinkedList的基本结构 jdk1.7之后,node节点取代了 entry ,带来的变化是,将1.6中的环形结构优化为了直线型链 ...
- ASE19团队项目 beta阶段 model组 scrum2 记录
本次会议于12月3日,19时整在微软北京西二号楼sky garden召开,持续10分钟. 与会人员:Jiyan He, Kun Yan, Lei Chai, Linfeng Qi, Xueqing W ...
- 单选框 RadioButton
activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- 面试总结关于Spring面试问题(精选)
1.什么是Spring? Spring是一个反转控制IOC和AOP的开发框架和平台. 2.解释一下Spring? 轻量 : Spring 在大小和透明度上是轻量的,Spring基本核心版本大概只有1M ...