前端性能优化-性能检测指标与工具

前言

本节总结了性能优化的指标和工具。

性能指标

关键渲染路径

关键渲染路径（Critical Rendering Path）是优化网页性能的关键一步。关键渲染路径是浏览器渲染页面所需的关键步骤，包括下载、解析和渲染HTML、CSS以及JavaScript。

TTFB（Time to First Byte）

TTFB 是指从浏览器发起请求到接收到服务器返回的第一个字节所经历的时间。

TTFB 直接关系到服务器的响应速度，包括处理请求和生成页面的时间。较低的 TTFB 通常表示服务器响应迅速，有助于快速渲染页面。

更多可以参考： https://web.dev/articles/ttfb

FCP（First Contentful Paint）

FCP 标志着用户首次看到页面上有意义内容的时间点，即浏览器首次渲染页面的一部分。

FCP 是衡量用户感知的页面加载速度的重要指标。较快的 FCP 意味着用户更早地看到页面内容，提升了用户体验。

Time to Interactive (TTI)

TTI 是用户可以与页面上的元素进行交互的时间点，即页面变得可操作的时间。

TTI 衡量页面何时变得足够交互，对于确保用户可以快速与页面进行互动至关重要。较早的 TTI 有助于提升用户体验。

Time to Speed Index (TSI)

TSI是从页面开始加载到页面完全渲染的平均时间。

RAIL 测量模型

RAIL 是一种性能测量模型，它包括以下四个关键指标：

• Response（响应）：在 100 毫秒以内响应用户输入。
• Animation（动画）：在每秒 60 帧的时间内完成动画渲染。
• Idle（空闲）： 利用空闲时间完成非关键任务。
• Load（加载）：在 5 秒以内完成页面加载。

参考

• https://web.dev/articles/user-centric-performance-metrics
• https://keenwon.com/web-vitals

本文首发于个人博客前端开发笔记，由于笔者能力有限，文章难免有疏漏之处，欢迎指正