前面说的都是页面的性能测试方法，但其实页面上还包含了大量的组件。比如：输入框、滚动条、日历等。而组件也会存在性能问题，应该如何测试组件的性能呢？

• 使用开发者中的性能模块录制
  

• 停止录制后会自动生成报告，对加载、执行脚本、渲染、绘制的耗时求和即可。这个时间就反映组件的性能。
  
  当前对组件的耗时没有明确的标准，以使用流畅、无卡顿感为主，如果有性能优化，可用该方法提供性能优化数据。

• 制定合适的测试策略

   需要重点关注的页面性能：
   用户访问量高的页面；
   用户点击量高的功能；
   网站一级/部分二级重要的页面；
   监控发现耗时久的页面/功能；
   用户反馈卡顿的页面/功能
   需要注意：
   配置一致：选用与客户配置一致或相似的设备（操作系统、系统版本、系统设置、浏览器、浏览器版本等）进行测试；
   数据一致：每次测试要用相同的测试数据；
   操作一致：每次的操作场景要保持一致；
   网络一致：保持网络稳定，每次测试的网络（WIFI、3G、4G、5G）和网速保持一致；
                                      lighthouse工具When opening Chrome DevTools, you will see this highlighted tab in the above image. What is it? It’s Lighthouse, an open-source automated tool for improving the quality of webpages. 打开Chro...
                                      Lighthouse Testcafe-NPM套餐
   是Google开发的工具，用于分析Web应用程序和网页，收集现代性能指标和对开发人员最佳实践的见解。
   该软件包的目的是以连接模式和自动（编程）方式为几页生成性能报告。
  您可能必须在项目中将testcafe-lighthouse库添加为依赖项（或dev-dependency）
  $ yarn add -D testcafe-lighthouse
  $ npm install --save-dev testcafe-lighthouse
  在你的代码中
  安装完成后，您可以在代码中使用testcafe-lighthouse来审核当前页面。
   步骤1：在测试代​​码中，您需要导入testcafe-lighthouse并为灯塔扫描分配一个cdpPort 。 您可以选择任何未分配的端口。
   import { testcafeAud
                                      Lighthouse是一个开源的自动化性能测试工具，我们可以使用该功能检测我们的页面存在那些性能方面的问题，并会生成一个详细的性能报告来帮助我们来优化页面。
                                      例如，FMP（First Meaningful Paint）的原始值是从页面初始化开始到主要内容渲染成功的耗时，根据真实站点的数据，顶级性能的站点的 FMP 值约为 1220ms，这个值会被映射成 Lighthouse 的 99 分。除了上述基准指标项之外，为了让 PWA 的体验更加完美，还有一些 Lighthouse 未实现检查的进阶指标，也就是可以作为示范性参考的 PWA 的指标，比如用户体验、缓存、推送通知等等。指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。
  1、谷歌插件lighthouse的基本介绍
  Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单，我们只需要提供一个要测评的网址，它将针对此页面运行一系列的测试，然后生成一个有关页面性能的报告。通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。
  2、lighthouse使用
  H5商城在使用过程中，发现首屏的加载速度比较慢，网络情况良好的情况下。在一些中等配置的手机上，页面加载比较卡顿，以下为对项目首屏问题调研，及相关优化点的整理。
  基于chrome中的lighthouse
  性能评测主要的用到的工具为，chrome中的lighthouse。在Performance面板中，分数为62分，略微偏低。
  基于以上的报告截图基本可以看到主要的问题都在于LCP和FCP，经过查看报告，针对相关的功能进行了优化。
  1、优化运营位图片
  在报告中，发现有很多的图片没
                                      原文地址：Lighthouse 的使用与 Google 的移动端最佳实践
  Lighthouse是一个 Google 开源的自动化工具，主要用于改进网络应用（移动端）的质量。目前测试项包括页面性能、PWA、可访问性（无障碍）、最佳实践、SEO。Lighthouse 会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为 Google 的网页最佳实践。
  运行 Light...
                                      预加载 CSS 中通过@font-face定义的字体资源可确保在下载 CSS 文件之前获取它们。需要注意的是添加属性，否则预加载的字体将被提取两次。长任务是长时间占用主线程的 JS 代码，它会导致页面无法及时响及用户输入。在加载页面时，长任务可能会占用主线程而导致事件监听与处理程序较晚注册，从而导致页面看起来已经准备就绪，但用户点击不起作用。RAIL 模型建议我们在 50 毫秒内处理用户输入事件，确保在 100 毫秒内做出可见响应会使得用户感觉交互是及时的。所以超过 50 毫秒的任务都属于长任务。
                                      前言最近做性能检测工具，很多知识点不清楚，打算查缺补漏，补一补。接下来从官方提供的性能检测工具Lighthouse(灯塔)开始我们的学习，简单介绍了下Lighthouse的一些点。阅读完本...
                                      Web 性能包含了服务器请求和响应、加载、执行脚本、渲染、布局和绘制每个像素到屏幕上。本文以 Lighthouse Report 来深入学习 web性能指标及性能优化点
                                      对于前端开发人员来说，除了实现页面功能外，那就是页面的性能响应问题也要关注。同样对于测试人员在进行性能测试时，也要关注前端页面的性能指标。测试前端性能市面上可以用到的工具也比较多，比如可以用 HttpWatch 进行页面的抓取与分析，或者也可以使用抓包工具如 Fiddler 抓接口的形式进行分析。本篇将介绍一款前端性能分析工具，即集成在 Chrome 开发者工具-Lighthouse。Lighthouse 用于分析 Web 应用程序和网页，收集性能指标和对开发人员最佳实践的见解。架构图：github地址：h