前端面试指南

Appearance

应用层（Application Layer） ​

应用层是网络体系结构的最顶层，负责为用户提供网络服务，并处理用户和应用程序之间的交互。

HTTP ​

HTTP（超文本传输协议）是一种用于在 Web 浏览器和 Web 服务器之间传输数据的应用层协议。它是建立在 TCP/IP 协议之上的，基于客户端 - 服务器模型。

HTTP 工作流程如下：

  1. 建立连接：客户端通过 TCP 三次握手 与服务器建立连接（默认 80 端口）。
  2. 发送请求：客户端向服务器发送 HTTP 请求，包括请求行、请求头和请求体。
  3. 处理请求：服务器接收到请求后，解析请求，执行相应的处理逻辑（获取资源、处理数据等）。
  4. 发送响应：服务器将处理结果封装成 HTTP 响应（响应状态码（200/404 等）、响应头、响应体（HTML/JSON 等））发送回客户端。
  5. 关闭连接：HTTP/1.0 默认关闭，HTTP/1.1 支持持久连接复用。

HTTP/2 ​

HTTP/2 是 HTTP 协议的第二个主要版本，于 2015 年作为 RFC 7540 发布。HTTP/2 的设计基于 Google 的 SPDY 协议，并在此基础上进行了扩展和标准化。

HTTP/2 的一些重要特性和改进：

  1. 多路复用（Multiplexing）：允许客户端在单个连接上同时发送多个请求。
  2. 头部压缩（Header Compression）：使用 HPACK 算法对 HTTP 头部进行压缩，减少了请求和响应中传输的头部大小。
  3. 服务器推送（Server Push）：允许服务器在客户端请求之前将资源推送给客户端，减少了客户端的等待时间。
  4. 流量控制（Flow Control）：允许客户端和服务器在传输数据时进行流量控制，以防止过载和拥塞。
  5. 服务器端请求优先级（Prioritization）：支持将请求划分为多个优先级，客户端可以指定请求的优先级，服务器可以根据优先级调整资源的传输顺序。
  6. 二进制协议（Binary Protocol）：HTTP/2 将 HTTP 消息封装为二进制帧进行传输。

HTTP/1 和 HTTP/2 的区别 ​

  1. 多路复用（Multiplexing）

    • HTTP/1：基于文本的协议，使用串行方式发送请求，每个请求都需要等待前一个请求的响应返回后才能发送下一个请求。
    • HTTP/2：引入了多路复用机制，可以在单个连接上同时发送多个请求和响应，消除了HTTP/1中的串行请求限制，提高了资源的加载速度。

  2. 头部压缩（Header Compression）

    • HTTP/1：每个请求和响应都会携带一系列的 HTTP 头部信息，这些头部信息在每次请求和响应时都会被发送，导致了不必要的重复传输。
    • HTTP/2：引入了头部压缩机制，使用 HPACK 算法对 HTTP 头部进行压缩，减少了传输的头部大小，降低了网络流量和延迟。

  3. 服务器推送（Server Push）

    • HTTP/1：客户端需要在收到HTML响应后解析 HTML 文档，发现其中需要的资源后再发送额外的请求获取这些资源。
    • HTTP/2：服务器可以在客户端请求之前将相关资源推送给客户端，减少了客户端的等待时间，提高了页面加载速度。

  4. 流量控制（Flow Control）

    • HTTP/1：基于 TCP 的流量控制机制，但缺乏对 HTTP 层面的流量控制。
    • HTTP/2：引入了自身的流量控制机制，允许客户端和服务器在传输数据时进行流量控制，以防止过载和拥塞。

  5. 服务器端请求优先级（Prioritization）

    • HTTP/1：不支持对请求的优先级进行明确控制，导致可能出现低优先级请求阻塞高优先级请求的情况。
    • HTTP/2：支持将请求划分为多个优先级，服务器可以根据优先级调整资源的传输顺序，优化页面的加载顺序，提高性能。

  6. 二进制协议（Binary Protocol）

    • HTTP/1：基于文本的协议，使用可读性较强的 ASCII 字符进行通信。
    • HTTP/2：将 HTTP 消息封装为二进制帧进行传输，更高效地进行了编码和解析，提高了传输效率。
