计算机网络前端面试常考内容

籼xian米呀
134 阅读21分钟

基础知识

OSI 参考模型

应表会传网链物：应用层、表示层、会话层、传输层、网络层、数据链路层和物理层。

  1. 应用层（Application Layer） ：提供用户接口和服务，包括文件传输、电子邮件、远程登录等各种网络应用服务。
  2. 表示层（Presentation Layer） ：负责数据的格式化、加密和压缩，以确保一个系统的应用层能够读取另一个系统的数据。
  3. 会话层（Session Layer） ：管理不同设备间的通信连接，包括建立、维护和终止会话连接。
  4. 传输层（Transport Layer） ：提供端到端的通信，包括数据传输的可靠性和顺序性，常见的协议有TCP和UDP。
  5. 网络层（Network Layer） ：负责在不同网络之间传输数据包，包括寻址、路由选择和流量控制。
  6. 数据链路层（Data Link Layer） ：处理通过物理介质的直接传输，提供了可靠的数据传输，检测和纠正错误。
  7. 物理层（Physical Layer） ：负责传输比特流，并定义了数据传输的物理介质、电压规范、数据传输速率等。

这种分层模型的设计使得不同的网络设备和软件可以更容易地进行互联和互操作，同时也为网络协议的设计和实现提供了清晰的指导。

数据封装过程

在发送主机端，一个应用层报文被传送到传输层。

  1. 传输层封装：传输层将上层数据添加传输层协议首部，如TCP或UDP首部，以及端口号信息。应用层 报文和传输层首部信息 一道构成了运输层 报文段。附加的信息可能包括：允许接收端运输层向上向适当的应用程序交付报文的信息以及差错检测位信息。该信息让接收端能够判断报文中的比特是否在途中已被改变。
  2. 网络层封装：网络层为数据添加网络层协议首部，如IP首部，包括源IP地址和目标IP地址等，生成了 网络层数据报。
  3. 数据链路层封装：数据链路层将网络层的数据封装为数据帧，添加帧首部和帧尾部，包括源MAC地址和目标MAC地址等信息。
  4. 物理层传输：最终，帧被转换为比特流，在物理介质上传输。
应用层传输层网络层链路层物理层
报文报文段数据报数据帧比特流

TCP 协议

1、面向连接

三次握手（TCP连接建立）

  1. 第一步（SYN） ：客户端发送一个 SYN（同步）标志的数据包到服务器，并选择一个初始序列号（Sequence Number），然后进入 SYN_SENT 状态，等待服务器的确认。
  2. 第二步（SYN + ACK） ：服务器收到客户端的SYN后，会回复一个带有SYN和ACK标志的数据包，确认收到客户端的请求，并选择自己的初始序列号（ServerSeq），进入 SYN_RCVD 状态。
  3. 第三步（ACK） ：客户端收到服务器的确认后，再回复一个确认数据包ACK ，表示连接建立完成，双方可以开始传输数据。

四次挥手（TCP连接释放）

  1. 第一步：当一方决定关闭连接时，发送一个带有 FIN（结束）标志的数据包给对方，表示自己不再发送数据，但仍愿意接收数据。发送完毕后，进入 FIN_WAIT_1 状态。
  2. 第二步：另一方收到 FIN 包后，发送一个 ACK 确认包，并进入 CLOSE_WAIT 状态。此时，并不立即关闭连接，而是继续等待数据发送完成。
  3. 第三步：接收方发送完数据后，也发送一个带有 FIN 标志的数据包给发送方，表示自己不再发送数据，然后进入 LAST_ACK 状态。
  4. 第四步：发送方收到 FIN 包后，发送一个 ACK 确认包，进入 TIME_WAIT 状态。接收方收到 ACK 包后，关闭连接。发送方在经过一段时间后也关闭连接，结束整个四次挥手过程。

2、基于字节流

在TCP连接中，数据被视为连续的字节流，而不是被分割成消息或数据包。这种特性带来了以下影响和特点：

  1. 无消息边界：TCP并不维护消息边界，因此发送方传输的数据和接收方接收的数据之间并没有明确的消息分隔符。这就要求接收方在接收数据时要自行处理消息的边界和分割。
  2. 顺序交付：TCP保证数据按发送顺序到达接收方，并且在接收端按照发送顺序重新组装数据，以确保数据的顺序交付。
  3. 流量控制：TCP使用滑动窗口协议来进行流量控制，确保发送方不会发送过多的数据，以避免接收方无法处理的情况。
  4. 拥塞控制：TCP通过拥塞窗口和拥塞避免算法来避免网络拥塞，并在拥塞发生时进行适当的调整，以避免数据丢失和网络性能下降。

