20道前端网络高频面试题【含详解】

前言：

随着互联网技术的迅猛发展，前端网络知识在现代Web开发中扮演着越来越重要的角色。掌握前端网络的高频面试题对于提升个人技能和在面试中脱颖而出都至关重要。新整理了一篇2024网络知识相关的高频面试题，无论您是资深网络工程师还是初入职场的新手，本文都将助您一臂之力，让您在面试中游刃有余，展现专业风采。

1. OSI 七层模型和 TCP/IP 四层模型的分层和含义

OSI 七层模型：

1. 物理层：负责传输原始的比特流，如电气信号、光信号等。
2. 数据链路层：确保物理层传输的数据无误，通过帧的方式传输数据。
3. 网络层：负责数据包从源到目的地的传输和路由选择。
4. 传输层：提供端到端的数据传输服务，主要协议有 TCP（可靠）和 UDP（不可靠）。
5. 会话层：管理和控制两个通信系统之间的会话连接。
6. 表示层：确保数据能够被接收系统理解，如数据格式转换、加密解密等。
7. 应用层：为应用软件提供网络服务，如 HTTP、FTP、SMTP 等。

TCP/IP 四层模型：

1. 链路层：对应 OSI 模型的物理层和数据链路层，负责在物理媒介上传输数据帧。
2. 网络层：对应 OSI 的网络层，主要协议是 IP，负责数据包的路由和传输。
3. 传输层：与 OSI 模型的传输层相对应，提供应用进程间的通信，主要协议有 TCP 和 UDP。
4. 应用层：整合了 OSI 模型的会话层、表示层和应用层，负责处理特定的应用程序细节。

2.TCP 协议怎么保证可靠的，UDP 为什么不可靠？

TCP 通过 连接导向、数据校验、拥塞控制 等机制确保数据的完整性和顺序，以及在网络条件变化时的适应性。这些特性使得 TCP 在数据传输中更加可靠，但同时也增加了协议的复杂性和传输延迟。

UDP 设计为简单和快速（无连接、无拥塞控制、 单播、多播、广播：），牺牲了数据的可靠性以换取效率。它适用于那些可以容忍一定数据丢失，但对实时性要求高的应用，如视频会议、在线游戏和 VoIP（网络电话）。

3. 三次握手和四次挥手过程：

三次握手的过程:

1. 客户端发送 SYN 包：客户端选择一个初始序列号 x，发送 SYN 包给服务器（SYN=1, seq=x）。
2. 服务器响应 SYN-ACK 包：服务器收到 SYN 包后，发送一个 SYN-ACK 包作为响应（SYN=1, ACK=1, seq=y, ack=x+1）。
3. 客户端发送 ACK 包：客户端收到 SYN-ACK 包后，发送 ACK 包确认连接建立（ACK=1, seq=x+1, ack=y+1）。

四次挥手过程，因为 TCP 连接是全双工的,所以每个方向的关闭都需要单独的步骤

1. 主动方发送 FIN 包：主动关闭方发送 FIN 包，请求关闭连接（FIN=1, seq=u）。
2. 被动方响应 ACK 包：被动关闭方收到 FIN 包后，发送 ACK 包作为确认（ACK=1, seq=v, ack=u+1）。
3. 被动方发送 FIN 包：被动关闭方准备关闭连接时，发送 FIN 包（FIN=1, seq=w）。
4. 主动方响应 ACK 包：主动关闭方收到 FIN 包后，发送最后的 ACK 包来关闭连接（ACK=1, seq=u+1, ack=w+1）。

4. TCP 如何保证有效传输及拥塞控制原理。

1. 数据校验：通过序列号和校验和确保数据的完整性和正确性。
2. 数据重传：如果接收方检测到丢包或损坏的数据，发送方会重传丢失的数据。
3. 流量控制：通过滑动窗口机制来控制发送速率，以适应接收方的处理能力。
4. 拥塞控制：通过调整发送速率来避免网络拥塞。

拥塞控制的原理涉及几个关键算法：