特性HTTP/1HTTP/2
传输方式文本协议，串行请求二进制协议，多路复用
头部处理无压缩，重复传输HPACK 压缩，减少头部大小
服务器推送不支持可主动推送资源
优先级控制无支持请求优先级调度

HTTPS ​

HTTPS 代表超文本传输安全协议（Hypertext Transfer Protocol Secure），是 HTTP 的安全版本。它通过使用 SSL（安全套接层）或 TLS（传输层安全）协议对通信数据进行加密和身份验证，以确保数据在客户端和服务器之间的安全传输。

  • 作用：HTTP + SSL/TLS加密，防窃听/篡改
  • 流程：
    1. 客户端请求 → 服务器返回证书（含公钥）
    2. 双方协商生成对称加密密钥（主密钥）
    3. 后续通信使用对称加密传输数据
  • 端口：443（HTTP 为 80）
  • 证书：由可信的第三方证书颁发机构（CA）签发，验证服务器身份

HTTP 和 HTTPS 的区别 ​

  1. 安全性：

    • HTTP：是一种明文传输协议，数据在传输过程中不进行加密，容易受到窃听、篡改和偷窥等安全威胁。
    • HTTPS：通过使用 SSL（安全套接层）或 TLS（传输层安全）协议对通信数据进行加密，确保数据在客户端和服务器之间的安全传输，防止中间人攻击和数据泄露。

  2. 数据传输方式：

    • HTTP：使用 TCP（传输控制协议）作为传输层协议，数据以明文形式传输。
    • HTTPS：同样使用 TCP 作为传输层协议，但通过 SSL/TLS 对数据进行加密和解密，保证数据的机密性和完整性。

  3. 默认端口：

    • HTTP：默认端口为 80。
    • HTTPS：默认端口为 443。

  4. 证书要求：

    • HTTP：不需要使用数字证书。
    • HTTPS：服务器必须拥有有效的数字证书，证明其身份。数字证书通常由可信的第三方证书颁发机构（CA）签发，用于验证服务器的身份，确保连接的安全性。

WebSocket ​

WebSocket 协议是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端和服务器之间进行实时的双向数据传输。

主要特点：

  1. 全双工通信：允许客户端和服务器之间建立持久连接，双方可以同时进行数据的发送和接收。
  2. 基于事件驱动：客户端和服务器可以通过事件来发送和接收数据。
  3. 减少开销：WebSocket 协议通过在 HTTP 握手阶段升级协议，将 HTTP 连接升级为 WebSocket 连接，从而减少了握手和头部的开销，提高了通信的效率。
  4. 与 Web 原生集成：WebSocket 协议与 Web 原生技术（如 HTML5）集成良好，可以在 Web 浏览器中直接使用 JavaScript 等客户端语言进行 WebSocket 通信，实现实时的数据传输。
  5. 支持跨域通信：由于 WebSocket 协议在 HTTP 协议之上进行握手，因此它继承了 HTTP 的安全特性，包括同源策略、跨域通信等。

工作原理：

  1. 握手阶段：

    • 客户端发起 HTTP 请求，请求升级为 WebSocket 协议。
    • 服务器接受请求，返回 HTTP 101 状态码表示升级成功，此时连接转换为 WebSocket 连接。

  2. 数据传输：

    • 客户端和服务器可以通过 WebSocket 连接发送和接收数据帧（Frame）。
    • 数据帧可以是文本帧、二进制帧或控制帧，用于传输各种类型的数据。

  3. 保持连接：

    • WebSocket 连接是持久连接，通常保持连接打开，直到客户端或服务器明确关闭连接。

WebSocket 协议在实时通信和 Web 应用中得到广泛应用，特别是对于需要实时更新和交互的应用，如在线游戏、聊天应用、实时监控等场景，WebSocket 能够提供更加高效和即时的数据传输方式。

WebSocket 和 HTTP 的区别 ​

对比项HTTPWebSocket
通信模式请求 - 响应（短连接）全双工（长连接）
头部开销每次请求带完整头部仅握手阶段有 HTTP 头部
数据格式文本文本和二进制，允许传输各种类型的数据
适用场景静态资源加载、表单提交实时聊天、游戏、数据推送

