🤯 前端面试不再容易 — 为这10个棘手问题做好准备

Source: Dev.to

概览

在 2025 年获得前端开发岗位已经不再仅仅是会 JavaScript 或流行框架如 React、Angular 或 Vue。
如今的面试更深入——招聘经理希望你了解 网页底层是如何工作的。

如果你正在准备前端面试，这里有 10 个真实场景的问题，可能决定你的成败 👇

1️⃣ 当你在浏览器中输入 google.com 时到底会发生什么？

请说明完整流程：

1. DNS 查询
2. TCP 握手
3. TLS 建立
4. HTTP 请求
5. 服务器响应
6. 渲染管线
7. JavaScript 执行

2️⃣ TCP 与 UDP — 能否用实际案例解释？

• TCP – 可靠、有序、错误检查的传输（例如网页浏览、电子邮件、文件传输）。
• UDP – 更快、无连接、没有传输保证（例如视频流、游戏、VoIP）。

3️⃣ HTTP 与 HTTPS 在底层是如何工作的？

描述 TLS/SSL 加密，它如何防止 MITM（中间人）攻击，以及为什么 HTTPS 对现代应用是强制性的（浏览器现在会把 HTTP 标记为不安全）。

4️⃣ HTTP/1.1 与 HTTP/2.0 — 为什么它们对性能很重要？

• HTTP/1.1 – 并行度受限，存在队头阻塞。
• HTTP/2 – 多路复用、头部压缩、服务器推送。

了解这些能体现你对 性能优化 的关注。
👉 Explained on FrontendGeek

5️⃣ 请讲解一下 HTTP 请求/响应的生命周期

从输入 URL 到最终渲染，覆盖：

1. 请求发送 – 包含 headers、body。
2. 服务器处理 – 返回带有 headers 和数据的响应。
3. 浏览器解析与渲染 – HTML → CSSOM → JS 执行 → 布局 → 绘制 → 合成。

6️⃣ JWT vs OAuth 2.0 vs OpenID Connect — 何时使用哪一种？

• JWT (JSON Web Tokens) – 无状态认证，适用于简单场景。
• OAuth 2.0 – 第三方授权（例如 “使用 Google 登录”）。
• OpenID Connect – 基于 OAuth 2.0 的身份层，用于用户认证。

7️⃣ 如何防御 Web 应用的 XSS、CSRF 与 CORS 问题？

• XSS – 对输入进行转义，使用 CSP 头部，使用消毒库。
• CSRF – CSRF token，SameSite Cookie。
• CORS – 正确配置服务器头部，了解预检请求。

8️⃣ DOM 与 Canvas 渲染 — 何时使用各自方案？

• DOM Rendering – 适合 UI 驱动、可访问、文字密集的应用。
• Canvas Rendering – 适用于游戏、重图形、动画、实时渲染。

9️⃣ Long Polling vs WebSockets vs Server‑Sent Events (SSE)

• Long Polling – 通过重复请求获取更新。
• WebSockets – 全双工、持久连接。
• SSE – 服务器向客户端推送事件（单向）。

🔟 Local Storage vs Session Storage vs Cookies — 应该选哪一个？

• Local Storage – 持久化键值存储（5–10 MB）。
• Session Storage – 关闭标签页时清除。
• Cookies – 较小，会随每个请求一起发送（适合 auth token）。

🧠 结束语

前端面试越来越难，因为公司希望招聘能够 调试、优化、扩展真实项目 的开发者——而不仅仅是会用 React 搭建一个待办事项应用。

如果你能自信地回答这 10 个问题，在下一次面试中就能脱颖而出。

👉 这些问题中哪一个是你在面试里被问到的？