牛客前端面经整理（Vue / 网络 / 测试 / CICD）（十七）

收录日期：2026-04-23
关键词：前端、Vue、网络、测试、工程化

1. 介绍 Vue 的响应式原理

参考答案

Vue2 和 Vue3 的核心差别是“拦截方式”和“依赖追踪粒度”。

• Vue2：用 Object.defineProperty 劫持 getter/setter；需要递归遍历对象做深度监听；对新增/删除属性、数组下标等场景有局限（需要 Vue.set 等手段补齐）。
• Vue3：用 Proxy 代理对象；可拦截更多操作（如 in、deleteProperty、数组等）；按需追踪（track）依赖、触发（trigger）更新；通常性能和一致性更好。
• 响应式更新流程（简化）：渲染时收集依赖（组件 effect）→ 数据变更触发依赖 → 调度器批量更新（nextTick 合并）。

---

2. axios 的核心机制是什么（怎么用、怎么封装）

参考答案

• 本质：基于 XHR（浏览器）或 http 模块（Node）封装的 Promise 风格请求库。
• 关键能力：请求/响应拦截器、自动序列化、取消请求（AbortController/CancelToken 历史方案）、超时、并发、统一错误处理。
• 常见封装要点：
  • 统一 baseURL、timeout、headers（如 token 注入）。
  • 响应层把“业务错误码”和“网络错误”分开处理。
  • 针对 401：刷新 token + 队列重放请求（注意并发刷新与重放顺序）。
  • 请求去重/防抖：同 key 的 in-flight 请求复用或取消旧请求。

---

3. WebSocket 和 HTTP 的区别

参考答案

• 连接模型：HTTP 以请求-响应为主（HTTP/1.1 可 keep-alive 但语义仍是请求驱动）；WebSocket 是长连接全双工。
• 建连方式：WebSocket 先走一次 HTTP Upgrade 握手（Connection: Upgrade、Sec-WebSocket-Key 等），再切换协议。
• 适用场景：
  • WebSocket：实时双向（聊天、协同、游戏）。
  • HTTP/SSE：服务端单向推送（日志流、AI 流式输出）更轻量。
• 代价：WebSocket 需要心跳保活、断线重连、消息协议、网关支持；调试与治理成本更高。

---

4. 线程池是什么？为什么要用？

参考答案

线程池是“复用线程 + 控制并发 + 统一调度”的执行器。

• 解决的问题：频繁创建/销毁线程成本高；无上限并发会导致上下文切换和资源耗尽。
• 典型能力：核心线程数、最大线程数、队列、拒绝策略、线程存活时间、任务优先级（视实现）。
• 落地建议：根据 CPU/IO 密集型任务设置并发；监控队列长度、任务耗时、拒绝次数，避免“队列无限增长”把问题推迟到 OOM。

---

5. Playwright 是什么？黑盒/白盒测试怎么区分？

参考答案

• Playwright：端到端（E2E）测试框架，驱动浏览器做真实交互；适合回归测试与关键链路验证。
• 黑盒测试：只看输入输出（页面行为、接口结果），不依赖内部实现；更贴近用户。
• 白盒测试：基于内部结构（函数/分支/覆盖率）；常见于单测、组件测试。
• 常见分层组合：
  • 单测（白盒）覆盖逻辑与边界。
  • 组件测试（半黑盒）覆盖交互与渲染。
  • E2E（黑盒）覆盖主流程，数量控制在“少而精”。

---

6. CI/CD 是什么？一般怎么搭？

参考答案

• CI：持续集成。核心是每次提交自动跑：lint / typecheck / test / build。
• CD：持续交付/部署。核心是把通过 CI 的产物自动发布到环境（灰度、回滚、审批）。
• 典型流水线：
  • 安装依赖（锁文件保证可复现）→ 质量门禁（lint/test）→ 构建产物（静态资源）→ 上传制品（OSS/制品库）→ 部署（容器/静态托管）→ 健康检查与回滚策略。
• 前端常见点：缓存依赖（pnpm store）、产物 hash、SourceMap 管控、环境变量注入、预发布验证。