FTP ​

FTP（File Transfer Protocol，文件传输协议）是一种用于在网络上进行文件传输的协议。它允许用户在客户端和服务器之间传输文件，并提供了一套用于文件管理的指令。FTP 协议使用客户端 - 服务器模型，客户端发起连接并发送命令，服务器接收并响应这些命令，以实现文件的上传、下载、删除、重命名等操作。

FTP 协议的工作原理：

  1. 建立连接：客户端向服务器发起 TCP 连接请求，通常使用默认端口 21。
  2. 用户认证：客户端在连接建立后，需要提供用户名和密码进行身份验证，以便服务器确认客户端的身份。
  3. 文件传输：一旦认证成功，客户端可以发送 FTP 命令来管理文件。
  4. 断开连接：文件传输完成后，客户端可以发送 QUIT 命令来关闭 FTP 连接，释放资源。

DNS ​

DNS（Domain Name System，域名系统）是互联网中用于将域名（例如 example.com）解析为 IP 地址（例如 192.0.2.1）的分布式命名系统。它充当了互联网中的“电话簿”，通过将易于记忆的域名映射到对应的 IP 地址，使用户可以方便地访问互联网上的各种资源。

DNS 的工作原理：

  1. 用户在浏览器输入域名，浏览器向本地 DNS 解析器请求解析。
  2. 本地 DNS 先查缓存（浏览器缓存 → 本地 DNS 缓存），若无结果则向根域名服务器查询。
  3. 根域名服务器指向对应的顶级域名服务器（如 .com），本地 DNS 继续查询。
  4. 顶级域名服务器提供下一层域名服务器，直到获取最终 IP 地址。
  5. 本地 DNS 返回 IP，浏览器据此访问目标网站。

CDN ​

CDN（Content Delivery Network，内容分发网络）是一组分布在全球不同位置的服务器集群，用于提供高效的内容传递服务。CDN 的目标是将内容（如网页、图片、视频、音频等）快速、可靠地分发给用户，以提高网站的性能、可用性和安全性。

CDN 的工作原理：

  1. 内容缓存：CDN 在全球服务器上缓存网站内容，用户请求时从最近的节点获取数据。
  2. 请求路由：用户的请求被智能路由到最近的 CDN 服务器，而非直接访问原始服务器。
  3. 内容传输：CDN 服务器快速响应并优化传输，提高加载速度和网站性能。
  4. 负载分担：CDN 分散访问流量，减少原始服务器压力，提升网站稳定性。
  5. 安全防护：CDN 提供 DDoS 防护和 Web 防火墙，增强网站安全性。
  • 加速原理：全球节点缓存资源，用户就近访问
  • 关键功能：
    • 缓存静态资源（HTML/CSS/图片）
    • 负载均衡 + 动态内容优化
    • DDoS 防护 + 压缩传输

POST 和 GET 的区别 ​

区别GETPOST
数据传输方式通过 URL 查询字符串传输，数据附加在 URL 末尾通过 HTTP 请求消息体传输，数据不会出现在 URL 中
安全性数据暴露在 URL 上，不适合传输敏感信息数据在消息体中，相对更安全，适合传输敏感信息
缓存可被浏览器缓存，适用于获取静态资源默认不会被缓存，每次请求都会重新提交
参数长度限制受 URL 长度限制（通常几千字符）不受 URL 长度限制，可传输大量数据
幂等性通常是幂等的，多次请求结果相同通常非幂等的，多次请求可能产生不同的结果

OPTIONS 请求 ​

OPTIONS 请求 用于获取服务器支持的 HTTP 方法和相关的通信选项，主要作用如下：

  1. 查询服务器支持的 HTTP 方法

    • 客户端可以使用 OPTIONS 请求来询问服务器某个资源（URL）支持哪些 HTTP 方法，例如 GET、POST、PUT、DELETE 等。

  2. 用于 CORS 预检请求（Preflight Request）

    • 在跨域请求中，如果请求方法是 PUT、DELETE 或者包含特殊的 Headers，浏览器会先发送 OPTIONS 预检请求，以确认服务器是否允许该跨域请求。

  3. 使用 OPTIONS 方法发送嗅探请求，以判断是否有对指定资源的访问权限。

