Chrome 开发者工具的 8 个 panel 中，和服务端处理、响应时间关系最紧密的应该是 Network panel 了。它记录发起请求的对象、HTTP 状态码、文档类型、文档大小、整个请求从发起到结束的时间。
Network 面板分为
- controller，控制 network 面板要启用和关闭的功能
- filter，过滤出想要查看的请求（只过滤 name 列）
- overview，各个请求从发起到响应到下载完成的时间信息
- request table，每个请求的详细信息
- summary，包含所有请求的总耗时、总的传输流量
插一句题外话，Name 命名规则为 URL 的最后路径名/请求参数
request table 中的 waterfall，显示了每个请求的处理时间
来看一个具体的例子
- queueing
- stalled
- request sent
- TTFB（Time To First Byte）
- content download
关于 蓝线 和 红线
- 蓝线表示 DOMContentLoaded 事件触发时间
- 红线表示 Load 事件触发时间
网友评论