- 减少总体加载时间：减少文件体积，减少 HTTP 请求数量、使用预加载
- 使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载
- 平滑和交互性：使用 css 动画代替 js 动画、减少 UI 重绘
- 感知表现：耗时操作要给用户反馈，比如 loading 动画、进度条、骨架屏等提示信息
- 性能测定：性能指标、性能测试、性能监控持续优化
性能指标
- First Contentful Paint（FCP）
- Largest Contentful Paint（LCP）
- First Input Delay（FID）
- Time to Interactive（TTI）
- TBT（Total Block Time）总阻塞时间，度量了 FCP 和 TTI 之间的总时间
- CLS（Cumulative Layout Shift）累计布局偏移
- Speed Index（SI）速度指数，是一个表示页面可视区域中内容的填充速度的指标，可以通过计算页面可见区域内容显示的平均时间来衡量。
- 加载性能（LCP） 显示最大内容元素所需时间
- 交互性（FID） 首次输入延迟时间
- 视觉稳定性（CLS） 累计布局偏移
响应（Response）动画（Animation）空闲（Idle）加载（Load）
性能测量：
灯塔（Lighthouse）
浏览器 DevTools 调试工具
快捷键 Shift + ESC
了解 GUP、网络和内存空间的使用情况。通过监控这些数据，我们可以在有异于其他进程的大幅开销出现时，定位到可能存在内存泄漏或网络资源加载异常的问题进程。
- cup大：可能大数据操作或内存泄漏
- 内存空间大：资源占比大
Network 网络
分析资源加载耗时情况
performance 性能控制面板
大数据量的js动画，cpu占用高，造成卡顿，控制面板能显示实时的数据帧率 控制面板红色的地方会显示强制重排，存在性能瓶颈 可以将js动画改成css动画，帧率会降低，60
memory面板
coverage面板
前端页面生命周期
网络请求的进程与线程
多进程浏览器
建立http请求
dns解析
网络模型
tcp连接
- 在吗？
- 在的，怎么了？
- 一起出去玩
- 确认对方的存在在进行通信
前后端的交互
反向代理服务器
tcp建立连接后，就可以通过http进行前后端通信了，可能会存在反向代理
后端处理流程
http协议相关
浏览器的缓存
关键路径渲染
将html，css解析转成如下
优化方案
从发出请求到收到响应的优化，比如 DNS 查询、HTTP 长连接、HTTP2、HTTP 压缩、HTTP 缓存等
更好的连接传输效率：
- 减少dns查找
- 使用tcp持久化优化
- 减少http重定向：需要额外的dns查找+tcp握手
更少的资源请求 压缩：图片压缩，gzip 缓存：http缓存，cdn缓存，service worker缓存
渲染优化
资源加载优化
图片优化
关键渲染路径优化，比如是否存在不必要的重绘和回流 加载过程的优化，比如延迟加载，是否有不必需要在首屏展示的非关键信息，占用了页面加载的时间 资源优化，比如图片、视频等不同的格式类型会有不同的使用场景，在使用的过程中是否恰当 构建优化，比如压缩合并、基于 Webpack 构建优化方案等
