前端面试题【背完最低10k】

最新推荐文章于 2024-03-13 23:45:13 发布

菜鸟0201

最新推荐文章于 2024-03-13 23:45:13 发布

阅读量160

点赞数

分类专栏：面试题文章标签：前端 http https websocket

本文链接：https://blog.csdn.net/weixin_43475142/article/details/128860468

版权

面试题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

面试题分五部分详解

前端部分
- 协议（http、https、websocket）

前端部分

主要从五个方面来准备，包括基础知识（html + css + javascript）、框架（vue2、vue3）、打包工具（webpack）、协议（http、https、websocket）、其它。

第四弹，网络协议。其实这一部分最常被问到的还是 http 的 get 与 post 请求的区别，这里是我从大佬那边搜刮到的（感谢技术大佬）。其中需要留意的是 websocket 协议，本人在被面试期间，都问了 websocket，毕竟这东西现在还是挺常用的，所以大家多看看，最好写写实例（底下附有示例代码）

协议（http、https、websocket）

1.http 协议的理解，http 请求头和响应头都有哪些字段？

HTTP 协议（超文本传输协议），是用于从万维网服务器传输超文本到本地浏览器的传送协议；是一个基于 TCP/IP 通信协议来传送数据（HTML、图片、查询结果等等）
	超文本：超越普通文本的文本，是文字、图片、视频等的混合体，最关键有超链接，能从一个超文本跳转到另一个超文本
	传输：HTTP 协议是一个双向协议
	协议：确立了一种计算机之间交流通信的规范，以及相关的各种控制和错误处理方式

http 报文里面主要由四层组成。响应头，请求头和请求体（装载请求数据）
	请求头： refferer，accept，cache-control，content-type，cookie，user-agent，pragma，origin 等
	响应头： allow，content-type，date，status，Access-Control-Allow-Origin，cache-control

POST、PUT、DELETE 等请求永远不会被缓存，GET 请求可以被缓存

1.1.HTTP 常见字段

HOST                客户端发送请求时，用来指定服务器的域名
Content-Length      服务器在返回数据时，会有 Content-Length 字段，表明本次回应的数据长度
Connection          最常用于客户端要求服务器使用 TCP 持久连接，以便其他请求复用
Content-Type        用于服务器回应时，告诉客户端，本次数据是什么格式
Content-Encoding    说明数据的压缩方法。表示服务器返回的数据使用了什么压缩格式

1.2.HTTP 协议的组成部分

HTTP 报文是 HTTP 协议在客户端和服务端之间传递的数据
HTTP报文由 起始行（start line）、头部（header）、主体（body）三部分组成。起始行是对报文进行的描述；头部包含报文的一些属性；主体包含报文的数据（可选）

请求报文包含三部分
	请求行：请求方法、URL、协议版本
	请求头（请求首部字段）
	请求数据（请求内容实体）

响应报文包含三部分
	状态行：协议版本、状态码、状态信息
	响应头（响应首部字段）
	响应数据（响应内容实体）

1.3.HTTP 协议有哪些请求方式

GET：用于请求访问已经被 URI（统一资源标识符）识别的资源，可以通过 URL 传参给服务器
POST：用于传输信息给服务器，主要功能与 GET 方法类似，但一般推荐使用 POST 方式
PUT：传输文件，报文主体中包含文件内容，保存到对应 URI 位置
DELETE：删除文件，与 PUT 方法相反，删除对应 URI 位置的文件
HEAD：获取报文首部，与 GET 方法类似，只是不返回报文主体，一般用于验证 URI 是否有效
OPTIONS：查询相应 URI 支持的 HTTP 方法

2.GET 和 POST 的区别

1.GET 请求的参数是放在请求的 URL 中，直接暴露；而 POST 请求的参数是放在 body 请求体中，按 F12也直接暴露。从安全性来讲，两者都不安全
2.GET 请求在 URL 中传递参数时会有长度限制，相对而言 POST 是无限制
3.GET 产生一个 TCP 数据包，POST 产生两个 TCP 数据包
	  对于 GET 方式的请求，浏览器会把 HTTP header 和 data 一并发送出去，服务器响应 200（返回数据）
	  对于 POST 方式的请求，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）
4.GET 请求会在浏览器主动缓存，而 POST 不会
5.GET 请求的参数会保存在浏览器中，而 POST 的参数不会保存在浏览器中

3.http 与 https 的工作原理

