前端开发面试知识汇总-http篇

一、http相关

1. http与https的介绍
   http：超文本传输协议。基于TCP\IP通信协议来传递数据（HTML、文件、图片、查询结果等），是一个属于应用层的面向对象协议。用于从WWW服务器传输超文本到本地浏览器的传输协议。
   https：由http协议和SSL协议构建的可进行身份认证和加密传输的网络协议，比http协议的安全性更高。

2. http与https的区别
   信息传输方式：http是明文传输；https则是具有安全性的ssl加密传输协议。
   链接方式不同，端口不同：http协议的端口为80，https协议的端口为443。

3. https的优缺点
   优点：
   确保数据发送到正确的服务器和客户机上：https协议可认证用户和服务器。
   安全、可靠：是由http+SSL构建的可进行加密传输和身份认证的网络协议，比http安全，防止数据在传输过程中被窃取、改变、确保数据的完整性。
   缺点：
   延长加载时间，增加耗电： https握手阶段比较费时，会使页面加载时间延长50%，增加10%-20%的耗电。
   增加数据开销： https缓存不如http高效，会增加数据开销
   费用高：SSL证书需要钱，功能越强大的证书费用越高。

4. https协议的工作原理
   客户端使用https url访问服务器，要求web服务器建立SSL连接。
   web服务器接到客户端的请求后，将网站的证书（证书中包含了公钥），返回或者传输给客户端。
   客户端和服务器端开始协商SSL链接的安全等级，即加密等级。
   客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥加密会话密钥，并传输给网站。
   web服务器通过自己的私钥解密会话密钥
   web服务器通过会话密钥加密与客户端之间的通信。

5. http1.0、http1.1、http2.0主要特性
   http1.0：无状态、无连接的应用层协议
   http1.0规定浏览器和服务器建立短暂的连接，浏览器的每次请求都需要与服务器建立TCP连接，服务器处理完成后，立即断开TCP连接（无连接），服务器不跟踪每个客户端也不记录过去的请求（无状态）。
   对无状态性解决方案：借助cookie/session做身份认证和状态记录。
   http1.0没有对无连接的解决方案，无连接导致的问题：
   最大的性能缺陷就是无法复用连接：每次请求都需要建立一次TCP连接，而TCP连接的释放比较费事，使得网络利用率比较低。
   队头阻塞（head of line blocking）：http1.0规定下一个请求必须在前一个请求响应到达之前发送，如果前一个请求的响应一直不到达，那剩下的请求就会阻塞。
   http1.1：继承了http1.0简单的特点，还克服了诸多性能问题
   长连接：http1.1增加了一个connection字段，可以设置keep-alive保持连接不断开，避免了每次客户端和服务器请求重复建立释放TCP连接的过程，提高了网络利用率。如果客户端想关闭连接，可以在请求头中携带connection ：false，告知服务器关闭连接。
   管道化：基于http1.1的长连接，使得请求管道化成为可能，管道化使得请求可以“并行传输”，如响应的主体是一个html页面，页面中包含了很多img，这时候keep-alive就发挥了作用，能够"并行"发送多个请求。
   【服务器必须按照客户请求的顺序依次发送响应结果，以便客户端能够区分每次响应请求的内容】
   http2.0：不改变HTTP1.x的语义、方法、状态码。URL以及首部字段。只是把原来http1.x的header和body部分用frame重新封装了一层。大幅度的提高了web性能，在HTTP1.1完全语意兼容的基础上，进一步减少了网络的延迟。实现低延迟高吞吐量。对于前端开发者而言，减少了优化工作。
   帧：HTTP2.0通信的最小单位，所有帧都共享一个8字节的首部，其中包含帧的长度、类型、标志、还有一个保留位，并且至少有标识出当前帧所属的流的标识符，帧承载着特定类型的数据，如HTTP首部、负荷、等等。
   消息：比帧大的通讯单位，是指逻辑上的HTTP消息，比如请求、响应等。由一个或多个帧组成。
   流：比消息大的通讯单位。是TCP连接中的一个虚拟通道，可以承载双向的消息。每个流都有一个唯一的整数标识符。
   新增特性———二进制分帧：在二进制分帧层上，HTTP2.0会将所有传输信息分割为更小的消息和帧，并对它们采用二进制格式的编码将其封装。其中，HTTP1.X中的首部信息header封装到Headers帧中，而request body将被封装到Data帧中。http2.0通过在应用层和传输层之间增加一个二进制分帧层，突破了http1.1的性能限制，改进传输性能。
   新增特性———多路复用（连接共享）
   多路复用含义：基于二进制分帧层，HTTP2.0可以在共享TCP链接的基础上同时发送请求和响应。HTTP消息被分解为独立的帧，而不破坏消息本身的语义，交错发出去，在另一端根据流标识符和首部将他们重新组装起来。
   http2.0实现了真正的并行传输，它能够在一次TCP连接上进行任意数量的http请求，这一功能实现基于二进制分帧特性。
   每个请求是一个数据流，数据流以消息的方式发送，而消息又分为多个帧，帧头部记录着stream id用来标识所属的数据流，不同属的帧可以在连接中随机混杂在一起。接收方可以根据stream id将帧再归属到各自不同的请求当中去。
   新增特性———头部压缩
   HTTP1.x每次通讯（请求或响应）都会携带首部信息用于描述资源属性。而HTTP2.0在客户端和服务端之间使用首部表来跟踪和存储之前发送的键值对。请求与响应首部的定义在HTTP2.0中基本没有变，只是所有首部键必须全部小写，而且要求行要独立为:method:、:scheme:、:host:、:path:这些键值对。
   HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。高效的压缩算法可以很大的压缩header，减少发送包的数量从而降低延迟。
   

   新增特性———服务器推送
   服务器除了对最初请求的响应外，服务器还可以额外的向客户端推送资源，而无需客户端明确的请求。
   新增特性———流量控制
   新增特性———请求优先级

