Chrome dev-tools 系列文章: QAQ-YS:使用 chrome-devtools Console 面板 QAQ-YS:使用 chrome-devtools Elements 面板 QAQ-YS:使用 chrome-devtools Sources 面板 QAQ-YS:使用 chrome-devtools Network 面板 QAQ-YS:使用 chrome-devtools Performance 面板 QAQ-YS:使用 chrome-devtools Memory 面板 QAQ-YS:使用 chrome-devtools Application 面板 开发过程中难免会遇到内存问题,本次笔记主要是记录一下项目运行过程中内存情况的解析工具。 简单的内存信息列表如果只想查看当前浏览器的各个 tab 正在使用的内存量,则在 那个列表里的可勾选项,没看错,是对于可选的信息数据列。 那个 需要看内存的实时变化过程,可以在 Chrome - Performance 面板查看时间轴上内存变化情况,其中会有 如果想要看更多的内存信息快照,则需要打开 Chrome 浏览器的开发者工具中的 Memory 面板了,下面就简单介绍一下该面板的使用。 它大概是长这样: 上面有三个按钮:
各自举些例子吧,方便理解 Heap snapshot给个 html,里面只有一句 js 代码 右上那块区域,从左到右有三个操作:查看方式、对象归类的筛选、对象选择。 左边有
附上 Comparison 效果,大致如下: 代码:
点击按钮后,数组中 push 了新的一项对象 图(array 那块列表展开就看不到下面列表了,就没展开): 附上 Containment 视图,它的排列稍微有些不同,大致如下: 入口有:
中间的 右边的 右中那块区域显示的内存快照信息,可以在各个数据上右键选择一些操作(
右下那块区域显示的是被选中对象的详细信息,如上面图片的内容一样一样的...可以在各个数据上右键选择一些操作(
最后,根据上面的图来分析一下上面代码产生的效果,根据 js 的类型和引用的关系来分析,变量
Allocation instrumentation on timeline看完静态的快照,再来看看动态的。 代码如下:
选择 每条线的高度与最近分配的对象大小对应,竖线的颜色表示这些对象是否仍然显示在最终的堆快照中。蓝色竖线表示在时间线最后对象仍然显示,灰色竖线表示对象已在时间线期间分配,但曾对其进行过垃圾回收。(这图中不是很明显,放大 devtool 面板后,图中的蓝色线顶部是有部分是灰色的...) 可以选择时间范围,查看该时间范围内的内存变化情况,如上图 5 次变化的情况分别是:
当勾选 如上面代码的效果: Allocation sampling这个功能仅根据名称和说明的话,不是很能看得懂是什么... 但是,还是通过一些案例给出了效果图,可以看出这块的功能应该是:哪些函数影响了内存的分配,并且该函数所耗内存在内存分配中占比多少。效果图如下: 图中函数可以直接点击跳转到函数定义的文件和位置。 完结,撒花. |