JS `Lighthouse` `User Flows`：测量复杂用户交互路径的性能

各位观众老爷，大家好！今天咱不聊风花雪月，就来聊聊怎么用 Chrome Lighthouse 的 User Flows 功能，把你们网站里那些弯弯绕绕的用户操作路径给扒个精光，看看性能到底有多拉胯。

开场白：为啥要关注用户交互路径的性能？

话说回来，咱们做网站，不能光想着首页加载速度快就行了。用户体验这玩意，就像谈恋爱，得一步一个脚印，方方面面都照顾到。想想看，用户好不容易被你的首页吸引进来，结果注册个账号卡成 PPT，或者购物车结算半天没反应，那他还不得扭头就走？

所以，衡量用户在网站上的关键交互路径的性能，比如注册、登录、搜索、下单等等，就显得尤为重要。这就像给你的网站做一次全面的体检，找出那些影响用户体验的瓶颈。

Lighthouse User Flows 是个啥？

Lighthouse User Flows 是 Chrome DevTools 里 Lighthouse 的一个扩展功能。它允许你录制用户在网站上的完整操作流程，然后 Lighthouse 会对这个流程进行性能分析，生成报告，告诉你哪些地方需要优化。

简而言之，它就像一个性能监控录像机，能帮你：

模拟真实用户操作： 告别手动测试的繁琐，录制一次，反复使用。
量化用户体验： 给你具体的性能指标，比如 Largest Contentful Paint (LCP)、First Input Delay (FID) 等等。
发现性能瓶颈： 找出导致页面卡顿、加载缓慢的原因。
持续监控性能： 集成到 CI/CD 流程中，确保每次代码更新不会引入性能问题。

User Flows 的两种模式：Navigation 和 Timespan

User Flows 有两种模式，分别是 Navigation 和 Timespan，它们适用于不同的场景。

Navigation： 顾名思义，这种模式主要关注页面之间的跳转性能。它会分析每次页面加载的速度，以及页面之间的切换体验。适合用于分析注册流程、登录流程、多页面表单等等。
Timespan： 这种模式主要关注一段时间内的性能表现。它会记录一段时间内的所有性能指标，包括 CPU 使用率、内存占用、JS 执行时间等等。适合用于分析单页应用 (SPA) 的复杂交互，比如拖拽、滚动、动画等等。

实战演练：用 Navigation 模式分析注册流程

咱们以一个简单的注册流程为例，来演示如何使用 Navigation 模式。假设我们的注册流程分为三个步骤：

填写用户名和密码。
填写个人信息。
提交注册。

步骤 1：打开 DevTools，选择 Lighthouse 面板

按下 F12 (或者 Cmd + Opt + I on macOS)，打开 Chrome DevTools，然后选择 Lighthouse 面板。

步骤 2：选择 User Flows，选择 Navigation 模式

在 Lighthouse 面板中，选择 "User Flows" 选项卡，然后选择 "Navigation" 模式。

步骤 3：开始录制

点击 "Start new user flow" 按钮，然后开始录制。

步骤 4：模拟用户操作

按照注册流程，依次填写用户名、密码、个人信息，然后点击提交按钮。

步骤 5：结束录制

注册成功后，点击 "End recording" 按钮，结束录制。

步骤 6：生成报告

点击 "Analyze user flow" 按钮，Lighthouse 就会开始分析你录制的操作流程，并生成一份详细的性能报告。

报告解读：从数据中发现问题

Lighthouse 生成的报告会包含很多信息，咱们重点关注以下几个指标：

Performance Score： 整体性能评分，越高越好。
First Contentful Paint (FCP)： 首次内容绘制时间，越短越好。
Largest Contentful Paint (LCP)： 最大内容绘制时间，越短越好。
Cumulative Layout Shift (CLS)： 累计布局偏移，越小越好。
Total Blocking Time (TBT)： 总阻塞时间，越短越好。

报告还会列出具体的性能问题，比如：

Avoid long main-thread tasks： 避免主线程任务过长，导致页面卡顿。
Reduce JavaScript execution time： 减少 JavaScript 执行时间，提高页面响应速度。
Serve static assets with an efficient cache policy： 使用高效的缓存策略，减少重复加载。
Optimize images： 优化图片，减少图片大小。

根据报告中的问题，咱们就可以针对性地进行优化，比如：

代码分割 (Code Splitting)： 将 JavaScript 代码分割成多个小块，按需加载。
懒加载 (Lazy Loading)： 将图片和视频等资源延迟加载，提高页面初始加载速度。
图片压缩 (Image Compression)： 使用工具压缩图片，减小图片大小。
缓存 (Caching)： 使用浏览器缓存和 CDN 缓存，减少重复加载。