HTTP 协议工作与客户端-服务端架构上，浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端发送所有请求
	web 服务器有：Apache、IIS
	HTTP 默认端口为 80，也可以修改为其他端口

HTTPS:
	1.首先 HTTP 请求服务端生成证书，客户端对证书的有效期、合法性、域名是否与请求的域名、证书的公钥（RSA 加密）等进行校验
	2.客户端如果校验通过后，就根据证书的公钥的有效，生成随机数。随机数使用公钥进行加密（RSA 加密）
	3.消息体产生后，对它的摘要进行 MD5（或 SHA1）算法加密，此时得到了 RSA 签名
	4.发送给服务端，此时只有服务端（RSA私钥）能解密
	5.解密的到的随机数，在用 AES 加密作为密钥（此时的密钥只有客户端和服务端知道）

4.HTTP 与 HTTPS 的优点和缺点

（HTTP）
特点：
	1.无连接：限制每次连接只处理一个请求，服务端完成客户端的请求后，即断开连接。（传输速度快，减少不必要的连接，但也意味着每一次访问都要建立一次连接，效率降低）
	2.无状态：对于事务处理没有记忆能力。每一次请求都是独立的，不记录客户端任何行为。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大
	3.客户端/服务端模型：客户端支持 web 浏览器或其他任何客户端
	4.简单快速
	5.灵活：可以传输任何类型的数据

优点：
	1.支持客户/服务器模式
	2.应用广泛且跨平台
	3.简单快速、灵活和易于扩展

缺点：
	1.无连接
	2.无状态：可以减轻服务器负担，但进行关联操作时繁琐。（Cookie 解决了这个问题）
	3.明文传输：调试便利的同时带来了信息易被窃取
	4.不安全：（https 通过引入 SSL/TLS 层解决了这个隐患）

（HTTPS）
优点：
	1.可认证用户和服务器，确保数据发送到正确的客户机和服务器
	2.是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全
	3.是现行架构下最安全的解决方案（但不是绝对安全）

缺点：
	1.握手阶段比较费时，使页面加载时间延长
	2.HTTPS 连接缓存不如 HTTP 高效，会增加数据开销和功耗，甚至已有的安全措施也会因此受到影响
	3.SSL 证书需要收费，功能越强大费用越高
	4.SSL 证书通常需要绑定 IP，不能在同一 IP 上绑定多个域名

5.HTTP 与 HTTPS 的区别

HTTP 协议以明文方式发送内容，不提供任何方式的数据加密。HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。HTTPS 则是具有安全性的 SSL 加密传输协议。

HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。并且 HTTPS 协议需要到 ca 申请证书。

HTTPS 协议是由 SSL + HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。


HTTPS：是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于 TCP/IP。协议与各种应用层协议之间，为数据通讯提供安全支持。

区别：
	1.HTTP 是超文本传输协议，信息室明文传输，存在安全风险问题；HTTPS 则解决 HTTP 不安全的缺陷，在 TCP 和 HTTP 网络层之间加入 SSL/TLS 安全协议，使得报文能够加密传输
	2.HTTP 连接建立相对简单，TCP 三次握手之后便可进行 HTTP 的报文传输；而 HTTPS 在 TCP 三次握手之后，还需进行 SSL/TLS 的握手过程，才可进入加密报文传输
	3.HTTP 端口号是 80；HTTPS 端口号是 443
	4.HTTPS 协议需要向 CA（证书权威机构）申请数字证书，来保证服务器的身份是可信的

6.常见的 HTTP 状态码

2开头 （请求成功）表示成功处理了请求的状态代码
	200   （成功）  服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。	★
	201   （已创建）  请求成功并且服务器创建了新的资源。	★
	202   （已接受）  服务器已接受请求，但尚未处理。
	203   （非授权信息）  服务器已成功处理了请求，但返回的信息可能来自另一来源。
	204   （无内容）  服务器成功处理了请求，但没有返回任何内容。	★
	205   （重置内容） 服务器成功处理了请求，但没有返回任何内容。
	206   （部分内容）  服务器成功处理了部分 GET 请求。