1. 慢启动：开始发送时，TCP 以较低的速率发送数据，并逐渐增加发送窗口大小，直到达到一个阈值或发生丢包。
2. 拥塞避免：在达到阈值后，TCP 进入拥塞避免阶段，窗口大小增长速度变慢。
3. 快重传：如果发送方收到三个相同的 ACK（对同一个数据包的确认），即使没有达到超时时间，也会触发重传。
4. 快恢复：与快重传配合使用，减少窗口大小但不会像慢启动那样大幅度减少，而是稍微减少窗口大小后进入拥塞避免阶段。

5.你对 TCP 滑动窗口有了解嘛？

TCP 滑动窗口是一种流量控制机制，用于确保接收方能够处理发送方发送的数据量, 滑动窗口机制允许 TCP 在不超负荷的情况下高效地传输数据，同时确保数据的顺序和完整性,以下是滑动窗口的基本概念：

1. 窗口大小：表示接收方当前能够接收的最大字节数。窗口大小可以动态调整，以适应接收方的处理能力。

2. 已发送但未确认的数据：发送方维护一个缓冲区，存放已发送但尚未收到确认的数据。这些数据的字节范围称为"已发送窗口"。

3. 接收窗口：接收方维护一个缓冲区，存放已接收但尚未被应用程序读取的数据。接收窗口的大小由接收方的缓冲区大小和当前处理能力决定。

4. 序列号：每个 TCP 段都有一个序列号，表示该段数据在发送方数据流中的位置。

5. 确认应答：接收方发送的 TCP 段包含一个确认号，它是期待接收的下一个字节的序列号。

6. 窗口滑动：当接收方处理了一部分数据后，它会发送一个更新的窗口大小给发送方。发送方根据这个新的窗口大小来发送更多的数据。

7. 流量控制：如果接收方的窗口大小变为 0，发送方必须停止发送数据，直到接收方再次发送一个非零窗口大小的确认。

6. HTTP 状态码有哪些？请列举几个常见的状态码及其含义。

1. 200 OK：请求成功，服务器已正常处理请求。
2. 301 Moved Permanently：永久重定向，资源的 URL 已永久更改。
3. 302 Found：临时重定向，资源的 URL 已临时更改。
4. 304 Not Modified：未修改，请求的资源未发生变化，可以使用缓存的版本。
5. 400 Bad Request：客户端请求有语法错误，服务器无法理解。
6. 401 Unauthorized：请求需要用户的身份认证。
7. 403 Forbidden：服务器理解请求但拒绝执行，可能是权限问题。
8. 404 Not Found：服务器上未找到请求的资源。
9. 500 Internal Server Error：服务器内部错误，无法完成请求。
10. 502 Bad Gateway：作为网关或代理的服务器从上游服务器收到无效响应。
11. 503 Service Unavailable：服务器目前无法使用，可能是过载或停机维护。
12. 504 Gateway Timeout：作为网关或代理的服务器未及时从上游服务器接收请求。

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

1. 发送心跳包：定期发送小的数据包，以保持连接活跃。心跳包可以是一个空的数据包或者特定的心跳消息。

2. 使用 HTTP 持久连接（HTTP Persistent Connections）：

   • 在 HTTP/1.1 中，默认开启持久连接，使用Connection: keep-alive头部。
   • 持久连接允许多个请求和响应在同一个 TCP 连接上复用，减少了连接建立和断开的开销。

3. 使用长轮询（Long Polling）：

   • 这是一种用于实现实时推送的技术，客户端发送请求后，服务器保持请求打开，直到有数据可发送。

4. 使用 WebSocket：

   • WebSocket 提供了全双工通信通道，可以在客户端和服务器之间建立持久的连接，并允许实时数据交换。

8.解释下 WebSocket ，它们在现代 Web 应用中的作用,或者(比较 WebSockets 和 HTTP 长轮询在实现实时通信时的优缺点)

WebSocket 是一种网络通信协议，提供了在单个 TCP 连接上进行全双工通信的能力。这意味着客户端和服务器可以同时发送和接收数据，实现实时双向交互：