6. http各种状态码以及其含义：
   消息：
   【100】continue 继续。客户端应继续其请求。
   【101】Switching protocols 切换协议。服务端根据客户端的请求切换协议。只能切换到更高级的协议。
   【102】processing 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。
   成功：
   【200】ok 请求成功。一般用于GET和POST请求。
   【201】created 已创建。成功请求并创建了新的资源。
   【202】Accepted 已接受。已接受请求，但未处理完成
   【203】Non-Authoritative information 非授权信息。请求成功，但返回的meta信息不在原始的服务器，而是一个副本。
   【204】No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可以确保浏览器继续显示当前文档。
   【205】Reset Content 重置内容。服务器处理成功，用户终端应重置文档视图。可通过此返回码清除浏览器的表单域。
   【206】Partial Content 部分内容。服务器成功处理了部分GET请求。
   重定向：
   【300】 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择。
   【301】Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替。
   【302】Move Temporarily 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI发送以后的请求。
   【303】See Other 查看其它地址。与301类似。使用GET和POST请求查看。
   【304】 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
   【305】 Use Proxy 使用代理。所请求的资源必须通过代理访问
   【306】 Unused 已经被废弃的HTTP状态码
   【307 】 Temporary Redirect 临时重定向。请求的资源临时从不同的URI 响应请求。与302类似。使用GET请求重定向
   请求错误：
   【400】 Bad Request 请求无效 客户端请求的语法错误，服务器无法理解。原因:前端提交数据的字段名称和字段类型与后段实体没有保持一致。
   【401】 Unauthorized 请求要求用户的身份认证
   【402 】 Payment Required 保留，将来使用
   【403】 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
   【404】 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
   【405】 Method Not Allowed 客户端请求中的方法被禁止
   【406】 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
   【407】 Proxy Authentication Required 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
   【408】 Request Time-out 服务器等待客户端发送的请求时间过长，超时
   【409】 Conflict 服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突
   【410】 Gone 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
   【411】 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息
   【412】 Precondition Failed 客户端请求信息的先决条件错误
   【413】 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
   【414】 Request-URI Too Large 请求的URI过长（URI通常为网址），服务器无法处理
   【415】 Unsupported Media Type 服务器无法处理请求附带的媒体格式
   【416 】 Requested range not satisfiable 客户端请求的范围无效
   【417】 Expectation Failed 服务器无法满足Expect的请求头信息
   服务器错误：
   【500 】 Internal Server Error 服务器内部错误，无法完成请求
   【501】 Not Implemented 服务器不支持请求的功能，无法完成请求
   【502】 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
   【503】 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
   【504】 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
   【505】 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理。

