前端性能优化（一）性能优化的指标和工具

一.性能指标

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指令）