JavaScript内核与高级编程之：`JavaScript`的`Chrome DevTools`：如何利用 `Performance` 面板进行性能分析。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

晚上好，各位未来架构师们！今天咱们不聊情怀，直接上硬菜，聊聊怎么用Chrome DevTools里的Performance面板，像福尔摩斯一样揪出JS代码里的性能瓶颈。

一、准备工作：磨刀不误砍柴工

想要玩转Performance面板，首先得把它请出来。在Chrome浏览器里，按下 F12 (Windows/Linux) 或 Cmd + Option + I (Mac)，或者右键点击网页选择“检查”，然后切换到 “Performance” 标签页。

二、Performance面板：结构总览

Performance面板大致分为几个区域，我们先来认识一下：

Controls (控制区)： 这里有录制按钮、设置按钮，以及内存垃圾回收按钮。
Overview (概览区)： 显示CPU、JS堆内存使用情况的概览图。
Flame Chart (火焰图): 最重要的部分！按时间顺序展示了函数调用栈。越宽的火焰，意味着该函数占用的时间越长，很可能就是性能瓶颈。
Summary (汇总区): 对性能分析结果进行汇总，告诉你时间都花在了哪里。
Bottom-Up/Call Tree/Event Log (自底向上/调用树/事件日志): 提供不同的视角来分析性能数据。

三、开始录制：捕捉性能幽灵

选择录制模式: Performance面板提供两种录制模式：
- 直接录制: 点击左上角的圆形录制按钮（Record），然后执行你想分析的操作，再点击停止录制。
- 带页面重载录制: 点击录制按钮旁边的箭头，选择 "Reload and profile"，它会自动重载页面并开始录制，适合分析页面加载时的性能。
模拟低性能环境 (可选): 在 "CPU" 下拉菜单里，你可以选择 "CPU Throttling" 来模拟低性能的CPU，这样更容易发现性能问题。例如，选择 "4x slowdown" 可以模拟CPU速度降低4倍的情况。
录制你的操作: 点击录制按钮后，执行你想要分析的JS代码。比如，点击按钮触发一个复杂的计算，或者滚动一个包含大量图片的列表。
停止录制: 操作完成后，点击停止录制按钮。Performance面板会开始分析录制到的数据，并在火焰图和其他区域显示结果。

四、火焰图：性能瓶颈的藏身之处

火焰图是理解代码执行流程和找出性能瓶颈的关键。

横轴： 时间线，从左到右表示时间的流逝。
纵轴： 函数调用栈。一个函数调用另一个函数，就会在火焰图上显示为堆叠的方块。

如何解读火焰图？

宽而高的火焰： 通常表示耗时较长的函数调用，可能是性能瓶颈。
红色火焰： 表示JavaScript代码执行时间过长，需要优化。
紫色火焰： 表示渲染相关的操作，例如重绘和重排。
绿色火焰： 表示垃圾回收（Garbage Collection）。频繁的GC也可能影响性能。
黄色火焰： 表示解析HTML、CSS等操作。

五、案例实战：优化一个慢查询

假设我们有一个简单的页面，点击按钮后会执行一个复杂的数组过滤操作，导致页面卡顿。

<!DOCTYPE html>
<html>
<head>
  <title>Performance Test</title>
</head>
<body>
  <button id="myButton">Run Slow Query</button>
  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      const data = Array.from({ length: 100000 }, (_, i) => ({ id: i, value: Math.random() }));
      const startTime = performance.now();
      const result = data.filter(item => item.value > 0.9);
      const endTime = performance.now();
      console.log(`Query took ${endTime - startTime} ms, found ${result.length} items.`);
    });
  </script>
</body>
</html>

录制性能: 打开Performance面板，点击录制按钮，然后点击页面上的 "Run Slow Query" 按钮，最后停止录制。
分析火焰图: 在火焰图里找到 "filter" 函数的调用，你会发现它占据了大量的时间。这说明 filter 操作就是性能瓶颈。
优化代码: filter 本身没有问题，但当数据量非常大的时候，每次都遍历整个数组效率就比较低。我们可以考虑使用 for 循环，提前退出：

