Chrome开发工具 分析 JavaScript 性能.pdf

Chrome开发⼯具 分析 JavaScript 性能 分析 JavaScript 性能 JavaScript 分析概论 使⽤⾕歌浏览器,打开V8 基准套件页⾯。再打开Chrome DevTools,移导航到概要⽂件 ⾯板,并验证“收集JavaScript CPU配 ⽂件”是否被选中。现在,单击开始按钮或按 Cmd + E 开始记录⼀个JavaScript CPU配 ⽂件。然后刷新V8基准套件页⾯。 当页⾯完成重载时,就会显⽰基准测试的分数。回到DevTools ，点击⽌按钮或再次按下 Cmd + E 停⽌记录。 这种 Bottom Up 视图通过对性能的影响程度来排列函数。您还可以检查这些函数的调 ⽤路径。 现在，通过单击 Bottom Up / Top Do n 按钮选择 Bottom Up 视图。然后单击 函数 列 中左边的⼩箭头 (程序) 。 Top Down 视图显⽰了调⽤的整体结构,从堆栈的顶部开始 调⽤。 注:您可以点击 Percentage 按钮查看绝对时间百分⽐。 选择函数列中的⼀个函数,然后单击焦点选定函数按钮(右边的眼睛图标) 。 这个可以过滤配 ⽂件，只显⽰所选函数和其调⽤者。点击窗⼜右下⾓的刷新按钮恢 复原状。 选择⼀个函数的函数列,然后单击排除选择函数按钮(X 图标) 。根据您所选择的功能,您 应当会看到类似这样的: 排除选择函数按钮可以在整个排除函数时间⾥，从配 ⽂件中删除选中的函数并且管 理调⽤者。单击刷新按钮可恢复原状。 您可以记录多个配 ⽂件。点击开始分析按钮,重新加载V8基准页⾯,然后单击停⽌分 析按钮。 左边的栏列出你的配 ⽂件记录,右边的树视图显⽰了所选的配 ⽂件的概要信息。 使⽤⽕焰 表 ⽕焰图表视图提供了⼀个JavaScript随着时间的推移进⾏处理的可视化表⽰,类似时间 轴和⽹络⾯板⾥的。在 Details 视图中使⽤⽕焰 表功能，执⾏JavaScript和CPU配 ⽂件之后,您可以查看配 ⽂件数据的⼏个不同⽅式。 可视化执⾏路径 通过可视化地分析和理解函数调⽤过程，你可以更好地了解你的应⽤程序的执⾏路 径。 ⽤颜⾊编码识别异常值 当缩⼩可以识别的重复的模式,就能进⾏优化,或者更重要的是,你能够发现异常值或意 想不到的使执⾏更加容易。 可视化 JavaScript 对时间尺度的数据分析器(如时间轴) 其他JavaScript分析报告的数据是随时间推移⽽产⽣的,⽽⽕焰图表按时间来报告数 据。这意味着当你看到事件的发⽣,你可以通过时间尺度,真正做到对JavaScript执⾏的 透视。例如,看到⼤的黄⾊条纹时间表,这是看问题完美⽅式。 注:⽔平轴表⽰时间，垂直轴表⽰调⽤堆栈。 Expensive 函数是宽的。Y 轴表⽰调⽤堆栈,所以⾼⽕焰不⼀定是重要的。密切关注宽条纹,不管他们 在调⽤堆栈的什么位 。 如何使⽤⽕焰 : 1.开DevTools找到配 ⽂件⾯板。 2.选择记录JavaScript CPU配置⽂件,然后单击开始。 3.当你完成收集数据,点击停⽌。 在概要视图中,选择⽕焰图可视化，该选择菜单在底部的DevTools中。 注:为了增加精度分析时间，可以在配 ⽂件中的DevTools flame-chart⾥ 启⽤⾼分辨率CPU分析。启⽤之后,您可以放⼤图，甚⾄是⼗分之⼀毫秒 时间间隔也可以。 ⾯板的顶部是⼀个概观,给出了完整的记录。你可以通过⽤⿏标单击在概观中放⼤特定 区域，如下所⽰。你也可以全景左边和右边，通过点击⽩⾊区域并且拖动⿏标。在 Details 视图中，时间尺度相应减少。 在 Details 视图中,函数的调⽤堆栈被表⽰为⼀个堆栈“块” 。在某个块顶部的块通过下 层函数块来命名。当⿏标悬停在⼀个给定的块上时，会显⽰其函数名和时间数据: 名称——函数的名称。 ⾃我时间——花了多长时间完成当前函数的调⽤,只包括函数⾃⾝的声明,不包括 它调⽤的任何函数。 总时间——完成当前函数的调⽤和调⽤其他函数的时间和。 ⾃我聚合时间——聚合时间，所有记录中函数的调⽤所⽤时间,不包括通过该函 数调⽤的函数所⽤时间。 聚合的总时间—聚合总时间，对所有函数的调⽤所⽤时间,包括通过该函数调⽤ 的函数所⽤时间。 ⽕焰图表中的颜⾊⽐较随机,但是通过调⽤的函数会被标记为相同的颜⾊。这就允许您 看到执⾏的模式,然后更容易看出异常值。这⾥与