web性能优化（一）性能指标

了解性能优化吗？

什么是web 性能

简单说就是你的网站打开的够不够快

打开速度
动画效果
表单提交
列表滚动
页面切换

1. 减少整体加载时间：减少文件体积，减少http请求，减少预加载
2. 使网站尽快可用：仅加载首屏内容，其它内容根据需要进行懒加载
3. 平滑和交互性：使用css 替代js动画，减少ui重绘
4. 感知表现：网页可能不能做的很快，但你可以让用户感觉很快。耗时操作要给反馈，比如：加载动画、进度条、骨架屏等提示信息
5. 性能测定：性能指标、性能测试、性能监控持续优化

RAIL性能模型

• 响应（Response）： 应该尽可能快速的响应用户，应该在100ms以内响应用户输入
• 动画（Animation）：在展示动画的时候，每一帧应该以16ms进行渲染，这样就可以保持动画的一致性，并且避免卡顿
• 空闲（Idle）：当使用JavaScript主线程的时候，应该把任务划分到执行时间小于50ms的片段中去，这样可以释放线程以进行用户交互
• 加载（Load）：应该在小于1s的时间内加载完成你的网站，并可以进行用户交互 基于用户体验的性能指标

FCP(First Contentful Paint)

首次内容绘制，浏览器首次绘制来之DOM 的内容的时间，
内容必须是文本、图片（包含背景图）、非白色的canvas或svg,也包括正在加载中的 web字体的文本

速度指标

LCP(Largest Contentful Paint)

最大内容渲染时间

注意：最大的不一定最后加载

速度指标

FID(first input Delay)

首次输入延迟，从用户第一次与页面交互（eg:单击连接，点击按钮，，）到浏览器实际能够响应的时间。
输入延迟是因为 浏览器主线程正忙于做其他事情，所以不能响应用户。发生这种情况的一个常见原因是浏览器正忙于解决和执行应用程序加载的大量计算的javascript

第一次输入延迟通常发生在第一次内容绘制（FCP）和可持续交互时间（TTI）之间，因为页面已经呈现出一些内容，但还不能可靠地交互

以下所有的HTML 元素 都需要在响应用户交互之前等待主线程上正在进行的任务完成
文本输入框，复选框，单选按钮input textarea checkbox,radio
选择下拉菜单 select
连接 a

TTI（Time to Interative）

网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务完成的时间,并且在随后的5s内网络和主线程是空闲的.
从定义上来看,叫可持续性交互时间或可流畅交互时间更合适
长任务是需要50ms 以上才能完成的任务

速度指标

TBT(Total Block Time)

总阻塞时间,度量了FCP 和TTI 的总时间(超过50后面的时间200+40+105)

速度指标

CLS(Cumulative Layout Shift)

累计布局偏移,即页面抖动时间

速度指标

未完，待续，下一篇：性能测试