Chrome DevTools 的Performance 工具是性能分析和优化的利器，因为它可以记录每一段代码的耗时，进而分析出性能瓶颈，然后做针对性的优化。
性能分析
准备一段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>worker performance optimization</title>
</head>
<body>
<script>
function a() {
b();
}
function b() {
let total = 0;
for(let i = 0; i< 10*10000*10000; i++) {
total += i;
}
console.log('b:', total);
}
a();
</script>
<script>
function c() {
d();
}
function d() {
let total = 0;
for(let i = 0; i< 1*10000*10000; i++) {
total += i;
}
console.log('c:', total);
}
c();
</script>
</body>
</html>
首先用无痕模式打开 chrome，无痕模式下没有插件，分析性能不会受插件影响。
Performance 工具最重要的是分析主线程的 Event Loop，分析每个 Task 的耗时、调用栈等信息。
每个函数的耗时也都显示在左侧，右侧有源码地址，点击就可以跳到 Sources 对应的代码。
在 Performance 中也可以看到 Task 被标红了，下面的 summary 面板也显示了长任务（ long task ）的警告。
渲染和 JS 执行都在主线程，在一个 Event Loop 中，会相互阻塞，如果 JS 有长时间执行的 Task，就会阻塞渲染，导致页面卡顿。所以，性能分析主要的目的是找到 long task，之后消除它。
深入学习Performance 理解Event Loop
网页加载后，浏览器会解析 html、执行 js、渲染 css这些工作都是在 Event Loop 里完成的，理解了 Event Loop 就能理解网页的运行流程
展示的信息中很多种颜色，这些颜色代表着不同的含义：
灰色代表是宏任务，蓝色的是 html 的 parse；橙色的是浏览器=内部的 JS；紫色是样式的 reflow、repaint；绿色的部分就是渲染：
这就是网页里怎么执行渲染的？
所以说 requestAnimationFrame 的回调是在渲染前执行的，rAF 和渲染构成了一个宏任务。
为什么有的时候会掉帧、卡顿，就是因为阻塞的渲染的宏任务的执行。
在 rAF 调用栈末尾有个 requestAnimationFrame 的调用，是橙色的，也就是浏览器的 api，会把下次 rAF 的回调加入 Event Loop
渲染任务之间的没有执行 task 的时间就是空闲，或者执行完了任务，离渲染任务执行还有一段时间的时候。可以通过参数 deadline 的 timeRemaining 的 api 来获取剩余的空闲时间。
Performance 工具能够看到网页的 Event Loop 是怎么运行的，不同的颜色代表不同的含义：
- 灰色：task
- 橙色：浏览器内部的 JS
- 蓝色：html parse
- 紫色：reflow、repaint
- 绿色：渲染
微任务执行
有的task包含run microtasks，也就是run microtask是task的一部分。 这就是这个网页的Event Loop的执行过程。
总结
Performance 工具能够看到网页的 Event Loop 是怎么运行的，不同的颜色代表不同的含义：
- 灰色：task
- 橙色：浏览器内部的 JS
- 蓝色：html parse
- 紫色：reflow、repaint
- 绿色：渲染
- 其余的颜色都是用户自己的 JS。
- 宽度代表了执行的时间，超过 50ms 就被任务是长任务，需要优化
- 长度代表了调用栈深度，一般特别长的都是有递归在
