谷歌浏览器开发者模式network选项

 

前言

浏览器开发者模式是我们在开发网站时常用的工具。但按下F12，无数的参数让人迷离。本文主要描述一些我在学习开发者模式的network选项卡时的一些心得体会，供新手朋友参考，若新手朋友感觉还是有点看不懂，可以先了解一下http原理，这里推荐《HTTP权威指南完整版》http://www.notedeep.com/note/36/page/280。

 

---

 

一、开发者模式网络选项的工作原理

当打开开发者模式的面板，它便开始记录浏览器于服务器之间的所有HTTP请求。后将其处理分类等操作，以便技术人员分析。

 

二、页面介绍

1.停止记录HTTP请求按钮

此标为红色说明开发者模式（DevTools）正在记录浏览器和服务器之间的通信，灰色则不记录。

2.清除所记录的HTTP请求按钮

点击此处可清除所记录的HTTP请求

3.过滤器按钮

可以根据字段，筛选出自己想看的记录

筛选方法，这里借用谷歌官方文档

4.保存所有请求按钮和不使用cache按钮

• Preserve log按钮：不清除记录。默认情况，当你点击页面上的链接，DevTools会清除现在所记录的所有HTTP请求，并开始新一次的记录。但有时候我们需要保存一些记录，方便我们对比统计分析。我们就可以选中此框，它将不会在清除已经记录下的HTTP请求。
• Disable cache：让浏览器不再使用缓存。我们知道，当我们加载重复的资源时，浏览器会保存曾经加载过的资源。但如果我们做类似负载均衡等实验，我们希望不停的直接从服务器端直接获取资源，我们可以选中此框，以让我们可以在每次请求同一资源时，都和我们第一次请求资源时，保持一致的情况。

 

 

4.记录到的HTTP请求

以下我们以加载baidu为例，我们知道，完成一项事务（比如打开www.baidu.com)，会发布一系列HTTP事务来获取一个丰富图片的web页面。DevTools会记录下所有这一事务所传输的HTTP请求。包含HTTP的请求名字、状态、类型、启动者、大小、载入所用的时间、和瀑布（用以描述该请求，在整个页面加载中的顺序、各种时间等，后面会详谈）

 

1.status（状态）

即服务器返回的此资源请求状态码，状态码的具体含义可搜索HTTP状态码

2.Type（类型）

即MIME TYPE，用于告知浏览器此资源类型的字段，有如下类型供参考。

3.initiator（启动器）

即此HTTP请求由谁发起。可能前面你已经想到，你打开baidu.com只是一个HTTP请求，那么剩下那么多请求是怎么样来的呢？此字段就记录这个问题。

能发起请求的有哪些？

• 解析器：浏览器的HTML解析器
• 重定向：服务器返回的重定向资源
• 脚本：如JavaScript函数

其他：其他一些过程和操作。如你在地址导航或地址栏下输入baidu.com的操作。

 

4.Size(大小)

即此HTTP响应的总大小

5.时间

从请求开始到响应中最后一个字节接收的总持续时间。

6.瀑布

每个请求活动的可视细分

在查看timing你可能会遇到以下字段

• Queueing. ：排队状态，有下面几种情况，浏览器会让需要请求的资源进入queueing状态
  • 有更高优先级的请求。
  • 已为该来源打开了六个TCP连接，这是限制。仅适用于HTTP / 1.0和HTTP / 1.1。（这是谷歌浏览器的数据，各个浏览器是不一样的，感兴趣可自学查询）
  • 浏览器正在磁盘缓存中短暂分配空间
• Stalled. 停止状态，可能由于Queueing描述的任何原因而停止。
• DNS Lookup. 浏览器正在解析请求的IP地址。
• Initial connection. 浏览器正在建立连接，包括TCP握手/重试和协商SSL。
• Proxy negotiation. 浏览器正在与代理服务器协商请求。
• Request sent. 正在发送请求。
• ServiceWorker Preparation. 浏览器正在启动服务程序。
• Request to ServiceWorker. T该请求正在发送给服务人员。

Waiting (TTFB). 浏览器正在等待响应的第一个字节。TTFB代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。为方便大家理解，附上为HTTP一次响应的时间轴。Waiting (TTFB)则表示Request后收到Response包的第一个字节所用的时间，此时间为客户机到服务器之间的网络时延*2+服务器处理请求的时间

TTFB值建议在200ms以下，它反应服务器和主机之间的网络状况，以及服务器应用的响应速度。

 

• Content Download. 浏览器正在接收响应。

也称为传输时间，如果蓝色占据waterfall很大比例，在服务端可以考虑减少字节传输量，以及考虑带宽的短板处。

• Receiving Push. 浏览器正在通过HTTP / 2服务器推送接收此响应的数据。
• Reading Push. 浏览器正在读取先前接收的本地数据。

 

---

总结

参考文章：

• https://developers.google.com/web/tools/chrome-devtools/network/reference?utm_source=devtools#timing-explanation   
• https://www.cnblogs.com/kjcy8/p/6802203.html