document.getElementById('myButton').addEventListener('click', function() {
  const data = Array.from({ length: 100000 }, (_, i) => ({ id: i, value: Math.random() }));
  const startTime = performance.now();
  const result = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].value > 0.9) {
      result.push(data[i]);
    }
  }
  const endTime = performance.now();
  console.log(`Query took ${endTime - startTime} ms, found ${result.length} items.`);
});

或者更进一步，如果我们的数据是排序好的，可以使用二分查找：

function binarySearch(arr, target) {
  let left = 0;
  let right = arr.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid].value === target) {
      return mid;
    } else if (arr[mid].value < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  return -1;
}

document.getElementById('myButton').addEventListener('click', function() {
  const data = Array.from({ length: 100000 }, (_, i) => ({ id: i, value: Math.random() })).sort((a, b) => a.value - b.value); //先排序
  const startTime = performance.now();
  const result = [];
  let index = binarySearch(data, 0.9);
  if(index != -1){
    for (let i = index; i < data.length; i++) {
        if (data[i].value > 0.9) {
            result.push(data[i]);
        }
    }
  }
  const endTime = performance.now();
  console.log(`Query took ${endTime - startTime} ms, found ${result.length} items.`);
});

再次录制: 重新录制优化后的代码，你会发现 filter 函数的火焰变窄了，运行时间也大大缩短了。

六、Summary & Bottom-Up/Call Tree/Event Log：多角度分析

Summary (汇总): 显示了各种活动的占比，例如 Scripting (JavaScript执行)、Rendering (渲染)、Painting (绘制) 等。通过这个面板，你可以快速了解性能瓶颈主要集中在哪个方面。
Bottom-Up (自底向上): 按照函数占用的总时间排序，可以快速找到最耗时的函数。
Call Tree (调用树): 显示函数调用关系，可以帮助你理解代码的执行流程。
Event Log (事件日志): 记录了所有发生的事件，例如函数调用、垃圾回收、渲染事件等。

七、常见性能问题及优化策略

问题	原因	优化策略
长时间运行的JavaScript代码	复杂的计算、大量的DOM操作、低效的算法	优化算法、减少DOM操作、使用Web Workers进行后台计算、代码拆分（Code Splitting）
频繁的垃圾回收 (GC)	大量创建临时对象、未释放的资源	减少临时对象创建、及时释放资源、使用对象池、避免内存泄漏
渲染阻塞 (Rendering Blocking)	长时间运行的JavaScript代码阻塞了渲染线程、复杂的CSS选择器、大量的DOM操作	优化JavaScript代码、使用CSS Containment、Virtual DOM、减少DOM操作、使用requestAnimationFrame
重绘 (Repaint) 和重排 (Reflow/Layout)	修改DOM结构、修改CSS样式、强制同步布局	批量更新DOM、避免频繁修改样式、使用CSS Transforms进行动画、使用文档片段 (DocumentFragment)
图片加载慢	图片太大、没有压缩、没有使用懒加载	压缩图片、使用WebP格式、使用懒加载、使用CDN
网络请求慢	请求资源过多、请求头过大、没有使用缓存	合并请求、压缩资源、使用缓存、使用CDN、优化请求头

八、高级技巧：深入挖掘性能黑洞

User Timing API: 使用 performance.mark() 和 performance.measure() API可以精确测量代码块的执行时间，并将结果显示在Performance面板中。

performance.mark('start');
// 要测试的代码
performance.mark('end');
performance.measure('myOperation', 'start', 'end');

console.time() 和 console.timeEnd(): 类似于User Timing API，但更简单易用。

console.time('myTimer');
// 要测试的代码
console.timeEnd('myTimer');

内存分析: Performance面板也可以用来分析内存泄漏。点击内存垃圾回收按钮，然后观察内存使用情况。如果内存持续增长，可能存在内存泄漏。
Long Tasks: Performance面板会高亮显示超过50ms的长任务 (Long Tasks)。这些任务会阻塞主线程，导致页面卡顿。

九、总结：从入门到精通，不断实践

Chrome DevTools的Performance面板是前端性能优化的利器。通过学习和实践，你可以深入了解代码的执行流程，找出性能瓶颈，并采取相应的优化策略。记住，优化是一个持续的过程，没有银弹，需要不断地分析和改进。

今天的分享就到这里，希望大家都能成为性能优化大师！记住，代码写的漂亮很重要，但是跑得快才是王道！祝大家晚安！

发表回复 取消回复

发表回复取消回复