共计 2729 个字符，预计需要花费 7 分钟才能阅读完成。
原文链接：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 段落