1. 全双工通信：WebSocket 允许数据在客户端和服务器之间双向流动，无需客户端轮询或多次请求。

2. 持久连接：与 HTTP 请求-响应模式不同，WebSocket 建立连接后，该连接可以保持开放状态，用于传输任意数量的消息。

3. 低延迟：由于避免了 HTTP 连接的重复建立和关闭，WebSocket 可以减少通信延迟，适用于需要快速响应的应用。

4. 减少开销：WebSocket 数据传输没有 HTTP 头部的开销，使得数据传输更高效。

9. 什么是服务端推送技术（Server-Sent Events 或 WebSockets）？

1. Server-Sent Events (SSE)：

   • SSE 是一种允许服务器向客户端发送新数据的技术，通常用于单向通信，即从服务器到客户端。
   • SSE 使用标准的 HTTP 连接，但与常规 HTTP 连接不同的是，SSE 连接在数据发送后不会关闭，允许服务器持续推送消息。
   • SSE 通常用于实现如股票行情更新、新闻订阅、社交媒体实时通知等功能。

2. WebSockets：

   • WebSocket 提供了全双工通信通道，允许客户端和服务器之间进行双向通信。
   • 与 SSE 不同，WebSocket 协议在建立连接时需要一个握手过程，之后通信双方可以自由地发送数据。
   • WebSocket 适用于需要高度交互性的应用，如在线聊天、实时游戏、协作编辑等。

10. WebSocket 与 Ajax 的区别

特性	WebSocket	Ajax
通信方式	全双工通信	半双工通信
连接持久性	持久连接	每次通信后连接关闭
实时性	实时性强	可能存在延迟，需轮询或
用途	实时应用	表单提交、异步数据加载等
实现复杂性	需要特定的协议和握手过程	基于标准 HTTP，实现简单
浏览器兼容性	较新的浏览器支持	几乎所有现代浏览器都支持
安全性	支持 WSS 加密通信	可以通过 HTTPS 进行加密通信
资源消耗	长时间通信可能消耗更多资源	频繁请求可能带来开销

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

HTTP/1.1 Keep-Alive、服务端推送、轮询访问

13.什么是 GraphQL？与传统的 REST API 相比，它提供了哪些优势？

GraphQL 是一个由 Facebook 开发的查询语言，用于 API，并且是一个运行时用来处理这些查询的服务器端系统。

1. 类型系统：

2. 精确性：

3. 减少数据传输：

4. 实时更新：

5. 错误处理：

6. 灵活性：

7. 缓存优化：

14.HTTP 和 HTTPS 的区别是什么？

1. 安全性：

   • HTTP：是明文传输的，不提供任何加密，数据在传输过程中可以被窃听或篡改。
   • HTTPS：在 HTTP 的基础上通过 SSL/TLS 协议提供了加密，保护了数据传输过程中的安全性，防止数据被窃听或篡改。

2. 端口：

   • HTTP：默认使用 80 端口。
   • HTTPS：默认使用 443 端口。

3. URL：

   • HTTP：URL 以http://开头。
   • HTTPS：URL 以https://开头。

4. 搜索引擎优化（SEO）：

   • 使用HTTPS的网站可能会获得搜索引擎的优先排名，因为搜索引擎倾向于推广安全的网站。

5. 使用场景：

   • HTTP适用于不需要安全加密的普通文本数据传输，如一些静态网页。
   • HTTPS适用于需要保护用户隐私和数据安全的场合，如网上银行、在线支付、登录页面等。

15. 什么是跨域问题，如何解决？（同源策略）

跨域问题，也称为**CORS（Cross-Origin Resource Sharing，跨源资源共享）**问题，是指当一个 Web 应用尝试访问与它不同源的资源时，出于安全考虑，浏览器会阻止这种访问。这里的“源”指的是协议、域名和端口的组合。

同源策略是浏览器的一个安全机制，它限制了来自不同源的文档或脚本对当前文档的读取或设置权限。这是为了防止恶意网站读取另一个网站的数据。

解决跨域问题的方法包括：

