2024 秋季 最新前端面试题，前端程序员必备

• 物理层：对应 OSI 参考模型的的物理层层。在物理层上所传送的数据单位是比特。物理层 (physical layer) 的作用是实现相邻计算机节点之间比特流的透明传送，尽可能屏蔽掉具体传输介质和物理设备的差异。

• 7.POST 和 GET 有哪些区别？

• 请求参数：GET 把参数包含在 URL 中，用 & 连接起来；POST 通过 request body 传递参数。

• **请求缓存：**GET 请求会被主动 Cache，而 POST 请求不会，除非手动设置。

• 收藏为书签：GET 请求支持收藏为书签，POST 请求不支持。

• **安全性：**POST 比 GET 安全，GET 请求在浏览器回退时是无害的，而 POST 会再次请求。

• **历史记录：**GET 请求参数会被完整保留在浏览历史记录里，而 POST 中的参数不会被保留。

• **编码方式：**GET 请求只能进行 url 编码，而 POST 支持多种编码方式。

• 参数数据类型：GET 只接受 ASCII 字符，而 POST 没有限制数据类型。

• 数据包: GET 产生一个 TCP 数据包；POST 可能产生两个 TCP 数据包。

• 8.在交互过程中如果数据传送完了，还不想断开连接怎么办，怎么维持？

• 在 HTTP 中响应体的 Connection 字段指定为 keep-alive

• 9.HTTP 如何实现长连接？在什么时候会超时？

• HTTP 如何实现长连接？

• HTTP 分为长连接和短连接，其实本质上说的是 TCP 的长短连接。TCP 连接是一个双向的通道，它是可以保持一段时间不关闭的，因此 TCP 连接才有真正的长连接和短连接这一个说法。

• 长连接是指的是 TCP 连接，而不是 HTTP 连接。

• TCP 长连接可以复用一个 TCP 连接来发起多次 HTTP 请求，这样可以减少资源消耗，比如一次请求 HTML，短连接可能还需要请求后续的 JS/CSS/ 图片等

要实现 HTTP 长连接，在响应头设置 Connection 为 keep-alive，HTTP1.1 默认是长连接，而 HTTP 1.0 协议也支持长连接，但是默认是关闭的。

• 它们主要区别：

• 数据是否加密: Http 是明文传输，HTTPS 是密文

• 默认端口: Http 默认端口是 80，Https 默认端口是 443

• 资源消耗：和 HTTP 通信相比，Https 通信会消耗更多的 CPU 和内存资源，因为需要加解密处理；

• 安全性: http 不安全，https 比较安全。

• Https 流程是怎样的？

• HTTPS = HTTP + SSL/TLS，即用 SSL/TLS 对数据进行加密和解密，Http 进行传输。

• SSL，即 Secure Sockets Layer（安全套接层协议），是网络通信提供安全及数据完整性的一种安全协议。

• TLS，即 Transport Layer Security (安全传输层协议)，它是 SSL 3.0 的后续版本。

1. 用户在浏览器里输入一个 https 网址，然后连接到 server 的 443 端口。

2. 服务器必须要有一套数字证书，可以自己制作，也可以向组织申请，区别就是自己颁发的证书需要客户端验证通过。这套证书其实就是一对公钥和私钥。

3. 服务器将自己的数字证书（含有公钥）发送给客户端。

4. 客户端收到服务器端的数字证书之后，会对其进行检查，如果不通过，则弹出警告框。如果证书没问题，则生成一个密钥（对称加密），用证书的公钥对它加密。

5. 客户端会发起 HTTPS 中的第二个 HTTP 请求，将加密之后的客户端密钥发送给服务器。

6. 服务器接收到客户端发来的密文之后，会用自己的私钥对其进行非对称解密，解密之后得到客户端密钥，然后用客户端密钥对返回数据进行对称加密，这样数据就变成了密文。

7. 服务器将加密后的密文返回给客户端。

8. 客户端收到服务器发返回的密文，用自己的密钥（客户端密钥）对其进行对称解密，得到服务器返回的数据。

• 12. 对称加密与非对称加密有什么区别

• 对称加密：加密和解密使用相同密钥的加密算法。

• 非对称加密：非对称加密算法需要两个密钥（公开密钥和私有密钥）。 公钥与私钥是成对存在的，如果用公钥对数据进行加密，只有对应的私钥才能解密。

• 13.什么是 XSS 攻击，如何避免？

XSS 攻击，全称跨站脚本攻击（Cross-Site Scripting），这会与层叠样式表 (Cascading Style Sheets, CSS) 的缩写混淆，因此有人将跨站脚本攻击缩写为 XSS。它指的是恶意攻击者往 Web 页面里插入恶意 html 代码，当用户浏览该页之时，嵌入其中 Web 里面的 html 代码会被执行，从而达到恶意攻击用户的特殊目的。XSS 攻击一般分三种类型：存储型 、反射型 、DOM 型 XSS

XSS 是如何攻击的？

拿反射型举个例子吧，流程图如下：

• 如何解决 XSS 攻击问题

• 不相信用户的输入，对输入进行过滤，过滤标签等，只允许合法值。

