一、全方面的HTTP学习与总结

1，HTTP请求方式及作用

1）简单请求：

GET:通常用于向服务器请求而获得某些资源
POST: 通常都是发送或提交数据给服务器
HEAD:代表请求资源的头部信息，并且这些头部与HTTP的GET方法请求时返回的一致；使用场景： 在下载一个大文件前先获取其大小再决定是否要下载，可以节约带宽资源

2）复杂请求：

OPTIONS：试探请求，在真正发送请求时，先试探一下是否ok；用于获取目的资源所支持的通信选项
PUT：用于新增资源或者使用请求中的有效负载替换目标资源的表现形式
DELETE:用于删除指定的某些资源
TRACE：回显服务器收到的请求，主要用于测试或诊断
PATCH：用于对资源进行部分修改
CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器

3）GET与POST的区别？

（1）数据传输的方式不同：GET请求通过URL传输数据，以pramas或query形式获取数据；而POST的数据是通过请求体body传输的，携带参数；
（2）安全性不同：POST的数据因为在请求主体body内，有安全性保证；而GET的数据在URL中，通过历史记录、缓存很容易查到数据；
（3）数据类型不同：GET只允许ASCII字符，而POST无限制；
（4）GET无害：刷新、后退等浏览器操作GET请求是无害的，POST可能重复提交表单。

4）PUT和POST的区别？

（1）两者相同点都是给服务器发送新增资源；
（2）PUT方法是幂等的，连续调用一次或多次的效果相同，无副作用；而POST方法是非幂等的，如果你调用多次就会产生多次结果；
（3）PUT的URL指向具体单一资源，而POST可以指向资源集合。

5）PUT和PATCH的区别？

（1）两者相同点都是给服务器发送修改资源，都是更新资源；
（2）PUT是那种直接覆盖资源的修改方法，可能需要携带无用信息；
（3）PATCH用来对已知资源进行局部更新，避免携带无用信息。

2，HTTP的请求报文是咋样的？

请求报文由三部分组成：

请求行：请求方法（GET或POST）+URL（路径）+HTTP协议版本
请求头：它是由关键字/关键值对组成，每行一对，关键字与值用英文冒号":"分隔开；其中典型的请求头： Content-Type,User-Agent,Accept,Host...
请求体：(请求正文) post,put等请求携带的数据，参数

3，HTTP的响应报文是啥样的？

响应报文有三部分组成：

响应行：协议版本+状态码+状态码的原因短语组成--->HTP/1.1 200 OK
响应头：它是响应首部字段，也是由关键字/关键值对组成
响应体：服务器响应的数据

4，HTTP中的首部

请求头：客户端向服务器发送请求的报文时使用的首部
1）If-Modified-Since:上一次修改内容的时间，与Last-Modified两者配合使用，来进行对比缓存分析。
2）if-none-match: 它是与Etag配合使用的。想要使用这个头，就必须修改文件；当你修改服务器上的文件时，请求头上会自动添加这个头。最初始时if-none-match是不存在的，当它存在时，说明你修改了文件中的内容（分为真实修改和假修改）。
3）Accept-Encodeing:一个文件到底能不能压缩，看有没有这个头。浏览器（客户端）告诉服务器它所支持的压缩格式（gzip,deflate,br），如果存在某种压缩格式就会解压缩。
4）User-Agent:在PC端和移动端都输入同一网址，会出现两个项目，通过头来判断。
响应头：从服务器向客户端响应时使用的字段
1）Content-Type:根据不同的文件类型来返回不同的响应头，它是在响应数据之前设置的。

（1）在得知是文件时要求读取内容再响应回来（利用的是流的概念--->pipe管道），mime.getType()根据不同的文件类型可自动转成不同的格式--->filepath(文件名)；  
    设置的形式：res.setHeader("Content-Type",mime.getType(filepath)+";charset=utf8")
（2）在判断出是目录时要求将目录下文件读出来，并且渲染到模板上（返回一个网页）；  
    设置的形式：res.setHeader("Content-Type","text/html;charset=utf-8")  
（3）除了渲染主目录外，在其它文件夹渲染时注意路径的拼接；如果出现中文路径的话，浏览器自动解析成编码：encodeURIComponent(pathname)，而我们需要将中文再解码：pathname = decodeURIComponent(pathname)

2）Content-Encodeing:在返回文件之前，响应时告诉浏览器服务器以什么格式压缩，以便浏览器可以解析文件，服务器告诉客户端它是以何种格式压缩的，然后返回给客户端
3）Cache-Control:缓存控制---->强制缓存，告诉浏览器多久不要再来访问我

 设置格式：
  res.setHeader("Cache-control","max-age=10")//再隔10秒才来访问我，时间过长，就一直从缓存中拿数据，即强制缓存
  res.setHeader("Cache-control","no-cache")//走网络，但是有缓存，它是对比缓存
  res.setHeader("Cache-control","no-store")//走网络，但不缓存

