一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情

前言

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。本文就来大概讲解一下使用chrome控制台查看网络衡量指标，通过监控性能，才能更针对性的进行优化。

Network面板

打开控制台，选择network面板，使用 Network 可以观察网络资源加载耗时及顺序。

选中某一请求，点击timing，可以看到完整的耗时

• Queueing:发起请求文件顺序的排序耗时；
• Stalled :是浏览器得到要发出这个请求的指令到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等；
• Request sent :请求第一个字节发出前到最后一个字节发出后的时间，即上传时间；
• Waiting(TTFB):指服务器处理和返回数据网络延时间，是反映服务端响应速度的重要指标。服务器优化的目的就是要让这个时间段尽可能短；可通过加大网络带宽缩减网络延迟或优化服务器代码逻辑
• Content Download :指的是收到响应第一个字节到接收完最后一个字节的时间，即下载时间；

performance面板

打开控制台，选中performance面板，可以观察页面渲染表现及JS执行情况

点击左上角圆形按钮，变红后则开始录制，再按stop停止录制。那么，点击红点到按stop这段时间的性能就会被监控出来。也可以通过重新刷新，就可以监控到页面初始化的性能。

下图就是整体的性能分析报告。

第一部分：

• FPS：和动画性能有关，表示每秒的帧数。红色长条代表卡顿，绿色则表示性能ok。
• CPU ：和底部的summary统计表对应，指页面加载过程中，各阶段对CPU的占用时间。
• NET：展示请求的顺序和花费的时间。

第二部分：

• FP:首次绘制
• FCP：首次有内容的渲染
• LCP：最大内容的渲染
• FMP：首次有意义的绘制
• DCL：HTML文档被完全加载和解析完成
• L：页面中所有资源加载完成

第三部分：

• Bottom-Up事件时长表，分析事件占时

• Call Tree事件调用表，分析根活动和占时最多子活动

• Event Log 事件日志，顺序分析记录中发生的事件

• Summary：统计表：

  Loading 网络通信和HTML解析

  Scripting JavaScript执行

  Rendering 样式计算和布局

  Painting 重绘

  System 系统事件

  Idle 空闲时间