• HTML 转义

• 对于链接跳转，如 <a href="xxx"> 等，要校验内容，禁止以 script 开头的非法链接。

• 限制输入长度等等

• 14.请详细介绍一下 TCP 的三次握手机制

• 开始客户端和服务器都处于 CLOSED 状态，然后服务端开始监听某个端口，进入 LISTEN 状态

• 第一次握手 (SYN=1, seq=x)，发送完毕后，客户端进入 SYN_SEND 状态

• 第二次握手 (SYN=1, ACK=1, seq=y, ACKnum=x+1)， 发送完毕后，服务器端进入 SYN_RCV 状态。

• 第三次握手 (ACK=1，ACKnum=y+1)，发送完毕后，客户端进入 ESTABLISHED 状态，当服务器端接收到这个包时

• 15.TCP 握手为什么是三次，不能是两次？不能是四次？

• TCP 握手为什么是三次呢？为了方便理解，我们以谈恋爱为个例子：两个人能走到一起，最重要的事情就是相爱，就是我爱你，并且我知道，你也爱我，接下来我们以此来模拟三次握手的过程：

• 为什么握手不能是两次呢？

如果只有两次握手，女孩子可能就不知道，她的那句我也爱你，男孩子是否收到，恋爱关系就不能愉快展开。

• 为什么握手不能是四次呢？

因为握手不能是四次呢？因为三次已经够了，三次已经能让双方都知道：你爱我，我也爱你。而四次就多余了。

• 16.TCP 四次挥手过程？

• 第一次挥手 (FIN=1，seq=u)，发送完毕后，客户端进入 FIN_WAIT_1 状态

• 第二次挥手 (ACK=1，ack=u+1,seq =v)，发送完毕后，服务器端进入 CLOSE_WAIT 状态，客户端接收到这个确认包之后，进入 FIN_WAIT_2 状态

• 第三次挥手 (FIN=1，ACK1,seq=w,ack=u+1)，发送完毕后，服务器端进入 LAST_ACK 状态，等待来自客户端的最后一个 ACK。

• 第四次挥手 (ACK=1，seq=u+1,ack=w+1)，客户端接收到来自服务器端的关闭请求，发送一个确认包，并进入 TIME_WAIT 状态，等待了某个固定时间（两个最大段生命周期，2MSL，2 Maximum Segment Lifetime）之后，没有收到服务器端的 ACK ，认为服务器端已经正常关闭连接，于是自己也关闭连接，进入 CLOSED 状态。服务器端接收到这个确认包之后，关闭连接，进入 CLOSED 状态。

• 17.TCP 四次挥手过程中，客户端为什么需要等待 2MSL, 才进入 CLOSED 状态

• 2MSL，2 Maximum Segment Lifetime，即两个最大段生命周期

• 1 个 MSL 保证四次挥手中主动关闭方最后的 ACK 报文能最终到达对端

• 1 个 MSL 保证对端没有收到 ACK 那么进行重传的 FIN 报文能够到达

• 18.为什么需要四次挥手？

小明和小红打电话聊天，通话差不多要结束时，小红说 “我没啥要说的了”，小明回答 “我知道了”。但是小明可能还会有要说的话，小红不能要求小明跟着自己的节奏结束通话，于是小明可能又叽叽歪歪说了一通，最后小明说 “我说完了”，小红回答 “知道了”，这样通话才算结束。

19. Session 和 Cookie 的区别。

我们先来看 Session 和 Cookie 的定义：

• Cookie 是服务器发送到用户浏览器，并保存在浏览器本地的一小块文本串数据。它会在浏览器下次向同一服务器再发起请求时，被携带发送到服务器。通常，它用于告知服务端两个请求是否来自同一浏览器，一样用于保持用户的登录状态等。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

• session 指的就是服务器和客户端一次会话的过程。Session 利用 Cookie 进行信息处理的，当用户首先进行了请求后，服务端就在用户浏览器上创建了一个 Cookie，当这个 Session 结束时，其实就是意味着这个 Cookie 就过期了。Session 对象存储着特定用户会话所需的属性及配置信息。

Session 和 Cookie 到底有什么不同呢？

• 存储位置不一样，Cookie 保存在客户端，Session 保存在服务器端。

• 存储数据类型不一样，Cookie 只能保存 ASCII，Session 可以存任意数据类型，一般情况下我们可以在 Session 中保持一些常用变量信息，比如说 UserId 等。

• 有效期不同，Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般有效时间较短，客户端关闭或者 Session 超时都会失效。

• 隐私策略不同，Cookie 存储在客户端，比较容易遭到不法获取，早期有人将用户的登录名和密码存储在 Cookie 中导致信息被窃取；Session 存储在服务端，安全性相对 Cookie 要好一些。

• 存储大小不同， 单个 Cookie 保存的数据不能超过 4K，Session 可存储数据远高于 Cookie。

来看个图吧：

用户第一次请求服务器时，服务器根据用户提交的信息，创建对应的 Session ，请求返回时将此 Session 的唯一标识信息 SessionID 返回给浏览器，浏览器接收到服务器返回的 SessionID 信息后，会将此信息存入 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名。

