乐趣区

关于前端:Chrome-开发者工具-Performance-使用参考

jiezi

原文链接：https://developers.google.com…
相干文章：https://github.com/hewq/blog/…

Disable JavaScript Samples

  • 默认状况下，Main 局部会具体记录 JavaScript 的调用堆栈，应用 Disable JavaScript Samples 能够暗藏这些调用。像一些自定义的函数调用会被暗藏。下图为暗藏前和暗藏后的比拟

查看主线程

  • Main 局部记录了主线程的流动点击其中一个事件，在 Summary 面板中查看更具体的信息

DevTools 用火焰图示意主线程的流动。x 轴示意随工夫的记录，y 轴示意调用的事件。下层的事件调用（触发）了上层的事件（anonymous代表匿名函数）

Call Tree

  • 应用 Call Tree 来查看哪个根事件破费的工夫最多。Call Tree 只显示选中局部的记录。
  • Self Time 示意间接破费在该事件上的工夫，Total Time 示意破费在该事件及其所有后辈（子孙）事件的总工夫。
  • 默认状况下，分组菜单设置为无分组，应用分组菜单能够依据各种规范对流动表进行排序。
  • 点击 Show Heaviest Stack

会显示所选事件中哪些子事件执行工夫最长。

Bottom-Up

  • 应用 Bottom-Up 能够查看哪些流动在总体上占用了最多的工夫。Bottom-Up 只显示选中局部的记录。

在上图的火焰图中能够看出简直所有的工夫都花在三个对 wait 的调用上，所以 Bottom-Up 中，最顶部的是 wait；wait 调用上面的黄色局部其实是数以千计的 GC（垃圾回收）调用，所以下一个开销最大的是Minor GC。

  • Self Time 示意间接破费在该事件上的工夫，Total Time 示意破费在该事件及其所有后辈（子孙）事件的总工夫。

Event Log

  • 应用 Event Log 能够按工夫程序查看事件的执行
  • Start Time 示意绝对于记录的开始工夫，例如图中的1573.0ms 示意该事件在记录开始后的 1573 毫秒后被执行。
  • Self Time 示意间接破费在该事件上的工夫，Total Time 示意破费在该事件及其所有后辈（子孙）事件的总工夫。

Interactions

  • 应用 Interactions 来剖析记录过程中产生的用户交互。底部的红线示意期待主线程所破费的工夫。

Memory

  • 启用 Memory 能够查看记录过程中的内存应用状况。

Enable advanced paint instrumentation

  • 启用 Enable advanced paint instrumentation，在 Main 中点击 Paint，Paint Profiler 面板会显示无关绘制事件的高级信息

原文链接：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference?hl=zh-cn
相干文章：https://github.com/hewq/blog/blob/master/devtools/performance_start.md

Disable JavaScript Samples

  • 默认状况下，Main 局部会具体记录 JavaScript 的调用堆栈，应用 Disable JavaScript Samples 能够暗藏这些调用。像一些自定义的函数调用会被暗藏。下图为暗藏前和暗藏后的比拟

查看主线程

  • Main 局部记录了主线程的流动点击其中一个事件，在 Summary 面板中查看更具体的信息
    DevTools 用火焰图示意主线程的流动。x 轴示意随工夫的记录，y 轴示意调用的事件。下层的事件调用（触发）了上层的事件（anonymous 代表匿名函数）

Call Tree

  • 应用 Call Tree 来查看哪个根事件破费的工夫最多。Call Tree 只显示选中局部的记录。
  • Self Time 示意间接破费在该事件上的工夫，Total Time 示意破费在该事件及其所有后辈（子孙）事件的总工夫。
  • 默认状况下，分组菜单设置为无分组，应用分组菜单能够依据各种规范对流动表进行排序。
  • 点击 Show Heaviest Stack
    会显示所选事件中哪些子事件执行工夫最长。

Bottom-Up

  • 应用 Bottom-Up 能够查看哪些流动在总体上占用了最多的工夫。Bottom-Up 只显示选中局部的记录。
    在上图的火焰图中能够看出简直所有的工夫都花在三个对 wait 的调用上，所以 Bottom-Up 中，最顶部的是 wait；wait 调用上面的黄色局部其实是数以千计的 GC（垃圾回收）调用，所以下一个开销最大的是Minor GC。
  • Self Time 示意间接破费在该事件上的工夫，Total Time 示意破费在该事件及其所有后辈（子孙）事件的总工夫。

Event Log

  • 应用 Event Log 能够按工夫程序查看事件的执行
  • Start Time 示意绝对于记录的开始工夫，例如图中的1573.0ms 示意该事件在记录开始后的 1573 毫秒后被执行。
  • Self Time 示意间接破费在该事件上的工夫，Total Time 示意破费在该事件及其所有后辈（子孙）事件的总工夫。

Interactions

  • 应用 Interactions 来剖析记录过程中产生的用户交互。底部的红线示意期待主线程所破费的工夫。

Memory

  • 启用 Memory 能够查看记录过程中的内存应用状况。

Enable advanced paint instrumentation

  • 启用 Enable advanced paint instrumentation，在 Main 中点击 Paint，Paint Profiler 面板会显示无关绘制事件的高级信息

帮忙文档

快捷键

目录

题目

文本款式

列表

链接

代码片

表格

注脚

正文

自定义列表

LaTeX 数学公式

插入甘特图

插入 UML 图

插入 Mermaid 流程图

插入 Flowchart 流程图

插入类图

快捷键

Markdown

图标

快捷键

撤销

Ctrl /⌘+Z

重做

Ctrl /⌘+Y

加粗

Ctrl /⌘+B

斜体

Ctrl /⌘+I

题目

Ctrl /⌘+Shift +H

有序列表

Ctrl /⌘+Shift +O

无序列表

Ctrl /⌘+Shift +U

待办列表

Ctrl /⌘+Shift +C

插入代码

Ctrl /⌘+Shift +K

插入链接

Ctrl /⌘+Shift +L

插入图片

Ctrl /⌘+Shift +G

查找

Ctrl /⌘+F

替换

Ctrl /⌘+G

Disable JavaScript Samples

查看主线程

Call Tree

Bottom-Up

Event Log

Interactions

Memory

Enable advanced paint instrumentation

Markdown 已选中 3126 字数 51 行数 以后行 51, 当前列 0

HTML 1188 字数 27 段落

退出移动版