3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向
	300   （多种选择）  针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
	301   （永久移动）  请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
	302   （临时移动）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
	303   （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。	★
	304   （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。	★
	305   （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
	307   （临时重定向）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。	★

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理
	400   （错误请求） 服务器不理解请求的语法。	★
	401   （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。	★
	403   （禁止） 服务器拒绝请求。
	404   （未找到） 服务器找不到请求的网页。	★
	405   （方法禁用） 禁用请求中指定的方法。
	406   （不接受） 无法使用请求的内容特性响应请求的网页。
	407   （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
	408   （请求超时）  服务器等候请求时发生超时。
	409   （冲突）  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。	★
	410   （已删除）  如果请求的资源已永久删除，服务器就会返回此响应。
	411   （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
	412   （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
	413   （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
	414   （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
	415   （不支持的媒体类型） 请求的格式不受请求页面的支持。
	416   （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
	417   （未满足期望值） 服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错
	500   （服务器内部错误）  服务器遇到错误，无法完成请求。	★
	501   （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
	502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
	503   （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
	504   （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求。
	505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

7.三种禁止浏览器缓存的头字段及其相应的设置值

response.setHeader('Cache-Control', 'no-cache')
response.setHeader('Pragma', 'no-cache')
response.setHeader('Expires', -1)    // Expires 是告诉浏览器把回送的资源缓存多长时间。-1 或 0，则是不缓存

8.SSL 握手过程

SSL 有 4 次握手。握手过程为：
	1.客户端请求 SSL 连接
	2.服务端发送包含公钥的证书
	3.客户端使用公钥加密对称密钥并发送给服务端
	4.服务端使用私钥解密对称密钥

9.TP的三次握手与四次挥手
TCP 连接建立

三次握手过程
	第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN(c)。此时客户端处于 SYN_Send 状态

	第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，并且也是指定了自己的初始化序列号 ISN(c)，同时会把客户端的 ISN + 1 作为 ACK 的值，表示自己已经收到了客户端的 SYN，此时服务器处于 SYN_REVD 的状态

	第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文，此时客户端处于 establised 状态。

	服务器收到 ACK 报文之后，也处于 establised 状态。此时，双方建立起连接。

TCP 连接释放

四次挥手过程
	第一次挥手：客户端发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态
	
	第二次挥手：服务端收到 FIN 报文之后，会发送 ACK 报文，且把客户端的序列号值 +1 作为 ACK 报文的序列号值，表明已经收到客户端的报文。此时服务端处于 CLOSE_WAIT 状态

	第三次挥手：如果服务端也想断开连接，和客户端的第一次挥手一样，发送 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。
	
	第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一段时间以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态。

	服务端收到 ACK 报文之后，就处于关闭连接，处于 CLOSED 状态。

10.WebSocket

websocket 是真正实现了全双工通信的服务器向客户端推送数据的互联网技术，是单个 TCP 连接上进行全双工通信协议

	1.websocket 是 HTML5 的一种新的协议，支持持久连续
	2.WebSocket 建立的是长连接，在一个会话中一直保持连接；而 ajax 是短链接，数据发送和接收完成后就会断开连接
	3.websocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据
	4.在 websocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

11.WebSocket 特点

1.与 HTTP 协议有良好的兼容性
2.建立在 TCP 协议之上，与 HTTP 同属于应用层
3.数据量小、性能开销小、通信高效
4.可以发送文本和二进制
5.可以与任意服务器通信
6.握手阶段采用 HTTP 协议，默认端口是 80 和 443
7.协议标识字符 ws、加密 wss
8.服务器可以主动向客户端请求

12.WebSocket、Socket、HTTP 的区别

websocket
	拥有完整的应用层协议，包含一套标准的 API
	是长连接，只需要通过一次请求初始化链接，然后所有的请求和响应都是通过这个 TCP 连接进行通信

socket
	是一组接口，是应用层与 TCP/IP 协议通信的中间软件抽象层

HTTP
	是短链接，请求之后会关闭连接

13.WebSocket 的使用

// 开启 WebSocket 服务
var ws = new WebSocket("ws://echo.websocket.org/")  // ws:// 表示的是websocket协议
if ("WebSocket" in window) {
    alert("您的浏览器支持 WebSocket!")
    // 进行监听连接成功，触发，当与服务器端建立 WebSocket 链接成功之后就会执行
    ws.onopen = function() {
        // 使用 send() 方法发送数据
        ws.send("发送数据")
    }
    // 接收信息
    ws.onmessage = function (evt){
        var received_msg = evt.data
    }
    // 当一个 WebSocket 连接被关闭时触发。
    ws.onclose = function(){
        // 关闭 websocket
        alert("连接已关闭...")
    }
} else {
    // 浏览器不支持 WebSocket
    alert("您的浏览器不支持 WebSocket!")
}