您的位置：首页 > Web前端 > 其它 > 正文

Chrome谷歌浏览器开发者工具中Profiles的使用

更多时间：2017-6-3 类别：Web前端浏览量：457

Chrome谷歌浏览器开发者工具中Profiles的使用

Chrome谷歌浏览器开发者工具中Profiles的使用

一、Profiles在哪里

F12调出Chrome开发者工具，即可看到Profiles选项。

二、Profiles各功能点介绍

1、Profiles界面分为左右两个区域，左边区域是放文件的区域，右边是展示数据的区域。如图

2、右边区域有三个选项，它们分别代表者不同的功能:

(1)、Collect JavaScript CPU Profile

监控函数执行期花费的时间，用于分析网页上的JavaScript函数在执行过程中的CPU消耗信息。

(2)、Take Heap Snapshot

创建堆快照用来显示网页上的JS对象和相关的DOM节点的内存分布情况。

(3)、Record Heap Allocations

实时监控记录内存变化(对象分配跟踪)，利用这个可以实现隔离内存泄漏问题。

三、Collect JavaScript CPU Profile的使用

1、监控代码


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn"> click me</button>
<script type="text/javascript">...
function a() ...{
console.log('hello world');
}

function b() ...{
a();
}

function c() ...{
b();
}

document.getElementById('btn').addEventListener('click', c, true);
</script>
</body>
</html>

2、在右边区域中选择Collect JavaScript CPU Profile 选项，点击下方的Start按钮（也可以点击左边的黑色圆圈），这时候Chrome会开始记录网页的方法执行，然后我们点击界面的按钮来执行函数。最后再点击右边区域的Stop按钮（或者左边的红色圆圈），这时监控就结束了。左边Profiles会列出一个文件，单击可以看到如下界面：

3、展示类型有三种：

(1)、 Heavy(Bottom Up) （自底向上）

根据对性能的消耗影响列出所有的函数，并可以查看该函数的调用路径。例如

(2)、 Chart（图表类型）

[1]、按时间先后顺序显示的火焰图

[2]、该视图会以时间顺序展示CPU的性能情况，视图主要分成两块：

{1}、Overview 整个录制结果的鸟瞰图（概览），柱形条的高度对应了调用堆栈的深度，也就是说柱形条高度越高，调用堆栈的深度越深。

{2}、Call Stacks 在录制过程中被调用的函数的深入分析视图（调用堆栈），横轴表示时间，纵轴表示调用栈，自上而下的表示函数的调用情况。也就是说上面的函数调用在它下面的函数。

[3]、视图中的函数颜色不同于其它的面板，这里面的函数颜色标记是随机显示的。然而相同的函数调用颜色标记是相同的。

[4]、其中纵轴表示的函数调用堆栈高度仅仅函数的调用嵌套层次比较深，不表示其重要性很高，但是横轴上一个很宽的柱形条则意味着函数的调用需要一个很长的时间去完成，那么你就考虑去做一些优化操作。

[5]、将鼠标移到Call Stacks中的函数上可以显示函数的名称和时间相关的数据，会提供如下信息：

{1}、Name 函数名称
{2}、Self time 函数的本次调用运行的时间，仅仅包含该函数本身的运行时间，不包含它所调用的子函数的时间。
{3}、Total time 函数的本次调用运行的总时间，包含它所调用的子函数的运行时间。
{4}、URL 函数定义在文件中所在的位置，其格式为file.js:100，表示函数在file.js文件中的第100行。
{5}、Aggregated self time 在这次的录制过程中函数调用运行的总时间，不包含它所调用的子函数的时间。
{6}、Aggregated total time 在这次的录制过程中所有的函数调用运行的总时间，包含它所调用的子函数的时间。
{7}、Not optimized 如果优化器检测到该函数有潜在的优化空间，那么该函数会被列在这里。

(3)、 Tree(Top Down) (自顶向下)

从调用栈的顶端（最初调用的位置）开始，显示调用结构的总体的树状图情况。如图

四、Take Heap Snapshot的使用

