前言
浏览器开发者模式是我们在开发网站时常用的工具。但按下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