4）Expires:和上面控制缓存差不多，需要设置时间---->强制缓存

  设置格式：res.setHeader("Expires",newDate(Date.now()+1000*20).toGMTString())//隔多久来访问我

5）Last-Modified:最后一次修改内容，时间的变化，与对比缓存有联系，它是与if-modified-dince配合使用
6）Etag：摘要缓存--->就好像是将文件进行加密处理一样，与if-none-match配合使用
7）Location:重定向到某个地方

5，HTTP的常见状态码

2xx 成功

  200--->OK，表示从客户端发来的请求在服务器端被正确处理
  201--->Created，请求已经被实现，而且有一个新的资源已经依据请求的需要而建立
  202--->Accepted，请求已接受，但是还没执行，不保证完成请求
  204--->No content，表示请求成功，但响应报文不含实体的主体部分
  206--->Partial Content，进行范围请求

3xx 重定向

  301--->moved permanently，永久重定向，表示资源已经被分配了新的URL
  302--->found，临时重定向，表示资源临时被分配了新的URL
  303--->see other，表示资源存在着另一个URL，应使用GET方法获取资源
  304--->not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
  307--->temporary redirect，临时重定向，和302含义相同

4xx 客户端错误

  400--->bad request，请求报⽂存在语法错误 
  401--->unauthorized，可以访问页面，但需要携带认证消息；表示发送的请求需要有通过 HTTP 认证的认证信息
  403--->forbidden，不存在访问页面的权利；表示对请求资源的访问被服务器拒绝 
  404--->not found，表示在服务器上没有找到请求资源
  408--->Request timeout，客户端请求超时
  409--->Confict，请求的资源可能引起冲突

5xx 服务器错误

  500--->internal sever error，表示服务器端在执行请求时发生了错误
  501--->Not Implemented，请求超出服务器能力范围，例如服务器不⽀持当前请求所需要的某个功能，或者请求是服务
  器不⽀持的某个⽅法  
  503--->service unavailable，表示服务器暂时处于超负载或正在停机维护，无法处理请求
  505--->http version not supported 服务器不⽀持，或者拒绝⽀持在请求中使⽤的 HTTP 版本

6，HTTP的keep-alive是干啥的？

在早期的HTTP/1.0中，每次http请求都要创建一个连接，而在创建连接的过程需要耗费资源和时间，为了减少资源消耗，缩短响应时间，就需要重⽤连接。在后来的HTTP/1.0中以及HTTP/1.1中，引入了重用连接的机制，就是在http请求头中加⼊ Connection: keep-alive 来告诉对⽅这个请求响应完成后不要关闭，下⼀次咱们还⽤这个请求继续交流；协议规定，在HTTP/1.0如果想要保持长连接，需要在请求头中加上 Connection:keep-alive
keep-alive的优点：
1）较少的CPU和内存的使用（同时打开的连接减少了）
2）允许请求和应答的HTTP管线化
3）降低拥塞控制（TCP连接减少了）
4）减少了后续请求的延迟（无需再进行握手）
5）报告错误无需关闭TCP连接

7，HTTP的缓存过程是怎样的？

1）客户端向服务器发出请求，请求资源
2）服务器返回资源，并通过响应头决定缓存策略
3）客户端根据响应头的策略决定是否缓存资源，并把资源与响应头缓存下来
4）在客户端再次请求且命中资源的时候，此时客户端去检查上次缓存的缓存策略，根据策略的不同、是否过期等判断是直接读取本地缓存还是与服务器协商缓存

8，HTTP优化策略？

