前端性能优化（一）性能优化的指标和工具
一.性能指标1. F12 network进行调试，我们以淘宝为例2. 此外还有一个瀑布流的概念 waterfall3.蓝线和红线4.保存当前网页指标，方便以后对比5.查看动画帧数6.异步请求的指标 二. RAIL测量模型1.R\A\I\L含义2.RAIL评估标准指标 三.性能测量工具1.我们常用的 Chrome DevTools2.webpagetest是什么怎么用怎么看3.lighthouse的使用 四.性能测试API一.性能指标
1. F12 network进行调试，我们以淘宝为例
可以查看具体的加载时间等信息
2. 此外还有一个瀑布流的概念 waterfall
按瀑布的形式，从上而下展示各个资源请求的顺序和消耗的时间
点击在瀑布上可以查看具体的内容
queueing请求排队的时间
DNS Lookup：DNS查找的过程时间
initial connection请求与服务器连接的时间（TCP）
SSL：https 证书验证的时间
request sent 发送请求的时间
waiting（TTFB） 等待响应的时间这个指标是最重要的，用户最直观的感受
影响因素：后台的处理能力、回路网络的情况，会不会有延迟
content download 下载资源的时间（不能过长）
3.蓝线和红线
蓝线：dom加载完成的时间
红线：所有资源加载完成的时间
4.保存当前网页指标，方便以后对比
5.查看动画帧数
F12 perform 里面
command+shift+P（mac指令）
找到 show frames per second（FPS）meter
点击
Frames 74% 这个指标越高越好 一般要大于60fps
6.异步请求的指标
按理说 异步请求在1s内返回，都是可以的，我们可以进行压缩处理，实在不行我们可以进行loading过渡
二. RAIL测量模型
1.R\A\I\L含义
R：response 响应
A：animation 动画
I：idle 空闲
L：load加载
2.RAIL评估标准指标
response响应：处理事件应在50ms以内完成
在用户输入到收到响应，我们要在100ms内完成，但是浏览器需要对事件进行处理（预留50ms）所以我们能处理事件的时候最多为50ms
animation动画：每10ms产生一帧
idle空闲：足够多，这样用户交互来的时候，我们有足够的时间进行处理
load加载：在5s内完成内容加载并可以交互
三.性能测量工具
1.我们常用的 Chrome DevTools
我们调到performance那一栏
会提示
第一个是记录你的操作的一些性能报告
第二个是发出请求到页面加载的性能报告
2.webpagetest是什么怎么用怎么看
webpagetest地址
text location 选择站点 browser浏览器
配置一些高级选项
connection连接方式
Number of Tests to Run 测试次数（最多测试9次）
First View 用户首次访问
Repeat View 用户再次访问
Capture Video 选中之后结果可以查看测试录像
最后 START TEST
等待一会 出结果（我测试的是牛客网的官网0.0）
按照 首次访问 和再次访问 分为两行
然后说明一下列属性：
①First Byte ：发出的第一个请求等到响应的时间，得到后台的处理能力和网络的回路情况 牛客网的测试结果还是不错哒
②Start Render：首屏开始渲染的时间，用户体验的第一步
③First Contentful Paint 经过多长时间绘制了第一个有意义的图像
④speed index：首页展现平均值，正常小于4
接下来我们看具体指标
最左边 First View 3.8s 代表首次访问3.8s
点击瀑布图有更详细的内容
我们观察一下这部分
会发现图片基本都是并行加载的，这地方消耗的时间，又最大值绝定（比如图中的1948ms）
还会发现某些资源是高亮的
提醒你这个返回302重定向，可以对此优化，不用访问无效的地址，可以直接访问有效的重定向之后的地址。
3.lighthouse的使用
1.全局：npm install -g lighthouse
2.lighthouse 网站地址
3.会生成一个测试报告，代表运行成功
4.我们可以按照地址直接打开报告
performance 性能 SEO搜索引擎
我们主要研究performance
根据上图会发现，是个分屏有七个都是白的，说明渐进式加载做的不是很好
lighthouse最好的好处是 会给你提出很多建议，和预计会减少的时间
比如说建议第一个，会告诉你移除未被使用的js，并给你指出具体的js是什么
还有就是建议第二个是减少渲染阻塞的资源
其他的先不说了，之后会提到
5.我们再说一个验证的小技巧：
我们经过报告发现图中的这个js，由于这个js在head标签中，阻塞了页面的呈现，我们可以手动取消，再次刷新页面，看看对页面的呈现有没有影响，操作如下：
①.command+shift+p，打开浏览器命令行
输入block，找到这个，回车
②.在新弹出的框内，让与log有关的js都不加载（先点击小加号）
③.刷新在newwork中，设置过滤log，然后发现，有关log的js都被过滤出来，确实被我们手动阻塞了
④.但是我们发现这并没有影响b站首页的呈现，在呈现这方面可以说没有必要提前加载，但是我们不太了解b站的业务，所以可能有其他的作用
但是在我们自己的网站，我们要衡量这个真的是业务必需的吗
6.其实在Chrome DevTools中已经给我们集成了lighthouse
四.性能测试API
1.例子：
2.其他相关的操作
