理想的MEGA，李想选择了流量最大的玩法
06-21
最近还在研究大型项目，大型项目遇到的最常见的问题就是性能问题。一般来说，当我们遇到性能瓶颈时，我们就会开始进行相应的分析。
除了业务本身的特点之外，还可以通过分析的方向，借助一些工具来发现共性问题。下面就和本文一起来学习一下，前端性能分析是如何进行的吧~前端性能分析工具（Chrome DevTools） 一般来说，前端性能分析通常可以从时间和空间两个角度进行： 时间：常见的耗时，比如页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等 空间：资源占用，包括CPU占用、内存占用、本地缓存占用等。
那么，我们来看看一些可以借用和使用的常用工具。由于我们的网页基本上运行在浏览器中，所以大部分工具基本上都是浏览器本身提供的，第一个当然是Chrome DevTools。
在本文中，我们主要关注 Chrome DevTools。 LighthouseLighthouse 以前是 Chrome DevTools 面板中的 Audits。
在 Chrome 60 之前的版本中，该面板仅包含两个测量类别：网络使用情况和页面性能。从 Chrome 60 开始，审核面板已被 Lighthouse 的集成版本取代。
在最新版本的Chrome中，需要单独安装Lighthouse扩展才能使用，也可以通过脚本使用。架构 Lighthouse 以下架构是 Lighthouse 的组件： 驱动程序：与 Chrome 调试协议交互的接口。
Gatherers：使用驱动程序收集页面信息。收集器的输出称为工件审核。
)：将工件作为输入，审核者针对该工件运行测试，然后将结果分配为通过/失败/分数 报告：将审核结果分组到面向用户的报告（例如最佳实践）中，用于该部分 应用加权求和并得出分数 主要功能 Lighthouse 在一系列测试下运行网页，例如不同大小的设备和不同的网络速度。它还检查页面是否符合可访问性指南，例如颜色对比度和 ARIA 最佳实践。
在相对较短的时间内，Lighthouse 可以给出这样一个报告（报告可以生成为 JSON 或 HTML）： Lighthouse 架构 该报告从 5 个方面分析页面：性能、可访问性、最佳实践、搜索引擎优化和 PWA。性能方面，会给出一些常见的耗时统计。
此外，还会给出一些详细的优化方向。如果你想在短时间内对你的网站进行更全面的评估，你可以使用Lighthouse来跑分并确定大体的优化方向。
性能面板 性能面板还有一个前身，称为时间轴。该面板用于记录和分析运行时性能，即页面运行时（而不是加载时）的性能。
Performance面板的功能很多，具体的分析可以另文讨论。这里简单说一下使用步骤： 以隐身模式打开Chrome。
隐身模式可确保 Chrome 在干净的状态下运行，例如可能对性能测量产生影响的浏览器扩展。在DevTools中，单击“Performance”选项卡并执行一些基本配置（更多信息请参阅官方说明）。
根据提示单击“录制”即可开始录制。完成相应操作后，单击“停止”。
DevTools 在页面运行时捕获性能指标。停止记录后，DevTools 会处理数据并在“性能”面板上显示结果。
关于如何使用Performance作为主要功能的文章有很多。你可以通过网上搜索找到它。
一般来说，以下是要使用的主要功能： 查看 FPS 图表：当您看到 FPS 上方有红色条时，这意味着帧速率已经下降得太低，可能会损害用户体验。一般来说，绿条越高，FPS 越高。
查看 CPU 图表：CPU 图表位于 FPS 图表下方。 CPU 图表的颜色与性能板底部的“摘要”选项卡相对应。
查看火焰图：火焰图直观地代表了内部CPU 分析。横轴是时间，纵轴是调用指针，调用栈顶部的函数在底部。
。启用JS分析器后，火焰图会显示每个调用的JavaScript函数，可以用来分析特定的函数。
View Buttom-up：这个视图可以看到某些函数对性能影响最大，并且可以检查这些函数的调用路径的具体要求。关于如何定位某些性能瓶颈，可以参考官方文档系列文章，这里不再详细介绍。
Performance Monitor 打开 Chrome 控制台后，按组合键 ctrl + p（Mac 快捷键为 command + p），然后输入 > Show Performance Monitor 打开性能监视器。主要监控指标包括： CPU使用率：CPU使用情况 JS头大小：JS内存使用大小 DOM Nodes：内存中挂载的DOM节点数量 JS事件监听器：事件监听器数量...：大多数情况下其他等等案例中，我们在进行性能优化时，使用上面的一些工具就足以确定大体的优化方向。
更多细节和案例在此不再赘述。除了前端性能监控的具体性能分析和定位之外，我们经常需要对业务进行性能监控。
前端性能监控包括两种方法：综合监控（Synthetic Monitoring，SYN）和真实用户监控（Real User Monitoring，RUM）。综合监控 综合监控就是在模拟场景下提交一个需要性能审计的页面，通过一系列的工具和规则来运行你的页面，提取一些性能指标，并得出审计报告。
比如上面介绍的Lighthouse就是综合监控。综合监控的使用场景并不多。
一般可能会出现在开发和测试过程中，比如结合管道运行性能报告、定位性能问题时分析本地运行的一些简单任务等。这种方法的优点很明显：可以收集更丰富的数据指标，比如结合Chrome调试协议获取的数据比较成熟的解决方案和工具，实现成本低，不影响真实用户的性能体验。
真实用户监控 真实用户监控是用户访问我们的页面后，会产生各种性能指标。当用户访问结束时，我们将这些性能指标上传到我们的日志服务器，进行数据提取、清洗和处理，最后显示在我们的监控平台上。
当我们提到前端监控时，大多数都包括真实用户监控。一些常见的性能监控包括加载时间、DOM渲染时间、界面耗时统计等。
对于页面加载过程，可以看到它被定义为很多阶段： RUM性能模型。我们要做的就是尽可能地进行管理、计算、收集、报告。
此过程通常需要使用性能时间线 API。将需要的数据发送到服务器，然后对数据进行处理，最后通过可视化等方法进行监控。
因此，真实的用户监控往往需要结合业务本身的前后端架构设计来构建。它的优点也比较容易理解：完全还原真实场景，减去模拟成本。
数据样本足以抹平个体差异。收集到的数据可以用于更多场景。
分析与优化 与综合监控相比，真实用户监控在某些场景（例如CPU占用率、内存占用率较高）无法获得更多的性能分析数据，因此常常作为优化效果的参考。在这些情况下，具体的分析和定位可能还是要依靠综合监测。
然而，真实用户监控也有其自身的优势。例如TCP、DNS连接耗时过长，各种环境下的一些运行耗时问题很难通过综合监控发现。
性能分析自动化 在开发过程中，我们经常需要进行性能分析。前端性能分析的入门成本并不低。
除了基本的页面加载时间和网络时间之外，更具体的定位往往需要结合前面介绍的Performance面板、FPS、CPU、火焰图等进行分析。如果这个领域想要往自动化方向发展，我们可以做什么？使用Lighthouse 前面也介绍过Lighthouse，它提供了使用的脚本。
因此，我们可以通过自动化任务运行脚本，使用Lighthouse运行分析报告，通过比较过去的数据，在功能变更、性能优化等场景中进行性能回归。使用Lighthouse的优点是开发成本低。
您只需要根据官方的配置进行调整并获取一些您需要的数据，就可以快速接入Lighthouse更全面的性能分析能力。不过，由于 Lighthouse 也是基于 CDP（Chrome DevTools Protocol）的，所以除了降低实现成本之外，它也会缺少一些 CDP 所缺乏的功能。
Chrome DevTools 协议 Chrome DevTools 协议允许第三方检测、检查、调试、分析以及更多基于 Chrome 的 Web 应用程序。通过这个协议，我们可以开发自己的工具来获取Chrome数据。
了解Chrome DevTools协议 Chrome DevTools协议基于WebSocket，它使用WebSocket建立连接DevTools和浏览器内核的快速数据通道。我们使用的 Chrome DevTools 实际上是一个 Web 应用程序。
当我们使用DevTools时，浏览器内核Chromium本身将充当服务器。我们看到的浏览器调试工具界面是通过Websocket与Chromium通信的。
设置过程如下：DevTools 将作为 Web 应用程序，Chromium 将作为服务器提供连接。通过 HTTP 提取 HTML、JavaScript 和 CSS 文件。
加载资源后，DevTools 会建立与浏览器的 Websocket 连接并开始交换 JSON 消息。当我们通过 DevTools 从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容时，也会使用相同的协议。
当 Chromium 使用 --remote-debugging-port=0 标志启动时，它会启动 Chrome DevTools 协议服务器。 Chrome DevTools 协议域划分 Chrome DevTools 协议具有用于与浏览器的许多不同部分（例如页面、服务工作线程和扩展）进行交互的 API。
该协议将不同的操作划分为不同的域，每个域负责不同的功能模块。例如，DOM、Debugger、Network、Console 和 Performance 可以理解为 DevTools 中不同的功能模块。
利用该协议，我们可以：获取JS的Runtime数据，常用的如window.performance、window.chrome.loadTimes()等，获取Network和Performance数据，并进行自动性能分析。使用Puppeteer的CDPSession，与浏览器的协议通信将会改变。
让事情变得更简单 性能相关领域 本文讲的是性能分析，所以这里我们只关注性能相关领域。 1.性能。
Performance字段中的Performance.getMetrics()可以获取到的运行时性能指标包括： Timestamp：测量样本的时间戳 Documents：页面中的文档数 Frames：页面中的帧数 JSEventListeners：页面中事件的数量 Nodes：页面中 DOM 节点的数量 LayoutCount：全部或部分页面布局的总数 RecalcStyleCount：重新计算的页面样式总数 LayoutDuration：所有页面布局的总持续时间 RecalcStyleDuration：重新计算的所有页面样式的总持续时间ScriptDuration：JavaScript 执行的持续时间 TaskDuration：浏览器执行的所有任务的总持续时间 JSHeapUsedSize：使用的 JavaScript 堆栈的大小 JSHeapTotalSize：JavaScript 堆栈的总大小 2. 跟踪。 Tracing 字段获取页面加载的 DevTools 性能跟踪。
Tracing.start 和 Tracing.stop 可用于创建可在 Chrome DevTools 或时间线查看器中打开的跟踪文件。我们可以看到生成的JSON文件是这样的： 我们可以将这样的JSON文件扔到DevTools Timeline Viewer中，看到对应的时间线和火焰图： 3. Runtime。
运行时域通过远程评估和镜像对象公开 JavaScript 运行时。 JavaScript 堆栈的使用可以通过 Runtime.getHeapUsage 获得，通过 Runtime.evaluate 计算全局对象的表达式，以及 JavaScript 堆栈的迭代并通过 Runtime.queryObjects 查找具有给定原型的所有对象（可用于计算表达式）原型链中某处的相同原型）。
对所有对象进行原型设计，测量 JavaScript 内存泄漏）。除了上面介绍的之外，还有Network可以分析网络相关的性能，以及其他各种可能涉及到DOM节点、JS执行等的数据分析，可能需要你自己多研究一下。
自动化性能分析通过使用Chrome DevTools协议，我们可以获得DevTools提供的大量数据，包括网络数据、性能数据和运行时数据。关于如何使用这个协议，其实有很多高手针对这个协议封装了不同语言的库，包括Node.js、Python、Java等，可以在awesome-chrome-devtools中找到根据需要进行项目。
至于我们能得到什么样的数据，能达到什么程度的自动化，我在这篇文章里就不描述了。以后有机会我会在另一篇文章里详细讲。
参考你必须知道的Chrome DevTool新功能，前端性能分析工具——Chrome性能分析&性能监控 chrome devtools协议——Web性能自动化实践介绍 Chrome DevTools协议 Web性能菜谱With Puppeteer 结论 相关文章不多前端性能分析。由于性能分析场景本身与业务特点结合紧密，因此可供借鉴的内容和统一的解决方案并不多。
性能监控、自动化等方向的介绍相对较少。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-21
06-17
06-06
06-17
06-18
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用