性能分析 - Githubissues

性能分析：页面白屏过久、操作卡顿

通常前端性能分析两个角度：时间和空间
- 时间：常见耗时：页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等
- 空间资源占用，包括CPU占用、内存占用、本地缓存占用等
Chrome DevTools
- lighthouse面板：该面板用于自动化分析网站加载时，存在的性能问题，并提出推荐的优化方案
- performance面板：该面板用于记录、分析网站在运行时的性能数据
lighthouse：前身是Chrome DevTools的Audits。优势在于自动化、成本低，会收集网站加载时的性能数据，并根据最佳实践给每一项进行打分，同时针对最低分给出对应的优化方案
- 三个主要功能
  - 在一系列的测试下运行网站，比如不同尺寸的设备和不同的网络速度
  - 检查页面对辅助功能指南的一致性，例如颜色对比度、ARIA最佳实践
  - 生成网页运行报告(网页性能、常见统计耗时、网页优化方向)
  - 报告五个方面：性能、无障碍、最佳做法、SEO、PWA

   - 四个：驱动（Driver）、收集器（Gatherers）、审查器（Audits）和报告（Report）
   -  过程：
       - 当网站页面开始加载之后，Lighthouse 会使用驱动（Driver）通过 Chrome DevTools Protocol 获取页面的性能数据；
       - 驱动（Driver）获取到的数据会被收集器（Gatherers）进行收集，并输出被称为 Artifact 的结果；
       - Artifact 会作为审查器（Audits）的输入，审查器会对其运行测试，然后分配通过/失败/得分的结果；
       - 审查的结果给到报告（Report），对各个部分进行加权和统计得到面向用户的报告（如最佳实践），并将该报告渲染给用户。

（但是lighthouse不能用于运行时的性能分析，无法给到最佳实践以外的数据/建议）

performance:前身 Timeline面板，常用在页面运行时使用，比如用户点击操作之后的逻辑执行、页面滚动时的页面渲染情况 (对页面进行录制最好打开隐身模式确保Chrome不被扩展插件影响)
Monitor：对CPU占用率、内存使用大小、挂在Dom数···
面板可以看到详细的性能数据报考函数调用的情况、各类事件的顺序和耗时、CPU占用情况···我们可以看这些定位性能问题（用performanc进行分析，分析过程比较繁琐。上手成本不低，除了页面加载耗时、网络耗时。定位具体问题需要看FPS、CPU占用以及火焰图）
- 性能分析自动化
- 性能分析处理不是一蹴而就的事情需要不断分析、优化、处理。需要自动化
- 方案
  - 通过集成测试、自动化测试等技术让项目运行在浏览器中
  - 根据脚本本来运行相应的功能
  - 需要过去网页加载和运行的性能数据
ighouse自动化：通过自动化任务跑脚本的方式，使用lighthouse跑分析报告。通过对比以往的数据来进行功能变更、性能优化等场景的性能回归（成本低）
Chrome-Dev-Protocol：允许第三方对Chrome网站进行检查、调试、分析等操作。可以自行开发工具通过Chrome-Dev-Protocol获取Chrome中网站数据
其实就是一个WEB应用。当我们打开 Chrome DevTools 的时候，浏览器内核 Chromium 本身会作为一个服务端，它会通过 WebSocket 与 Chrome DevTools 进行通信
过程如下：
- DevTools 将作为客户端，与作为服务端的 Chromium 建立连接；
- DevTools 通过 HTTP 获取 HTML、JavaScript 和 CSS 资源，并进行加载；
- 资源加载后，DevTools 会建立与浏览器的 WebSocket 连接；
- Chrome DevTools Protocol 基于 WebSocket，它利用 WebSocket 建立连接 DevTools 和浏览器内核的快速数据通道。
- Chrome-Dev-Protocol 不管是win、mac、手机端调试都用的该协议。提供的内容：具有与浏览器不同交互(页面、SW、扩展程序)的API。
该协议把不同操作分为不同的域（就是Devtools中的不同功能模块）
具体几个：
- Performance域：可获取运行时性能指标，包括页面 DOM 节点数量、Javascript 栈数量、页面布局耗时等。
- Tracing域：可获取页面加载的 DevTools 性能跟踪，可以使用Tracing.start和Tracing.stop创建可在 Chrome DevTools 或时间轴查看器中打开的跟踪文件。
- Runtime域：通过远程评估和镜像对象暴露 JavaScript 的运行时，可以获取 JavaScript 栈的使用情况。
- Network域：可以分析网络相关的性能。
- 其他涉及 DOM 节点、JS 执行等相关数据的域。
通过使用Chrome-Dev-Protocol 我们可以拿到很多数据包括网络数据、性能数据（JS Runtime像window.performance、window.chrome.loadTimes()）
如何使用协议：
- 这个协议封装出不同语言的库，包括 Node.js、Python、Java 等，可以在awesome-chrome-devtools这个项目中找到
- Puppeter的CDPSession（封装了Chrome-Dev-Protocol 能力）
Chrome-Dev-Protocol可以模拟浏览器环境通过一系列工具、规则运行你的页面，最后最后的得到审计报告。那么也可以根据业务的需要对这些数据进行自动化的分析，结合前端工程化在项目上线前进行自动化任务的执行、检测、生成对比报告等，实现自动化性能监控

laclys / Front-End_practice

性能分析 #150