性能的影响
- 用户的留率
- 网站的转化率
- 体验和转播
性能的评估模型RAIL
Response 响应
Animation 动画
Idle 空闲
Load 加载
用户对于延迟的反应时间在0-100ms会感觉比较流畅，因此响应最好不要超过100毫秒，animation涉及到的不仅仅是炫酷的UI动效，还有各种动态交互效果，比如滚动和触摸拖拽等。网站可以利用空闲处理各种延迟任务抱着鞥网站或应用快速完成加载。尽量在1秒内加载完网页
性能优化的步骤
性能测试
- Chrome浏览器的Performance功能
Performance.png - Chrome中的灯塔（LightHouse）
LightHouse
生命周期
在浏览器中输入一个URL到整个页面渲染的过程。
- 域名解析
- 建立TCP连接
- 前后端进行HTTP绘画；
- 压缩与解压缩
- 前端的关键渲染路径
优化方案
- 传输资源的优化，如不同图片的格式类型会有不同的应用场景，在使用 的过程中是否适当；
- 加载过程的优化，比如懒加载、延迟加载等
- JavaScript是大型网站中非常昂贵的资源，是否进行了压缩？书写是否规范？
- 关键路径渲染，是否存在不必要的重绘和回流
- 本地存储和浏览器缓存