1. JSONP（JSON with Padding）：

   • 利用<script>标签可以跨域加载资源的特性，通过添加一个查询参数并处理回调函数来实现跨域数据传输。

2. CORS：

   • 服务器通过在响应头中设置Access-Control-Allow-Origin，明确允许某些外部域访问资源。

3. 代理服务器：

   • 在客户端和目标服务器之间设置一个代理服务器，客户端的请求先发送到代理服务器，然后由代理服务器转发到目标服务器。代理服务器返回的数据再由代理服务器转发给客户端。

4. 服务端配置：

   • 服务器端可以配置 CORS 相关的响应头，允许特定的源、方法（如 GET、POST）和头部。

5. PostMessage：

   • postMessage是 HTML5 引入的一种在不同源间安全通信的方式。它可以用于在不同源的窗口、iframe 或者标签页之间发送消息。

6. WebSocket：

   • 当两个页面的主域名相同时，可以使用document.domain将它们的源设置为相同的，从而绕过同源策略。

7. WebWorker：

   • 利用window.name属性在不同页面间共享信息，因为window.name在不同页面加载时会保持不变。

8. WebAssembly：

   • 在某些情况下，WebAssembly 可以用来绕过 JavaScript 的同源策略限制。

16. 什么是 CDN，它如何加速内容的分发？

CDN，即内容分发网络（Content Delivery Network），是一种分布式网络服务，旨在通过将内容缓存到离用户更近的地理位置来加速内容的分发和提高访问速度。以下是 CDN 加速内容分发的主要方式：

1. 分布式节点：

   • CDN 在全球范围内部署了多个节点，这些节点存储了内容的副本。

2. 地理位置优化：

   • 当用户请求内容时，CDN 会将请求路由到最近的节点，减少数据传输的延迟。

3. 缓存机制：

   • CDN 节点会缓存静态内容，如图片、视频、CSS 和 JavaScript 文件，当请求到达时，直接从缓存中提供内容。

4. 负载均衡：

   • CDN 可以智能地分配请求到多个节点，避免单个节点过载。

5. 高可用性：

   • 多个节点的存在提高了服务的可用性，即使某个节点发生故障，请求也可以被重定向到其他节点。

6. 边缘计算：

   • 在一些高级的 CDN 服务中，边缘计算允许在网络边缘执行计算任务，减少延迟。

17: 什么是 DNS 预解析，它对性能优化有何帮助？

DNS 预解析（也称为 DNS 预取或 DNS 预加载）是一种技术，它允许浏览器在实际需要之前就开始解析域名。这通常用于提高 Web 页面的加载时间，通过减少页面加载过程中的 DNS 查询延迟。

DNS 预解析的工作原理：

1. 预解析触发：

   • 浏览器在解析 HTML 文档时遇到带有<link rel="prefetch">或<link rel="dns-prefetch">的标签时，会触发 DNS 预解析。

DNS 预解析对性能优化的帮助：

1. 减少延迟：

   • 通过提前进行 DNS 查询，可以减少页面加载过程中的延迟，因为当实际请求资源时，DNS 查询已经完成。

2. 优化用户体验：

   • 用户感受到的是页面加载更快，响应更迅速，从而提升整体的用户体验。

18.什么是 HTTP/2，它相比 HTTP/1.x 有哪些改进？

HTTP/2 是 HTTP 协议的第二个主要版本，旨在解决 HTTP/1.x 的一些性能限制，提供更快的网络通信。以下是 HTTP/2 相比 HTTP/1.x 的主要改进：

1. 二进制帧：

   • HTTP/2 采用二进制格式传输数据，而不是 HTTP/1.x 的文本格式，这使得解析更高效，减少了潜在的错误。

2. 多路复用：

   • HTTP/2 允许在单个 TCP 连接上并行传输多个请求和响应，解决了 HTTP/1.x 中的队头阻塞问题。

3. 头部压缩：

   • HTTP/2 引入了 HPACK 压缩算法，对请求和响应的头部信息进行压缩，减少了冗余头部信息的传输。