当用户第二次访问服务器时，请求会自动判断此域名下是否存在 Cookie 信息，如果存在，则自动将 Cookie 信息也发送给服务端，服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。

• 20.TCP 是如何保证可靠性的

• 首先，TCP 的连接是基于三次握手，而断开则是四次挥手。确保连接和断开的可靠性。

• 其次，TCP 的可靠性，还体现在有状态 ;TCP 会记录哪些数据发送了，哪些数据被接受了，哪些没有被接受，并且保证数据包按序到达，保证数据传输不出差错。

• 再次，TCP 的可靠性，还体现在可控制。它有数据包校验、ACK 应答、超时重传 (发送方)、失序数据重传（接收方）、丢弃重复数据、流量控制（滑动窗口）和拥塞控制等机制。

• 21TCP 和 UDP 的区别

• TCP 面向连接（（如打电话要先拨号建立连接）;UDP 是无连接的，即发送数据之前不需要建立连接。

• TCP 要求安全性，提供可靠的服务，通过 TCP 连接传送的数据，不丢失、不重复、安全可靠。而 UDP 尽最大努力交付，即不保证可靠交付。

• TCP 是点对点连接的，UDP 一对一，一对多，多对多都可以

• TCP 传输效率相对较低，而 UDP 传输效率高，它适用于对高速传输和实时性有较高的通信或广播通信。

• TCP 适合用于网页，邮件等；UDP 适合用于视频，语音广播等

• TCP 面向字节流，UDP 面向报文

• 22.TCP 报文首部有哪些字段，说说其作用

• 16 位端口号：源端口号，主机该报文段是来自哪里；目标端口号，要传给哪个上层协议或应用程序

• 32 位序号：一次 TCP 通信（从 TCP 连接建立到断开）过程中某一个传输方向上的字节流的每个字节的编号。

• 32 位确认号：用作对另一方发送的 tcp 报文段的响应。其值是收到的 TCP 报文段的序号值加 1。

• 4 位头部长度：表示 tcp 头部有多少个 32bit 字（4 字节）。因为 4 位最大能标识 15，所以 TCP 头部最长是 60 字节。

• 6 位标志位：URG (紧急指针是否有效)，ACk（表示确认号是否有效），PSH（缓冲区尚未填满），RST（表示要求对方重新建立连接），SYN（建立连接消息标志接），FIN（表示告知对方本端要关闭连接了）

• 16 位窗口大小：是 TCP 流量控制的一个手段。这里说的窗口，指的是接收通告窗口。它告诉对方本端的 TCP 接收缓冲区还能容纳多少字节的数据，这样对方就可以控制发送数据的速度。

• 16 位校验和：由发送端填充，接收端对 TCP 报文段执行 CRC 算法以检验 TCP 报文段在传输过程中是否损坏。注意，这个校验不仅包括 TCP 头部，也包括数据部分。这也是 TCP 可靠传输的一个重要保障。

• 16 位紧急指针：一个正的偏移量。它和序号字段的值相加表示最后一个紧急数据的下一字节的序号。因此，确切地说，这个字段是紧急指针相对当前序号的偏移，不妨称之为紧急偏移。TCP 的紧急指针是发送端向接收端发送紧急数据的方法。

• 23.HTTP 状态码 301 和 302 的区别？

• 301（永久移动）请求的网页已被永久移动到新位置。服务器返回此响应（作为对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。

• 302：（临时移动）服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置。

• HTTP 状态码 301 与 302 的区别：

它们之间关键区别在，资源是否存在有效性；

301 资源还在只是换了一个位置，返回的是新位置的内容；

302 资源暂时失效，返回的是一个临时的代替页上。

• 24.HTTP 状态码 301 与 302 的区别：

1. 它们之间关键区别在，资源是否存在有效性；

2. 301 资源还在只是换了一个位置，返回的是新位置的内容；

3. 302 资源暂时失效，返回的是一个临时的代替页上。

RTT 就是，一个数据包从发出去到回来的时间，即数据包的一次往返时间。超时重传时间，就是 Retransmission Timeout ，简称 RTO。

RTO 设置多久呢？

• 如果 RTO 比较小，那很可能数据都没有丢失，就重发了，这会导致网络阻塞，会导致更多的超时出现。

• 如果 RTO 比较大，等到花儿都谢了还是没有重发，那效果就不好了。

一般情况下，RTO 略大于 RTT，效果是最好的。一些小伙伴会问，超时时间有没有计算公式呢？有的！有个标准方法算 RTO 的公式，也叫 Jacobson / Karels 算法。我们一起来看下计算 RTO 的公式

一般情况下，RTO 略大于 RTT，效果是最好的。一些小伙伴会问，超时时间有没有计算公式呢？有的！有个标准方法算 RTO 的公式，也叫 Jacobson / Karels 算法。我们一起来看下计算 RTO 的公式

1. 先计算 SRTT（计算平滑的 RTT）

SRTT = (1 - α) * SRTT + α * RTT //求 SRTT 的加权平均

2. 再计算 RTTVAR (round-trip time variation)

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。
笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。