3、可靠性

  • 数据分块：应用数据被分割成 TCP 认为最适合发送的数据块。
  • 序列号和确认应答：TCP 给发送的每一个包进行编号，在传输的过程中，每次接收方收到数据后，都会对传输方进行确认应答，即发送 ACK 报文，这个 ACK 报文当中带有对应的确认序列号，告诉发送方成功接收了哪些数据以及下一次的数据从哪里开始发。除此之外，接收方可以根据序列号对数据包进行排序，把有序数据传送给应用层，并丢弃重复的数据。
  • 校验和： TCP 将保持它首部和数据部分的检验和。这是一个端到端的检验和，目的是检测数据在传输过程中的任何变化。如果收到报文段的检验和有差错，TCP 将丢弃这个报文段并且不确认收到此报文段。
  • 流量控制： TCP 连接的双方都有一个固定大小的缓冲空间，发送方发送的数据量不能超过接收端缓冲区的大小。当接收方来不及处理发送方的数据，会提示发送方降低发送的速率，防止产生丢包。TCP 通过滑动窗口协议来支持流量控制机制。
  • 拥塞控制：当网络某个节点发生拥塞时，减少数据的发送。1. 慢开始 2. 拥塞避免 3. 快重传 4. 快恢复
  • ARQ协议：也是为了实现可靠传输的，它的基本原理就是每发完一个分组就停止发送，等待对方确认。在收到确认后再发下一个分组。
  • 超时重传：当 TCP 发出一个报文段后，它启动一个定时器，等待目的端确认收到这个报文段。如果超过某个时间还没有收到确认，将重发这个报文段。

HTTPS 和 HTTP 的区别

  1. 安全性：HTTP传输数据是明文的，容易被窃听和篡改；而HTTPS通过加密通道传输数据，更安全。
  2. 加密：HTTPS使用SSL/TLS协议对数据进行加密处理，而HTTP不提供加密支持。
  3. 身份验证：HTTPS通过数字证书对服务器进行身份验证，确保客户端连接到正确的服务器；HTTP没有这种机制。
  4. 使用端口：HTTP默认使用端口80，而HTTPS默认使用端口443。

HTTP/2 和 HTTP/3

HTTP/2：

  1. 多路复用：通过单一的连接并行传输多个请求和响应，避免了HTTP/1.1中的队头阻塞问题，提高了性能。
  2. 头部压缩：使用HPACK算法对请求和响应的头部进行压缩，减少了数据传输量。
  3. 服务器推送：服务器可以在客户端请求之前将多个资源推送给客户端，提高了性能。
  4. 二进制分帧：HTTP/2将所有传输的信息分割为更小的消息和帧，对数据进行二进制格式编码，减少了传输开销。

HTTP/3：

  1. 基于QUIC协议：HTTP/3使用QUIC（Quick UDP Internet Connections）作为传输协议，而不是TCP，从而减少了连接建立的时延，并提供更好的拥塞控制。
  2. 多路复用：HTTP/3保留了HTTP/2中的多路复用特性，允许多个请求和响应并行传输。
  3. 0-RTT连接：HTTP/3支持0-RTT（零往返时间）连接建立，使得客户端在不与服务器进行握手的情况下发送数据，进一步减少了延迟。
  4. 连接迁移：QUIC协议允许连接从一个网络接口无缝切换到另一个网络接口，而不需要重新建立连接。

DNS 解析过程

  1. 浏览器查询：用户在浏览器中输入网址时，操作系统会首先检查本地 DNS 缓存，如果没有相关的记录，则会向本地 DNS 服务器发送查询请求。
  2. 本地 DNS 解析：本地 DNS 服务器接收到查询请求后，首先检查自身的缓存，如果有相关的记录，则直接返回给客户端；如果没有，则向根域名服务器发送查询请求。
  3. 根域名服务器查询：本地 DNS 服务器向根域名服务器查询顶级域名服务器的地址。
  4. 顶级域名服务器查询：根域名服务器返回顶级域名服务器的地址，然后本地 DNS 服务器向顶级域名服务器发送查询请求。
  5. 权威域名服务器查询：顶级域名服务器返回权威域名服务器的地址，本地 DNS 服务器再向权威域名服务器发送查询请求。
  6. 解析结果返回：权威域名服务器返回域名对应的 IP 地址给本地 DNS 服务器。
  7. 本地 DNS 返回：本地 DNS 服务器将查询结果返回给用户的设备，同时会将结果缓存一段时间，以便后续查询时直接返回结果，减少对外部服务器的查询压力。
  8. 建立连接：用户设备拿到 IP 地址后，就可以使用这个 IP 地址建立连接到相应服务器，开始访问网站或应用。

