输入URL之后按下回车会发生什么？我认为可以通过该面试题出现的流程来进行前端性能优化的阐述。

  1. 首先会经过DNS查询：做好DNS缓存、将资源分布到恰当的数量的主机

  2. 查询到IP之后会发送请求，减少http请求：合并文件、客户端缓存、css精灵图、图片用base64存、按需加载、

  3. 请求数据返回响应，缩短请求到响应时间和请求带宽：CDN缓存、压缩图片和文件、http2（多路复用、并行加载）

  4. 解析渲染html：模块延迟script中设置defer或者async、减少dom树或者cssom树嵌套过深、/放在前面、虚拟DOM、减少回流操作

测试性能工具及指标

开始性能优化之前，问一下下面几个问题：

  1. 性能指标是什么
  2. 衡量标准是什么
  3. 优化的原因是什么
  4. 提升点在哪里？实施方案是什么？（上面有提到）
  5. 计算收益成果，数据？效果？

衡量性能的模型：

RAIL 是一种以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解到按键操作（例如，点击、滚动、加载）中，帮助您为每个操作定义性能目标。RAIL 代表 Web 应用生命周期的四个不同方面：响应、动画、空闲和加载。

衡量指标

  1. FCP：白屏时间。首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，”内容”指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。
  2. TTI：页面可交互时间
  3. page load：页面完全加载时间，可以通过异步加载，webpack或者vite
  4. FPS：前端页面帧率，代表了卡顿的情况。react主要原因有长列表和重复渲染
  5. FPI：两次requestAnimationFrame之前会的进行重绘，计算两次重绘的时间差。

衡量工具

lighthouse

WebPageTest

https://www.webpagetest.org/

window.performance

参考文章

https://web.dev/fcp/

https://web.dev/i18n/zh/rail/

https://blog.csdn.net/qianyu6200430/article/details/111026894

// TODO
1. 具体火焰图解析
2. 实例