HTTP协议的优化策略有两种，压缩和缓存。
1，压缩：
1）压缩的目的：将文件变小
2）压缩的原理转化流：
日志输出是啥？conole.log("ok")
标准输出？process.stdout.write("ok)
标准输入？process.stdin.on("data",function(data){})
3）压缩文件：数据中重复性东西越多，就适合压缩；对于音乐电影不适合压缩
读取文件：异步读取回调中的数据，同步读取时返回值是数据，
压缩文件：zlib.gizp("file",function(err,data){console.log(data)})
4）需注意的点：
（1）在响应文件时，把一个文件压缩，压缩完后返回给浏览器，我们不需要解压，浏览器会自动解压，而一个文件到底会不会解压，看请求头中有没有Accept-Encodeing。
（2）服务器返回给浏览器一个文件，如果浏览器认识这个文件，就将其进行解析，如果不认识就以下载的方式处理
2，缓存：
1）缓存的分类：强制缓存与对比缓存。对于每个浏览器都有一个缓存的文件夹（里面存放着缓存文件），而任何网站的首页面是不可能走缓存的，这里的缓存指的是强制缓存
2）强制缓存：服务器通过一个头告诉浏览器，我已把文件返回给你，在多久之内你不要再请求我
3）协商缓存：（对比缓存）如果一个文件没有改变，那么文件走缓存
4）对比缓存不足之处：
（1）文件内容没有改变，但是修改时间发生变化
（2）时间上不够非常精确，可能在极短时间内修改内容，但并未捕捉到
5）解决协商缓存不足（摘要算法中典型算法：MD5加密）
（1）摘要算法是不可逆的。可由一篇文章得到摘要，但不能从一个摘要还原出一篇文章
（2）摘要的长度是固定不变的
（3）相同内容的摘要是相同的，不同内容的摘要是不同的
（4）哈希算法（散列算法），crypyo.createHash--->进行摘要再转成base64的形式
6）触发强缓存或者协商缓存要在啥时候
1，强缓存离不开两个响应头Expires与Cache-Control，它控制着多长时间内不要再来访问我
2，协商缓存是在第一次请求时，服务器返回的响应头中不存在Expires与Cache-Control或者过期时，浏览器第二次请求时就会与服务器进行协商，如果缓存与服务器资源的最新版本一致，无需下载服务端直接返回304 Not Modified状态码，如果服务器发现浏览器中的缓存已经是旧版本了，那么服务器就会把最新资源的完整内容返回给浏览器，状态码就是200 Ok。
3，浏览器判断缓存是否是新鲜的方法就是依靠http的另外的首部Last-Modified/If-Modified-Since还有ETag/If-None-Match
7）整体上的缓存流程

注意：在图中出现的请求头或者响应头都可结合本文中的请求头总结知识点

9，HTTPS协议

https是安全版的http，因为http协议的数据都是明文进行传输的，所以对于一些敏感信息的传输就很不安全，https就是为了解决http的不安全而生的

二、全方面TCP学习

1，网络模型（七层）

1）应用层

与其它计算机进行通讯的一个应用，它是对应应用程序的通信服务的。例如，一个没有通信功能的字处理程序就不能执行通信的代码，从事字处理工作的程序员也不关心OSI的第7层。但是，如果添加了一个传输文件的选项，那么字处理器的程序就需要实现OSI的第7层。示例：TELNET，HTTP，FTP，NFS，SMTP等。

2）表示层

这一层的主要功能是定义数据格式及加密。例如，FTP允许你选择以二进制或ASCII格式传输。如果选择二进制，那么发送方和接收方不改变文件的内容。如果选择ASCII格式，发送方将把文本从发送方的字符集转换成标准的ASCII后发送数据。在接收方将标准的ASCII转换成接收方计算机的字符集。示例：加密，ASCII等。

3）会话层

它定义了如何开始、控制和结束一个会话，包括对多个双向消息的控制和管理，以便在只完成连续消息的一部分时可以通知应用，从而使表示层看到的数据是连续的，在某些情况下，如果表示层收到了所有的数据，则用数据代表表示层。示例：RPC，SQL等。

4）传输层

这层的功能包括是否选择差错恢复协议还是无差错恢复协议，及在同一主机上对不同应用的数据流的输入进行复用，还包括对收到的顺序不对的数据包的重新排序功能。示例：TCP，UDP，SPX。

5）网络层

这层对端到端的包传输进行定义，它定义了能够标识所有结点的逻辑地址，还定义了路由实现的方式和学习的方式。为了适应最大传输单元长度小于包长度的传输介质，网络层还定义了如何将一个包分解成更小的包的分段方法。示例：IP，IPX等。

6）数据链路层

它定义了在单个链路上如何传输数据。这些协议与被讨论的各种介质有关。示例：ATM，FDDI等。

7）物理层

OSI的物理层规范是有关传输介质的特性，这些规范通常也参考了其他组织制定的标准。连接头、帧、帧的使用、电流、编码及光调制等都属于各种物理层规范中的内容。物理层常用多个规范完成对所有细节的定义。示例：Rj45，802.3等。

8）网络模型概述

网络模型又可称的七层协议，但有时会减为5层；它是从下到上来看的，物理层是第一层，而应用层则是第七层。

2，从输入一个网址到浏览器显示页面经历的过程

1）DNS解析得到IP地址，根据IP地址，访问服务器；
2）请求之前先建立TCP连接，建立时有一个三次握手；
3）发送HTTP请求；
4）服务器处理得到的请求，并返回HTTP报文；
5）浏览器对得到响应的资源进行解析与渲染；
6）断开连接，存在四次挥手。

3，浏览器解析渲染页面详细步骤

浏览器解析渲染页面在解析HTML形成DOM树的同时解析CSS形成CSS规则树；合并DOM树和CSSOM树形成渲染树。利用渲染树对资源解析完并渲染出来显示。

4，建立TCP连接的过程

HTTP协议是基于TCP协议，在数据流通之前，有一个建立TCP连接的过程，它会经历三次握手与四次挥手。
1）三次握手:
第一次：客户端发送连接请求到服务器，等待服务器确认；
第二次：服务器确认客户端发送的请求同时也向客户端发送请求，等待客户端确认；
第三次：客户端确认发送过来的请求，建立TCP连接。
2）四次挥手：
第一次：甲方想要断开连接，发出断开连接的请求到服务器，然后等待乙方确认；
第二次：乙方确认收到甲方发送的请求；
第三次：乙方向甲方发出断开连接的请求，等待甲方确认；
第四次：甲方确认乙方发送过来的请求，断开TCP连接。
在第二次挥手中，乙方确认收到甲方发出的请求时，此时乙方可能还有数据没有给甲方，所以乙方不能立即断开连接，只能等到乙方把所有的事件处理完后，才能给甲方发一个可以断开连接的请求。

三、浏览器学习

1，跨域模块

1，同源策略是什么？

同源指的是协议，域名，端口都要相同，其中有一个不同就会产生跨域；同源策略是指作为浏览器最基本安全功能的一种约定，它是对以下请求进行限制来降低收到XSS、CSFR等攻击的风险；
同源策略限制的请求：
（1）浏览器的存储：Cookie、LocalStorage和IndexDB无法读取；
（2）浏览器的DOM对象和JS对象无法获得；
（3）AJAX请求不能发送

2，跨域是什么？

广义上来讲是指一个域下资源去请求另一个非同源域下资源；狭义上来讲是指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制；换句话说其实跨域的限制访问，是浏览器的限制。

3，跨域产生的条件或者说跨域产生的原因？

浏览器的限制和XHR（ajax）请求，也就是说通过JS代码利用axios去请求数据；服务器与服务器之间的请求是不存在跨域问题的，跨域问题仅仅存在于浏览器端

4，跨域解决常见方案：

1）jsonp：靠script标签的src发出请求，它只支持get请求；
2）cors：跨域资源共享，在服务器端指定请求头中的Access-Control-Allow-Origin字段即可，在后端配置允许哪个人可以访问服务器（遵循最小授权的原则）；
3）代理服务器：在前端开一个代理服务器，代理服务器与前端处于同一个域下，而代理服务器再去请求其它服务器时也不存在跨域问题
4）iframs：浮动框架，里面有src标签，利用src来进行请求
5）websocket：协议，可以使服务器主动的推送消息到客户端
6）nginx 反向代理解决跨域--->隐藏跨域翻墙软件--->正向代理
7）iframs+document.domain：要求两个页面属于一个基础域，使用同一个协议和同一个端口，这样就可以给他们同时添加document.domain来跨子域，它只适用于不同子域（父类与子类）的框架间的交互。
如果使用ajax的方法进行交互或者JS调用，可以让iframs载入一个与你想要通过ajax获取数据的目标页面处于相同的域的页面html文件，然后就可利用ajax来获取数据，另外再使用document.domain
8）window.name+iframs：配置代理文件，是没有任何内容的html文件，需要它和前端渲染的页面处于同一域下iframs的src属性由外域转向本地域，跨域的数据内容由iframs的window.name从外域传递到本地域，从而解决了跨域

2，ajax发展流程

1，原生ajax请求的5个步骤？

第一步，创建XMLHttpRequest对象，直接new上它就OK；
第二步，指定ajax请求那个服务器，配置请求的信息（请求的方式，请求的接口）
第三步，注册回调函数，监听ajax的状态变化
第四步，创建回调函数，如果状态==4，表示ajax完成了。而状态码为200，那么成功返回数据

2，jQuery封装的ajax？

直接通过$.ajax来请求数据，传入个地址即可，然后通过responseText就可拿到数据

3，新时代的ajax？

iOS--->ajax模块，
Android--->ajax模块，
h5--->axios 底层还是ajax
fetch 底层已不是ajax--->ajax已死，fetch永生

4，反向ajax？

反向ajax简单来说就是服务器主动把信息推送给客户端，指的是websocket协议

5，向服务器传送数据有几种方式？

1）通过url路径的形式，可通过?name="wangcai"&age=12的方式携带参数；
2）以form表单的形式传参，提交信息
3）以设置header的形式，直接在header头中来传参，在配置项中headers:{参数}