拓展：域名解析查询的两种方式

递归查询：如果主机所询问的本地域名服务器不知道被查询域名的 IP 地址，那么本地域名服务器就以 DNS 客户端的身份，向其他根域名服务器继续发出查询请求报文，即替主机继续查询，而不是让主机自己进行下一步查询。

迭代查询：当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的 IP 地址，要么告诉本地服务器下一步应该找哪个域名服务器进行查询，然后让本地服务器进行后续的查询。

前端常用网络状态码

  1. 200 OK：表示客户端的请求在服务器端被正确处理。
  2. 201 Created：表示请求已成功，并且在服务器端创建了新的资源。
  3. 204 No Content：表示服务器成功处理了请求，但不需要返回任何实体内容。
  4. 400 Bad Request：表示服务器无法理解客户端的请求，通常由于语法错误或无法满足请求。
  5. 401 Unauthorized：表示客户端未经授权访问资源。
  6. 403 Forbidden：表示服务器拒绝客户端请求，通常由于权限问题。
  7. 404 Not Found：表示服务器无法找到请求的资源。
  8. 500 Internal Server Error：表示服务器在处理请求时发生了错误。

网络安全

XSS（跨站脚本攻击）

主要类型：

  1. 存储型XSS：恶意脚本被存储在服务器端，当其他用户访问包含该恶意脚本的页面时，脚本会被执行。
  2. 反射型XSS：恶意脚本作为用户输入的一部分，然后被服务器“反射”回给用户。攻击者诱使用户点击包含恶意脚本的链接，从而触发执行。
  3. DOM型XSS：恶意脚本通过修改页面文档对象模型（DOM）而被执行，通常是由于页面的JavaScript代码未能正确过滤用户输入所导致的。

防范措施：

  1. 输入验证： 对用户输入的数据进行严格的验证和过滤，避免将未经处理的用户输入直接输出到网页。
  2. 转义输出：对用户输入的数据进行适当的编码或转义，确保在网页中输出的内容不会被误解为可执行的脚本。
  3. HTTP头部设置：使用适当的安全标头，如Content Security Policy（CSP），可以限制浏览器加载页面资源的行为，有效防止XSS攻击。
  4. 使用安全的编程实践：编写安全的前端和后端代码，包括限制对敏感操作的访问、使用

CSRF（跨站请求伪造）

主要特点：

攻击者利用用户在已认证的网站上的身份，通过伪装请求来执行一些操作，如发起转账、更改密码等。常通过诱使用户点击特定的链接、图片或访问特定页面触发，从而执行未经用户授权的操作。

防范措施：

  1. CSRF令牌：在表单提交或者请求中使用CSRF令牌，这些令牌会随着页面加载而动态生成，攻击者无法伪造这些令牌。
  2. SameSite属性：使用SameSite属性可以限制浏览器发送跨站请求，有效地减少CSRF攻击的风险。
  3. 双重提交Cookie：服务器要求在表单提交时同时验证Cookie和一个以隐藏字段形式存在的令牌，从而确保请求是合法的。
  4. 安全编程实践：对于敏感操作需要进行适当的身份验证，同时避免使用GET请求进行敏感操作。

点击劫持

主要特点：

通过将透明的页面元素叠加在诱导用户点击的页面上，攻击者可以引导用户在不知情的情况下点击隐藏的元素，实际上触发了未经授权的操作。

防范措施：

  1. X-Frame-Options头部：使用X-Frame-Options头部来防止网页被嵌入到iframe中，从而防止点击劫持攻击。
  2. Frame Busting代码：在网页中加入frame busting代码，以防止网页被嵌入到iframe中。

性能优化

