Chrome Devtool 检查网络活动

显示更多信息

• 可以自己选择列显示的内容
  

模拟较慢的网络连接

重新加载

• 正常重新加载 Ctrl+R：正常重新加载
• 硬性重新加载：Ctrl+Shift+R:浅层次的清除历史记录，但不一定缓存完全清除。(Ctrl+F5)同理
• 清空缓存并硬性重新加载：可以深层次的清除当前页面的所有的缓存，比如js css等

检查资源的详细信息

Queueing

浏览器在以下情况下对请求进行排队

• 有更高优先级的请求
• 已经为此源打开了六个 TCP 连接，这是限制。仅适用于 HTTP/1.0 和 HTTP/1.1
• 浏览器在磁盘缓存中短暂分配空间

Stalled

• 连接建立的时间

Request sent

• 请求发出去需要的时间

TTFB（Time to First Byte） 首字节时间

• 浏览器开始收到服务器响应数据的时间=后台处理时间+重定向时间，是反映服务端响应速度的重要指标
• 延迟
• 路由
  如果您正在使用 CDN ，他们请求的资源不在 PoP 的缓存中时， 客户可能会被路由到源数据中心。 因此，请求路由到原始服务器，然后从那里检索它。 将大幅增加 TTFB 的时间开销
• 文件读取
  服务器只是从文件系统读取静态文件，如图像或系统表，都是有代价的。 这些都会被计算到你的 TTFB 时间中
• http优先级
  HTTP 有一个优先级机制，它可以选择在服务器上停止较低优先级的响应，同时发送较高优先级的响应。 撇开 H2 优先级问题不谈，即使 H2 运行顺利，这些预期的延迟也会给你的 TTFB 带来影响
• 运行成本
  运行时需要时间是显而易见的，所以这可能是 TTFB 时间开销中占比较重的
• 数据库查询
  页面如果需要获取来自数据库的数据，那么在对数据库进行检索时将会产生时间成本
• API 调用
  如果您需要调用任何 API (内部或其他)来填充页面，开销将计入您的 TTFB
• 服务器端渲染
  服务器渲染一个页面的成本可能是微不足道的，但它仍然会增加你的 TTFB 时间

阻止请求

• 打开命令菜单【Control + Shift + P】
• 键入block，选择 Show Request Blocking
• 点击 Add pattern
• 键入 main.css
  
• 至此，main.css 的请求被阻止。重新加载页面，会发现样式消失。
  

更多功能请查看链接 https://developer.chrome.com/docs/devtools/network/reference/#clear-cache