7. websocket
   AJAX轮询：让浏览器隔个几秒就发送次请求，询问服务器是否有新消息。（要求服务器有较高的处理速度）
   long poll：与AJAX轮询类似，采用轮询方式，不过采用的是阻塞模型（一直打电话，没收到就不挂电话）。客户端发起请求后，没有消息，就一直不给客户端response，直到有消息才返回。客户端再建立连接，周而复始（要求服务器高并发）
   webSocket出现原因：http协议有一个缺陷，通信只能由客户端发起，当客户端想要了解服务器的最新消息，必须采用轮询，轮询的效率低，非常浪费资源，所以websocket就应运而生了。
   websocket特点：
   1、最大特点：服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送消息，是真正的双向平等对话。
   2、 建立在TCP（数据传输）协议之上，服务端的实现比较简单。
   3、与http有着良好的兼容性，默认端口也是80和443，并且握手阶段采用http协议，因此握手时不容易屏蔽，能通过各种代理服务器。
   4、 数据格式比较轻量，性能开销小，通信高效。
   5、可以发送文本，也可以发送二进制数据。
   6、没有同源（域名、端口、协议相同）限制，浏览器可以与任意服务器通信。
   7、 协议标识符是ws（如果加密，就是wss），url就是服务器网址。
   客户端API：
   一、websocket对象：
   作为一个构造函数，用来创建websocket实例（用于客户端与服务器连接）：

var ws = new WebSocket('ws://localhost:8080');

二、websocket.readyState:
readyState属性返回实例对象的当前状态。
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
三、websocket.onopen:
用于指定连接成功后的回调函数：

ws.onopen = function () {
  ws.send('Hello Server!');
}

多个回调函数，可以使用addEventListener方法：

ws.addEventListener('open', function (event) {
  ws.send('Hello Server!');
});

四、webSocket.onclose：
指定连接关闭后的回调函数：

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

多个回调函数，可以使用addEventListener方法：

ws.addEventListener("close", function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
});

五、webSocket.onmessage：
收到服务器数据后的回调函数：

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
});

六、webSocket.send()：
向服务器发送数据：

ws.send('your message');};

七、websocket.onerror:
报错时的回调函数：

socket.onerror = function(event) {
  // handle error event
};

socket.addEventListener("error", function(event) {
  // handle error event
});
};

八、websocket前端实例：

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};      

8. tcp与udp的区别
   tcp和udp都是传输层协议：
   【区别一】TCP面向连接，UDP是无连接的，即发送数据前不需要建立连接
   【区别二】TCP提供可靠的服务（有确认、重传、拥塞机制）。通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP尽最大努力交付，不保证可靠交付。TCP适合大数量的交换。
   【区别三】TCP面向字节流，UDP面向报文
   【区别四】TCP只能是1对1的，UDP支持1对1，1对多。
   【区别五】TCP首部较大为20字节，UDP只有8字节
   【区别六】TCP传输较慢，由于有三次握手及确认、重传、拥塞机制，被攻击的可能性更大，不太安全；UDP传输较快，且没有TCP的三次握手，确认等机制，所以，比TCP稍安全。
9. http支持的方法
   HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。
   HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。
   
10. GET、POST 区别
    【一】get参数通过url传递，post放在request body中传递。
    【二】get请求在url中传递参数是有长度限制（浏览器和服务器对于url长度会有限制）的，而post没有。
    【三】get比post更不安全，参数直接暴露在url中，不能用来传递敏感信息
    【四】get请求只能进行url编码，post支持多种编码方式
    【五】GET请求会被浏览器主动cache，而POST不会，除非手动设置。
    【六】GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
    GET和POST本质上都是TCP连接，并无差别。但是由于http的规定和浏览器/服务器的限制，导致他们在应用过程中体现一些不同。
    GET产生一个TCP数据包，POST产生两个TCP数据包。
    对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
    而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
11. 常见http首部
    通用头、请求头、响应头、实体头
    详情参见：HTTP头部详解
12. 输入url到页面加载完毕发生了什么
    DNS解析
    TCP连接
    发送HTTP请求
    服务器处理请求并返回http报文
    浏览器解析渲染页面
    连接结束
13. 描述XSS和CRSF攻击以及防御方法？
    CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个ｔａｂ页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候CSRF就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式的话：使用验证码，检查https头部的refer，使用token
    XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在url地址的请求参数中，防御的话为cookie设置httpOnly属性，对用户的输入进行检查，进行特殊字符过滤。

二、下一章节

html相关：源码地址
（持续过更新中…）
参考链接：https://blog.csdn.net/hardhard123/article/details/80232756