通过创建堆快照可以查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具你可以创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题。

1、选中Take Heap Snapshot,点击Take Snapshot按钮即可获取快照，在每一次获取快照前都会自动执行垃圾回收操作。如图

可以看到左边区域生成个文件，文件名下方有数字，表示这个张快照记录到的内存总大小（此时为9.9M）。右边区域是个列表，它分为五列，表头可以按照数值大小手动排序。

2、表头中从左到右的五列的含义

(1)、Constructor(构造函数)

[1]、表示所有通过该构造函数生成的对象

[2]、这些构造函数都代表的含义

{1}、(global property)

全局对象（比如window）和通过它引用的对象之间的中间对象，如果一个对象是由Person构造函数生成并被全局对象所引用，那么它们的引用路径关系就像这样[global] > (global property) > Person。这跟常规的对象之间直接引用相比，采用中间对象主要是考虑性能的原因。全局对象的改变是很频繁的，而非全局变量的属性访问最优化方案对全局变量是不适用的。
(roots) 它们可以是由引擎自己的目标创建的一些引用，这个引擎可以缓存引用的对象，但所有的这些引用都是弱引用，它们不会阻止引用对象被回收。

{2}、(closure)

一些函数闭包中的一组对象的引用。

{3}、(array, string, number, regexp)

引用了数组(Array),字符串(String),数字(Number)或正则表达式的对象类型。

{4}、HTMLliElement, HTMLAnchorElement, DocumentFragment等

你的代码中对元素(elements)的引用或者指定的document对象的引用。

(2)、Distance

对象到达GC根的最短距离

(3)、Objects Count

对象的实例数

(4)、Shallow size

对应构造函数生成的对象的shallow sizes(直接占用内存)总数

(5)、Retained size

展示了对应对象所占用的最大内存

3、点击展开它们查看详细项，@符号表示该对象ID:

4、堆快照提供了不同的视角来进行查看

(1)、Summary

该视图按照构造函数进行分组，用它可以捕获对象和它们使用的内存情况，对于跟踪定位DOM节点的内存泄漏特别有用。

该视图会显示所有的对象信息，点击其中的一个对象进行展开可查看更详细的实例信息。鼠标移动到某个对象上会显示该对象实例的详情信息。如图

(2)、Comparison视图

通过比较多个快照之间的差异来找出内存泄露的对象，为了验证某个程序的操作不会引起内存泄露（通常会执行一个操作后再执行一个对应的相反操作，比如打开一个文档后再关闭它，应该是没有产生内存泄露问题的），你可以执行如下步骤：

[1]、在执行一个操作之前拍一个快照。

[2]、执行一个操作，通过你认为可能会引起内存泄露的一次页面交互操作。

[3]、执行一个相反的操作。

[4]、拍第二个快照，切换到Comparison视图，并与第一个快照进行对比。

切换到Comparison视图之后，就可以看到两个不同的快照之间的差别。

(3)、Containment视图

该视图本质上就是应用程序的对象结构的“鸟瞰图”，允许你去深入分析函数的闭包，了解应用程序底层的内存使用情况。

(4)、Statistics视图

该视图是堆快照的总的分布统计情况：

五、Record Heap Allocations.（对象跟踪器）

1、作用是为为我们拍下一系列的快照（频率为50ms），为我们检测在启用它的时候每个对象的生存情况。形象一点说就是假如拍摄内存快照的功能是照相那么它功能相当于录像。

2、当我们启用start按钮的时候它便开始录像，直到结束。你会看到左侧区域上半部分有一些蓝色和灰色的柱条。灰色的表示你监控这段时间内活跃过的对象，但是被回收掉了。蓝色的表示依旧没有没回收。你依旧可以滑动滚轮缩放时间轴。

3、如图

标签：Chrome

上一篇：Flash遮盖其它层，z-index无效

下一篇：html中哪些标签不能嵌套

您可能感兴趣

Chrome谷歌浏览器开发者工具中Profiles的使用

Chrome谷歌浏览器开发者工具中Profiles的使用

热门推荐

排行榜