4. 服务器推送：

   • 服务器可以主动向客户端推送资源，而不需要客户端明确请求，这有助于提前加载资源。

5. 安全性：

   • 虽然 HTTP/2 本身不加密，但它强制使用 TLS（传输层安全性协议），提高了数据传输的安全性。

19. 什么是 Web Workers，它们如何帮助提高 Web 应用的性能？

Web Workers 是一种在 Web 浏览器中运行的后台线程，它们允许开发者在不干扰用户界面（UI）的情况下执行脚本操作。这意味着可以在一个线程上运行 JavaScript 代码，而用户界面则在另一个线程上保持响应和流畅。

1. 避免 UI 阻塞：

   • 在 Web Worker 中运行的脚本不会阻塞主线程，因此用户界面可以保持流畅，即使后台脚本正在进行复杂或耗时的计算。

2. 并行处理：

   • Web Workers 可以在不同的线程上并行执行任务，这使得多任务处理成为可能，提高了应用的效率。

3. 计算密集型任务：

   • 对于需要大量计算的任务，如图像处理、数据分析或复杂的数学计算，Web Workers 可以在后台处理这些任务，避免影响 UI 的响应性。

4. Web Sockets 通信：

   • Web Workers 可以处理来自 Web Sockets 的实时数据流，进行数据的实时分析和处理，而不影响 UI 线程。

5. 性能优化：

   • 通过将耗时的任务转移到 Web Workers，可以减少主线程的负担，从而优化整体性能。

6. 现代 Web 应用的需求：

   • 随着 Web 应用变得越来越复杂，Web Workers 为实现更高级的功能，如机器学习、物理模拟等，提供了可能。

20. 请解释什么是HTTP/2的多路复用，并说明它如何提高性能

在HTTP/1.x中，浏览器为了确保每个TCP连接的有效性，限制了每个域名下的并行连接数量（通常为6个）。这意味着，如果一个网页需要加载多个资源，浏览器需要在每个连接上按顺序加载资源，导致必须等待前面的请求完成后才能发送后续请求，这在多个资源依赖于前一个资源加载完成后才能显示的情况下，会严重影响页面加载速度。

HTTP/2通过引入帧（Frames）的概念来实现多路复用：

• 每个请求或响应都被封装在一个帧中，包括请求头、响应头和消息体等。
• 这些帧可以交错地发送，接收方根据帧的流标识（Stream Identifier）重新组装成完整的请求或响应。

多路复用优势：

1. 减少连接数：由于可以在单个连接上并行发送多个请求，减少了建立和关闭连接的开销。
2. 避免队头阻塞：并行传输机制允许资源交错加载，避免了前一个请求的延迟影响到后续请求。
3. 提高资源利用率：TCP连接的带宽得到更充分的利用，减少了空闲时间。
4. 减少往返时间（RTT）：由于请求可以并行发送，减少了等待服务器响应的时间。
5. 改善用户体验：页面和资源加载更快，提供更流畅的浏览体验。
6. 优化服务器资源分配：服务器可以更有效地处理多个请求，提高资源分配的灵活性。

总结：

本文涵盖了从OSI七层模型和TCP/IP四层模型的基础理论，到TCP和UDP协议的可靠性对比，再到三次握手和四次挥手的具体过程，深入探讨了TCP如何通过各种机制保证数据的有效传输和拥塞控制。同时，文章还详细解释了HTTP状态码的含义、如何维持数据传输完成后的连接、WebSocket与HTTP长轮询的优缺点比较、服务端推送技术、WebSocket与Ajax的区别、Fetch API与传统Request的区别、HTTP长连接的实现和超时机制、GraphQL的优势、HTTP与HTTPS的区别、跨域问题的解决方案、CDN的作用、DNS预解析的重要性、HTTP/2的改进、Web Workers的作用以及HTTP/2多路复用的原理和优势。这些内容不仅提供了丰富的知识储备，也为即将参加面试的你提供宝贵的复习资料，帮助你在面试中展现出色的表现。

敲字不易，如果此文章对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。

感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于【网络安全】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个网络安全工程师们走过最艰难的路程，希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取