性能指标
1. 网络指标
1.1 打开网络设置
![页面网络性能查看](https://i-blog.csdnimg.cn/blog_migrate/29a0648c83f17bfb91734164e6ecb2ea.png)
1.2 重新载入
![重新载入](https://i-blog.csdnimg.cn/blog_migrate/c0b7fe9849da9cf4f0b52da9a2731c06.png)
1.3 资源总览
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1f0712f8ac1f16f376633308774cc059.png)
1.4瀑布流
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f49cabf14bd3503bf4b0488f0b56dbfd.png)
1.4.1 横向查看(单个资源明细)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/27c1734ba8e0ce2b79d1217698f46a21.png)
1.4.2 竖向查看(资源加载方式)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/765d1724feccc019ad22f326183873e3.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8882da1b815b4062a03bbaa1845e8aff.png)
1.5 保存当前执行计划
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f289d2c0d195e19c04aa456f8945b3ae.png)
2. Lighthouse
2.1 买家秀
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ad943476cbcb4456e32f8e51f35111e2.png)
2.2 卖家秀
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/06be3586c0cb2c3e13e2dfdf9877f68f.png)
交互体验
1. 菜单交互
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0e6786bb637a8285a75391b68b90d39b.png)
2. 搜索框
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0066cd75571d20c707961be66174389d.png)
3. 页面流畅度
页面翻页时内容(常见图片、视频等多媒体资源)的显示速度。
可以很流畅的展示不被用户嫌弃为目标(可以想象为看电影不卡顿)。
3.1 页面监控(FPS)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/07323c1bc614fd65ee77b0de5c74c0fd.png)
![FPS](https://i-blog.csdnimg.cn/blog_migrate/8ca8b237133fe606b358640b99755056.png)
4. 异步请求响应要快
点击商品时,跳转到商品详情;页面加载要快,若不能及时加载,请使用loading动画提高用户体验度。