网络性能优化技巧

  1. 文件压缩：压缩CSS、JavaScript和HTML文件，减小文件大小，提高加载速度。
  2. 图像优化：使用适当的图像格式（如WebP、JPEG、PNG）和压缩技术，以减小图像文件大小，同时保持图像质量。
  3. CDN（内容分发网络） ：利用CDN分发静态资源，将内容缓存到离用户更近的服务器，减少加载时间。
  4. 减少HTTP请求：合并CSS和JavaScript文件，使用CSS Sprites技术合并小图标，减少页面所需的HTTP请求次数。
  5. 使用缓存：设置适当的缓存控制头部，利用浏览器缓存和服务端缓存，减少重复请求，提高加载速度。
  6. 延迟加载：对于长页面或含有大量图片的页面，采用延迟加载技术，仅当用户滚动至相关区域时再加载图片或其他资源。
  7. 减少重定向：减少页面重定向，以避免额外的HTTP请求。
  8. 使用异步加载：将JavaScript脚本标记为异步加载，以使页面内容能够更快地加载并渲染。
  9. 减小DOM操作：减少DOM操作次数，优化JavaScript代码，以减少页面渲染的时间。
  10. 响应式设计：采用响应式网页设计，使网站能够适应不同尺寸和类型的设备，提高用户体验

页面加载过程

  1. DNS解析：浏览器根据URL中的域名查询DNS服务器，将域名解析为相应的IP地址。
  2. 建立TCP连接：浏览器与服务器建立TCP连接，进行三次握手，以确保双方能够通信。
  3. 发起HTTP请求：浏览器向服务器发送HTTP请求，请求相应的网页或资源。
  4. 服务器处理请求：服务器接收到请求后，进行相应的处理，如读取数据、执行程序等。
  5. 返回响应：服务器将处理后的结果以HTTP响应的形式返回给浏览器。
  6. 接收响应：浏览器接收到HTTP响应，并开始解析响应内容。
  7. HTML解析：浏览器开始解析HTML内容，构建DOM树（文档对象模型）。
  8. 构建CSSOM：同时，浏览器开始构建CSSOM（CSS对象模型），解析外部和内部样式表。
  9. 合并DOM与CSSOM，构建渲染树：浏览器将DOM树和CSSOM合并，生成渲染树（render tree），以确定页面上各个元素的布局和样式。
  10. 布局和绘制：浏览器根据渲染树进行布局（layout/reflow）和绘制（painting），确定每个元素在屏幕上的位置和样式。
  11. 加载和执行JavaScript：浏览器遇到JavaScript代码时，会下载、解析和执行JavaScript，可能会对DOM树和渲染树进行修改。
  12. 加载其他资源：浏览器加载页面中的其他资源，如图片、视频、字体等。
  13. 执行onload事件：当页面上所有资源都加载完成后，浏览器触发onload事件，页面加载完成。

前端缓存机制

  1. 浏览器缓存：
    • （强缓存）判断缓存是否过期，Cache-Control 与 expires 两者都存在时，Cache-Control 优先级更高。
      • Cache-Control:max-age=31536000(>0的数)
      • Expires:Mon, 06 Jan 2025 13:00:19 GMT(过期时间戳)
    • （协商缓存）Cache-Control设置为no-cache 或者 max-age=0时进行协商缓存
      • 根据Etag或Last-Modified判断缓存是否有效
  2. Service Worker缓存：Service Worker是一种在浏览器背后运行的脚本，可以拦截网络请求并缓存资源，以实现离线访问和更高级的缓存控制。
  3. Web Storage：使用localStorage和sessionStorage可以在浏览器端存储键值对形式的数据，以便在页面间共享数据或实现持久化存储。
  4. IndexedDB：IndexedDB是浏览器提供的客户端数据库，允许存储大量结构化数据，并支持高效的索引查询。
  5. HTTP/2 Server Push：HTTP/2协议支持服务器推送技术，允许服务器在响应中主动推送额外的资源

前端与后端交互

RESTful API 设计

  1. 使用合适的 HTTP 方法：
    • 使用 GET 用于获取资源。
    • 使用 POST 用于创建新资源。
    • 使用 PUT 或 PATCH 用于更新资源。
    • 使用 DELETE 用于删除资源。
  2. 使用合适的 URL 结构：
    • URL 应该清晰地表示资源的层次结构。
    • 使用名词表示资源，避免在 URL 中使用动词。
  3. 使用合适的状态码：
    • 返回合适的 HTTP 状态码，如 200（OK）、201（Created）、404（Not Found）、400（Bad Request）、等等。
  4. 使用合适的数据格式：
    • 使用 JSON 或 XML 作为数据交换格式。
    • 提供合适的响应头，声明返回数据的类型。
  5. 版本控制：
    • 考虑在 API 中包含版本信息，以便在未来进行兼容性更新。
  6. 安全性：
    • 使用 HTTPS 来保障数据传输的安全性。
    • 考虑使用 OAuth 或其他身份验证/授权机制来保护 API。
  7. 文档和元数据：
    • 提供清晰的文档，描述 API 的使用方法、端点、参数等信息。
    • 使用元数据来描述 API 的结构和行为。
  8. 错误处理：
    • 提供清晰的错误信息和适当的错误状态码，以便客户端能够正确处理错误情况。