浏览器地址栏输入 URL 到页面渲染的整个流程 ​

  1. URL 解析：浏览器会对该 URL 进行解析，分析需要使用的传输协议和请求资源的路径。

  2. 缓存检查：检查本地缓存，如果存在缓存资源且未过期则直接使用，否则发起新请求。

  3. DNS 查询：浏览器通过 DNS 解析器查询该域名对应的 IP 地址。如果 DNS 缓存中存在该域名对应的 IP 地址，则直接返回；否则，将请求发送到 DNS 服务器进行解析。

  4. 建立 TCP 连接：浏览器使用 HTTP 协议建立与服务器三次握手的 TCP 连接。在建立连接的过程中，如果是 HTTPS 协议，还需要进行 TLS/SSL 四次握手来确保通信安全。

  5. 发起 HTTP 请求：浏览器向服务器发送 HTTP 请求。

  6. 服务器处理请求：服务器接收到 HTTP 请求后，根据请求的 URL 和方法进行相应的处理。处理过程可能包括查询数据库、生成动态内容、读取静态文件等操作。

  7. 服务器响应：服务器处理完请求后，将相应的结果以 HTTP 响应的形式返回给浏览器。

  8. 接收响应：浏览器接收到服务器的响应后，开始解析响应。检查响应头中的 Content-Type，确定响应的数据类型（如 HTML、JSON、图片等），然后根据相应的数据类型进行相应的处理。

  9. 页面渲染：如果响应的是 HTML 类型的数据，浏览器开始解析 HTML，并构建 DOM 树。在构建 DOM 树的过程中，遇到外部资源（如 CSS、JavaScript、图片等）的引用，则会发起额外的请求获取这些资源。同时，浏览器还会解析 CSS，构建 CSSOM 树，并将 DOM 树和 CSSOM 树合并成渲染树。最后，浏览器根据渲染树进行页面渲染，呈现给用户。

  10. 断开连接：页面加载完成后，通过 TCP 四次挥手断开连接。

正向代理和反向代理 ​

正向代理和反向代理是两种常见的网络代理服务器，用于在客户端和服务器之间进行通信。它们的主要区别在于代理服务器的角色和通信方向。

  1. 正向代理（Forward Proxy）：
    • 客户端视角：代理服务器代替客户端向服务器发送请求。
    • 用途：
      • 访问受限的服务器：通过代理服务器绕过服务器的访问限制。
      • 隐私保护：代理服务器可以隐藏客户端的真实 IP 地址。
      • 缓存：代理服务器可以缓存请求的响应，提高访问速度。
    • 示例：VPN、代理服务器软件。
  2. 反向代理（Reverse Proxy）：
    • 服务器视角：代理服务器代替服务器接收请求并转发给客户端。
    • 用途：
      • 负载均衡：将请求分发到多个服务器，实现负载均衡。
      • 隐藏服务器：代理服务器可以隐藏服务器的真实 IP 地址。
      • 安全防护：代理服务器可以对请求进行过滤和安全防护。
    • 示例：Nginx、Apache 等 Web 服务器。

负载平衡的实现方式 ​

负载平衡是一种通过分配请求到多个服务器来均衡服务器负载的方法，以提高系统的性能、可靠性和可扩展性。

常见方案：

  1. 硬件：F5（高性能，成本高）
  2. 软件：Nginx（轮询/加权/最少连接）
  3. DNS 轮询：多个 IP 解析，简单但无动态调度
  4. 自动扩展：云服务动态扩容（如 AWS ELB）

多网站共享登录（单点登录） ​

前端单点登录（SSO）的实现常采用如下思路：

  1. 中心认证服务器：所有系统通过一个统一的认证中心（如 OAuth2.0/OIDC 服务器）进行登录验证。
  2. 登录重定向：用户访问任一系统时，如未登录则重定向到认证服务器进行登录。
  3. 令牌（Token）机制：登录成功后，认证服务器生成令牌（如 JWT），并通过重定向或回调传递给前端。
  4. 状态共享：前端存储令牌（如 cookie 或 localStorage），后续请求附带令牌进行身份验证，实现各系统共享登录状态。

Released under the AGPL-3.0 License

Copyright © 2024-present XPoet