---

7. HTTP 和 HTTPS 的区别

参考答案

• HTTPS = HTTP + TLS。
• 提供三件事：加密（防窃听）、完整性（防篡改）、身份认证（证书）。
• 握手要点（简化）：协商密码套件 → 证书校验 → 用非对称加密交换对称密钥 → 后续用对称密钥加密通信（性能更好）。

---

8. HTTP 报文的构成

参考答案

• 请求：请求行（方法/路径/版本）+ 请求头 + 空行 + 请求体。
• 响应：状态行（版本/状态码/原因短语）+ 响应头 + 空行 + 响应体。
• 常见头：
  • 缓存：Cache-Control、ETag、If-None-Match、Last-Modified。
  • 跨域：Access-Control-Allow-*。
  • 安全：Content-Security-Policy、Set-Cookie（HttpOnly/SameSite/Secure）。

---

9. TCP 和 UDP 的区别

参考答案

• TCP：面向连接、可靠、有序、流式；通过三次握手、序号、重传、滑动窗口、拥塞控制保证可靠性。
• UDP：无连接、尽力而为、面向报文；更低延迟，适合实时音视频、DNS 等（可靠性通常由上层协议补齐）。

---

10. 客户端和服务端是怎么建立连接的？

参考答案

以 HTTPS 为例的主链路：

• DNS 解析域名拿到 IP。
• TCP 三次握手建立连接。
• TLS 握手建立安全通道（证书校验 + 密钥协商）。
• 发送 HTTP 请求，服务端返回响应。
• 连接复用（keep-alive / HTTP2 多路复用）与断开（四次挥手/超时）。

---

11. 怎么创建一个完整的 HTTP 请求（你会关注哪些点）

参考答案

• URL：协议、域名、端口、path、query。
• 方法：GET/POST/PUT/DELETE 等；幂等性与重试策略匹配。
• headers：鉴权（token）、内容类型（Content-Type）、缓存策略、语言等。
• body：JSON / FormData / urlencoded；大文件上传用分片/断点续传。
• 超时、重试、幂等键、请求取消、错误兜底（提示/降级）。

---

12. 为什么要创建线程？好处是什么？

参考答案

• 并发：把耗时任务并行化（尤其是 IO 等待）提升吞吐。
• 响应性：把阻塞任务从主线程挪走（避免 UI 卡顿或请求排队）。
• 隔离：不同任务隔离失败影响（配合进程/线程池/熔断更明显）。
• 代价：上下文切换、同步开销、死锁风险；需要并发上限和可观测性。

---

13. Pinia 的作用是什么？

参考答案

Pinia 是 Vue 的状态管理方案（Vue3 官方推荐生态）。

• 解决的问题：跨组件共享状态、状态可追踪与可调试、统一的 action/异步处理。
• 特点：更轻量；API 更贴近组合式；支持 store 拆分；DevTools 友好；持久化、订阅等能力通过插件扩展。
• 常见实践：按领域拆 store；把副作用放 action；避免把“局部 UI 状态”强行上升到全局。

---

14. RESTful API 是什么？

参考答案

• 用资源（Resource）而不是动作命名：如 /users/123。
• 用 HTTP 方法表达操作语义：GET 查、POST 新增、PUT/PATCH 修改、DELETE 删除。
• 关注点：状态码语义、幂等性、分页/过滤、版本管理（header 或路径）、错误码规范。

---

15. 项目拷打：面试时如何讲清“项目的具体实现”？

参考答案

建议按“背景-目标-方案-落地-结果-复盘”讲，并能随时下钻：

• 架构图：前端分层（路由/状态/数据/组件）+ 服务端依赖（网关/鉴权/日志）。
• 关键链路：一次核心交互从 UI → 请求 → 状态更新 → 渲染的闭环。
• 难点与取舍：性能（首屏/长列表）、稳定性（错误边界/重试）、工程化（构建/发布）、安全（XSS/鉴权）。
• 数据化结果：指标提升、耗时下降、故障率降低，并说明如何测量。