跨域资源共享（CORS）

  1. 预检请求：对于某些跨域请求，浏览器会首先发送一个 OPTIONS 预检请求，以确定实际请求是否安全。服务器收到预检请求后，会返回响应来指示实际请求是否被允许。
  2. 响应标头：服务器通过设置特定的 HTTP 响应标头（例如 Access-Control-Allow-Origin）来指示哪些来源或方法被允许。
  3. 简单请求：对于满足一定条件的简单请求，浏览器会自动处理 CORS，而无需额外的预检请求。
  4. 认证：CORS 也支持对跨域请求中包含凭据（如 cookie 或 HTTP 认证信息）的情况进行处理。

JSON Web Token（JWT）认证

JSON Web Token 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)

  1. Header：包含了令牌的类型和所使用的签名算法。
  2. Payload：包含了声明（claim），例如用户的身份信息和其他数据。
  3. Signature：用于验证消息是否在传输过程中被篡改。 JWT 可以被用于实现用户认证和信息交换。它可以被用作身份验证令牌（在用户登录后颁发给客户端以便后续的请求中使用），也可以用于在跨域和跨系统的信息传递中作为安全的传输手段。

新兴技术

WebSockets

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许通过Web浏览器和服务器之间进行双向通信，为实时的数据传输提供了一种有效的方式。

  1. 双向通信：WebSocket允许服务器和客户端在同一时间内进行双向通信，这意味着服务器可以向客户端推送数据而不需要客户端发起请求。
  2. 实时性：由于WebSocket支持服务器向客户端推送数据，因此它非常适合于需要实时性的应用程序，如即时聊天、实时数据更新等。
  3. 持久连接：相较于传统的HTTP请求-响应模式，WebSocket连接是持久的，它可以在一段时间内保持打开状态，这有助于减少连接建立和关闭的开销。
  4. 协议标准：WebSocket是一种标准化的协议，它有明确定义的规范，可以在各种平台和环境下使用。

Service Worker

Service Worker是一种在浏览器背后运行的脚本，可用于实现诸如离线缓存、推送通知和后台同步等功能。它允许在没有页面或用户交互的情况下运行脚本，并且能够拦截和处理页面发出的网络请求。

  1. 离线体验：Service Worker可以用于创建离线体验，使得Web应用在没有网络连接时仍能够运行。它可以缓存应用所需的资源，如HTML、CSS、JavaScript和图像等，使得用户可以在离线状态下访问应用。
  2. 推送通知：Service Worker允许Web应用向用户发送推送通知，即使用户当前未打开应用或页面也可以接收到通知。
  3. 后台同步：Service Worker可以在后台进行数据同步，使得应用能够在网络恢复时更新数据。
  4. 安全性：Service Worker运行在一个独立的上下文中，因此它具有一定的安全特性，例如不能直接访问DOM，需要通过postMessage API进行通信。

HTTP/3 和 QUIC 协议

  1. HTTP/3:

    • HTTP/3使用QUIC作为传输协议，通过UDP而非TCP来实现更快的连接建立和更好的容错性。
    • HTTP/3在解决TCP的头阻塞问题上表现更好，并且支持多路复用、零RTT连接和更快的连接迁移。

  2. QUIC: 基于UDP的传输协议，旨在提供更快的连接建立和改善网络性能。

    • 快速连接建立：QUIC 减少了握手所需的往返次数，从而加快了连接建立的速度。
    • 多路复用：QUIC 可以在单个连接上发送多个流，从而避免了 TCP 上的头部阻塞。
    • 零往返时延：QUIC 可以在不进行握手的情况下发送数据，从而减少往返时延。
    • 连接迁移：QUIC 允许连接在不同的网络接口之间进行无缝切换，而无需重新建立连接。
    • 改进的拥塞控制：QUIC 通过使用自适应拥塞控制算法来更好地适应网络状况。
avatar
文章
阅读
粉丝