代码示例：懒加载图片

懒加载是一种常见的性能优化技术，可以延迟加载页面上的图片，直到它们进入可视区域。

<img data-src="image.jpg" alt="Image" class="lazy">

const lazyImages = document.querySelectorAll('.lazy');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => {
  observer.observe(img);
});

实战演练：用 Timespan 模式分析 SPA 交互

咱们再以一个简单的 SPA 应用为例，来演示如何使用 Timespan 模式。假设我们的 SPA 应用有一个列表，用户可以点击列表项，查看详细信息。

步骤 1：打开 DevTools，选择 Lighthouse 面板

同上。

步骤 2：选择 User Flows，选择 Timespan 模式

在 Lighthouse 面板中，选择 "User Flows" 选项卡，然后选择 "Timespan" 模式。

步骤 3：开始录制

点击 "Start new user flow" 按钮，然后开始录制。

步骤 4：模拟用户操作

在 SPA 应用中，点击几个列表项，查看详细信息。

步骤 5：结束录制

操作完成后，点击 "End recording" 按钮，结束录制。

步骤 6：生成报告

点击 "Analyze user flow" 按钮，Lighthouse 就会开始分析你录制的操作流程，并生成一份详细的性能报告。

报告解读：关注 CPU 和内存

Timespan 模式的报告会重点关注 CPU 使用率、内存占用、JS 执行时间等指标。

CPU Usage： CPU 使用率越高，说明页面消耗的 CPU 资源越多。
Memory Usage： 内存占用越高，说明页面占用的内存资源越多。
JavaScript Execution Time： JavaScript 执行时间越长，说明页面执行的 JavaScript 代码越多。

如果 CPU 使用率过高，或者内存占用过高，说明你的 SPA 应用可能存在性能问题。常见的性能问题包括：

内存泄漏 (Memory Leak)： 页面不再使用的内存没有被释放，导致内存占用不断增加。
过度渲染 (Over-rendering)： 页面不必要的重新渲染，导致 CPU 使用率升高。
长任务 (Long Task)： 执行时间过长的 JavaScript 任务，导致页面卡顿。

代码示例：避免内存泄漏

内存泄漏是一种常见的性能问题，尤其是在 SPA 应用中。避免内存泄漏的关键是及时释放不再使用的资源。

// 错误示例：闭包导致内存泄漏
function createClosure() {
  let element = document.createElement('div');
  element.innerHTML = 'Hello, world!';
  document.body.appendChild(element);

  return function() {
    // element 变量被闭包引用，即使不再使用，也不会被释放
    console.log(element.innerHTML);
  };
}

const myClosure = createClosure();
myClosure();

// 正确示例：及时释放资源
function createClosure() {
  let element = document.createElement('div');
  element.innerHTML = 'Hello, world!';
  document.body.appendChild(element);

  const closure = function() {
    console.log(element.innerHTML);
  };

  // 及时释放 element 变量
  element = null;

  return closure;
}

const myClosure = createClosure();
myClosure();

进阶技巧：自定义分析

Lighthouse User Flows 还支持自定义分析，允许你添加自定义的性能指标和断言。

添加自定义指标： 你可以使用 LH.trace() 函数来添加自定义的性能指标。
添加自定义断言： 你可以使用 LH.assert() 函数来添加自定义的断言，验证页面是否符合预期。

集成到 CI/CD 流程

为了确保每次代码更新不会引入性能问题，你可以将 Lighthouse User Flows 集成到 CI/CD 流程中。

使用 Lighthouse CLI： 你可以使用 Lighthouse CLI 来自动化执行 Lighthouse User Flows。
使用 Lighthouse CI： 你可以使用 Lighthouse CI 来管理 Lighthouse 的配置和报告。

总结：性能优化永无止境

Lighthouse User Flows 是一个强大的性能分析工具，可以帮助你发现网站中的性能瓶颈，并进行针对性的优化。但是，性能优化是一个持续的过程，需要不断地学习和实践。记住，用户体验至上，让你的网站跑得更快，飞得更高！

表格总结：User Flows 模式对比

特性	Navigation	Timespan
适用场景	页面跳转、注册登录、多页面表单等	SPA 交互、拖拽、滚动、动画等
关注指标	LCP、FCP、CLS、TBT 等	CPU 使用率、内存占用、JS 执行时间等
优化重点	减少页面加载时间、优化页面切换体验	避免内存泄漏、减少过度渲染、优化长任务

最后，希望今天的分享能对大家有所帮助。祝大家写出高性能、高体验的网站！散会！

发表回复 取消回复

发表回复取消回复