使用Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
发布网友
发布时间：2024-08-20 09:59
共1个回答
热心网友
时间：2024-08-21 15:30
在着手优化网站加载性能时，审计是第一步，它有两个关键功能。本文将以一个网站应用为例，演示如何使用Chrome开发者工具中的Lighthouse功能进行性能分析。
点击Tony，然后点击remix this，生成一个随机名称的项目。接着，点击show按钮，打开新的标签页。按F12打开Chrome开发者工具，切换到Lighthouse标签页。
仅勾选Performance和Mobile选项，然后点击generate report开始审计。确保在隐身模式下生成报告，以避免Chrome扩展的影响。稍后，报告生成完毕。
报告顶部的数字代表网站的整体性能得分。每次对代码进行修改，这个数字都应随之上升。得分越高，性能越好。
指标部分提供对网站性能的量化评估，每个指标揭示了性能的不同方面。例如，First Contentful Paint显示内容首次绘制到屏幕的时间，这是用户感知页面加载的重要标志；Time To Interactive则表示页面准备就绪以响应用户交互的时间点。
点击learn more按钮可深入了解每个选项。Passed audits部分列出应用通过的审计项目。Diagnostics部分则揭示了应用存在的可改进之处。
更多Jerry的原创文章，尽在："汪子熙"
