大家好，我是IT修真院北京总院第22期的学员张雪飞，一枚正直纯洁善良的web程序员

今天讲下深度思考中的知识点—— ——network中的请求信息，headers中的每一项分别是什么意义?

1.背景介绍

作为一个Web开发人员，日常中与我们开发相关的，就是Chrome的开发者工具。

今天就是要简要说说Chrome的开发者工具中Network部分。

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响

应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。

2.知识剖析

1.Network中的信息

如果能多了解一些chrome开发者工具调试技巧/功能对于平时开发很与帮助，

在实际项目中多使用这些功能，提升自己的工作效率。下面我们来看chrome开发者工

具Network面板功能

1、Controls控制Network的外观和功能。

2、Filters控制Requests Table具体显示哪些内容。

3、Overview显示获取到资源的时间轴信息。

4、Requests Table按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。

5、Summary显示总的请求数、数据传输量、加载时间信息。

network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析

HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。

下面我们主要讲Requests Table这一块的内容，header中的信息就在这一块。

名词解释

Name：资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing

Status(&Text)：针对该请求服务器返回的状态码及描述该状态码的简短信息

Type:该资源的类型

Size:资源的大小

Time: Time就是从请求开始到接到最后一个字节所经历的时间；而Latency为请

求开始到接收第一个字节所经历的时间。此处的请求开始指的是该请求的状态从stalled（阻塞）状态开始。

Timeline（waterfall）:该列呈现出了每个请求从阻塞状态到完成请求所经历的阶段，和整个页面从加载到完成过程中其中

资源的加载流。

Initator:初始化该请求的对象或进程，有以下几种情况

Parser：请求由Chrome的HTML解析器时发起的。

Redirect：请求是由HTTP页面重定向发起的。

Script：请求是由Script脚本发起的。

Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。

headers中的信息

General:常规信息

1、Request URL:资源的请求url

2、Request Method:HTTP方法

3、Status Code:响应状态码

200：(状态码) OK

301：资源（网页等）被永久转移到其它URL

401：访问资源的权限不够。

403：没有权限访问资源。

404：需要访问的资源不存在。

405：需要访问的资源被禁止。

500 -内部服务器错误

更多关于这方面的知识可以参见相关小课堂

4、Remote Address：请求的远程地址

5、Referrer Policy：

在页面引入图片、JS等资源，或者从一个页面跳到另一个页面，都会产生新的HTTP请求，浏览器一般都会给这些请求头加上表示来源的Referrer字段。

新的Referrer Policy规定了五种Referrer策略：No Referrer、No Referrer When Downgrade、Origin Only、Origin When Cross-origin、和Unsafe URL。

No Referrer：任何情况下都不发送Referrer信息

No Referrer When Downgrade：仅当发生协议降级（如HTTPS页面引入HTTP资源，从HTTPS页面跳到HTTP等）时不发送Referrer信息。这个规则是现在大部分浏览器默认所采用的

Origin Only：发送只包含host部分的Referrer。启用这个规则，无论是否发生协议降级，无论是本站链接还是站外链接，都会发送Referrer信息，但是只包含协议+ host部分（不包含具体的路径及参数等信息）

Origin When Cross-origin：仅在发生跨域访问时发送只包含host的Referrer，同域下还是完整的。它与Origin Only的区别是多判断了是否Cross-origin。需要注意的是协议、域名和端口都一致，才会被浏览器认为是同域

Unsafe URL：无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送Referrer信息。正如其名，这是最宽松而最不安全的策略

Response Headers:

字段

说明

Cache-Control

告诉浏览器或者其他客户，什么环境可以安全地缓存文档

Connection

当client和server通信时对于长链接如何进行处理

Content-Encoding

数据在传输过程中所使用的压缩编码方式

Content-Type

数据的类型

Date

数据从服务器发送的时间

Expires

应该在什么时候认为文档已经过期，从而不再缓存它？

Server

服务器名字。Servlet一般不设置这个值，而是由Web服务器自己设置

Set-Cookie

设置和页面关联的cookie

Transfer-Encoding

数据传输的方式

Request Headers:

字段

说明

Accept

表示浏览器支持的MIME类型

Accept-Encoding

浏览器支持的压缩类型

Accept-Language

浏览器支持的语言类型，并且优先支持靠前的语言类型

Cache-Control

指定请求和响应遵循的缓存机制

Connection

当浏览器与服务器通信时对于长连接如何进行处理：close/keep-alive

Cookie

向服务器返回cookie，这些cookie是之前服务器发给浏览器的

Host

请求的服务器URL

Referer

该页面的来源URL

User-Agent

用户客户端的一些必要信息

http协议报头详解

3.常见问题

使用post发送请求时如何设置content-type的值

4.解决方案

协议规定POST提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的HTTP请求满足上面的格式就可以。

但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如php、python等，以及它们的framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的Content-Type

字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到POST提交数据方案，包含了Content-Type和消息主体编码方式两部分。

1. application/x-www-form-urlencoded最常见的POST提交格式，使用这个编码格式post的数据会以键值对的方式提交。

2. multipart/form-data通常上传图片等文件会使用这种编码格式提交。

3. application/json提交JSON格式的数据。

4. text/plain窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

headers: {'Content-Type': 'application/x-www-form-urlencoded'}

当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。

当action为post时候，浏览器把form数据封装到http body中，然后发送到server。如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

5.扩展思考

除了已经提到过的，content-type还有那些类型

HTTP Content-type对照表

6.参考文献

参考一：Referrer Policy介绍

参考二：Network面板

参考三：http协议报头详解

7.更多讨论

问题一：时间轴中的不同颜色的线代表什么意思？

回答：Queueing:请求文件顺序的的排序。

Stalled:是浏览器得到要发出这个请求的指令到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。

Proxy negotiation：浏览器使用代理服务器协商请求的时间

DNS Lookup:时间执行DNS查找。每个新域pagerequires DNS查找一个完整的往返。DNS查询的时间，当本地DNS缓存没有的时候，这个时间可能是有一段长度的，但是比如你一旦在host中设置了DNS，或者第二次访问，由于浏览器的DNS缓存还在，这个时间就为0了。

Initial connection:建立TCP连接的时间，就相当于客户端从发请求开始到TCP握手结束这一段，包括DNS查询+Proxy时间+TCP握手时间。

Request sent:请求第一个字节发出前到最后一个字节发出后的时间，也就是上传时间。

Waiting(TTFB):请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte),发送请求完毕到接收请求开始的时间;这个时间段就代表服务器处理和返回数据网络延时时间了。服务器优化的目的就是要让这个时间段尽可能短。

Content Download:收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。

问题二：浏览器并发链接被阻塞，怎样优化？

回答：方法有1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能；

2、脚本置于页面底部；

DNS Lookup（域名解析）

请求某域名下的资源，浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前，浏览器不能从主机名那里下载到任何东西。

问题三：Console标签页的作用？

回答：用于显示脚本中所输出的调试信息，或运行测试脚本等。Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式，不然提示没有Console。

鸣谢

感谢观看

感谢周启明|朱芳山此教程在她技术分享的基础上完善而成！

PPT

视频：https://pan.baidu.com/s/1eSnKWoy

密码: tw8f

------------------------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧！

猛戳这里有惊喜