性能指标和优化目标

让良好的用户体验成为性能优化的目标
有些问题看起来非常难，难的并不是怎么解决，而是你根本不知道问题是什么

性能优化 - 加载

理解加载瀑布图
基于HAR存储与重建性能信息
速度指数（Speed Index）
TTFB、页面加载时间（Loaded）、首次渲染（FCP）

性能优化 - 响应

交互动作的反馈时间
loading

理解加载瀑布图

network - requests 总共发起了多少个请求， resources 总资源量大小，DOMContentLoaded DOM 加载完成时间（蓝色线），Load 全部资源加载完成的时间（红色线）。

TTFB - 请求发出到请求回来，到底需要多长时间，网站的加载快慢，大概率由这个指标决定，这里反应了两个能力，一个是后台处理响应的能力，还有资源所在的网络回路的情况。Content Download 表示资源的下载时间，时间越长，一般表示资源越大，有些资源还会造成阻塞。
command + shift + p调出调试窗口可以观察帧数动画帧数达到60fps就比较流畅
异步请求一般在 1s 中之内可以返回就是比较快的，如果返回不回来则需要做压缩，如果压缩后还是返回不回来，则可以从前端交互上考虑优化

lighthouse 指标

First Contentful Paint （首次渲染时间）

第一个有内容的绘制出现的时间，即屏幕不是白屏的时间

Speed Index 速度指数

速度指数，一般大于 4s 则表示网站的速度是比较慢的，需要进行优化

RAIL 测量模型

Google 提出的性能指标量化的标准

Response 用户与网站交互的时候，网站做出的及时反馈。处理事件应在50ms以内完成。
Animation 动画每 10ms 产生一帧
Idle 主线程足够的空闲时间，可以及时响应用户的交互
Load 加载，在 5s 内完成内容加载并可以交互

性能测量工具

Chrome DevTools 开发调试、性能评测
Lighthouse 网站整体质量评估
WebPageTest 多测试地点、全面性能报告
- waterfall chart 请求瀑布图
- first view 首次访问
- repeat view 二次访问

使用 lighthouse 分析性能

npm install -g lighthouse
lighthouse http://www.bilibili.com

performance 性能
- FCP
- Speed Index 页面所有可见内容，多久可以让用户看到
- Largest Contentful Paint
- time to interactive 什么时候用户可以和网站交互
- toatal blocking time
- Cumulative Layout Shift 根据上述指标分析，在 OPPORTUNITIES 查看优化建议
accessibility 可访问性
best proctices 是否使用一些网络最佳实践
SEO
PWA 渐进式应用加载

使用 Chrome DevTools 分析性能

Audit(lighthouse)
Trottling 调整网络吞吐
Performance 性能分析
Network

常用的性能测量APIs

渲染优化

浏览器的渲染流程：

graph LR
Javascript --> Style 
Style --> Layout
Layout --> Paint
Paint --> Composite

首先浏览器构建 DOM 对象和 CSSOM 对象，然后合并为渲染树 Render tree。

布局（ layouts ）和绘制（ paint ）

渲染树只包含网页需要的节点
布局计算每个节点精确的位置和大小 - 盒子模型。通常第一次加载完页面元素绘制到页面上叫布局，如果页面发生变化，导致的再次布局也称为回流（ reflow ）。影响回流的操作：
- 添加、删除元素
- display:none
- 移动元素位置
- 操作 styles
- offsetLeft / scrollTop / clientWidth
- 修改浏览器大小，字体大小
绘制是像素化每个节点的过程

一些动画是利用 GPU 进行加速的，这种动画直接进行 composite，而不需要 layouts 和 paint。

避免layout thrashing( 布局抖动 )

Forced reflow

避免回流
样式读写分离，批量进行如果要修改 top 等位置，最好使用 transform 的 translate这种 GPU 的动画属性

防止布局抖动 FastDom

measure
mutate

复合线程（ Compositor thread ）与图层（ layers ）

复合就是拆解为多个图层，提高绘制效率：

浏览器根据规则在复合阶段将页面拆分图层进行绘制
利用 DevTools 了解网页的图层拆分情况
一些仅影响复合的样式
- transform
- opacity

前端性能优化-性能指标和优化目标