前端中级面试题精选

面向前端中级岗位，本清单整理 18 题，涵盖性能优化、框架设计与工程治理，并配备参考答案、追问与考察点。

性能优化

1. 分析首屏白屏时间的构成，并给出降低 LCP 的三种手段。

   • 参考答案：白屏包含 DNS、TCP、请求、下载、解析、执行与渲染。降低 LCP 可通过优先加载关键资源（preload）、SSR/静态化、图片懒加载 + 占位图、减少阻塞 JS。
   • 追问：优化收益如何量化？
   • 考察要点：关键渲染路径、数据驱动。

2. 如何构建基于 Performance API 的埋点体系来监控 FID 与 INP？

   • 参考答案：使用 web-vitals 或 PerformanceObserver 监听 first-input、event entries，记录时间戳、事件类型、用户上下文，结合采样策略上报后台并建立阈值报警。
   • 追问：当指标异常如何溯源？
   • 考察要点：web vitals、采样、可观测性。

3. 路由级代码分割有哪些策略？切片后如何处理缓存与骨架屏？

   • 参考答案：可使用动态 import、React.lazy、Vue defineAsyncComponent。需结合 Prefetch 与 Preload 优化跳转体验，并在加载期间提供骨架屏/占位组件。
   • 追问：如何兼顾 SEO？
   • 考察要点：懒加载体验、缓存策略。

4. 图片优化时如何组合 WebP、自适应裁剪与 Lazyload？

   • 参考答案：通过 <picture> 或 CDN 自动转 WebP，按 DPR/屏幕尺寸生成多版本；Scroll/IntersectionObserver 实现懒加载；结合占位图或 LQIP 提升感知体验。
   • 追问：CDN 规则如何配置？
   • 考察要点：资源管理、CDN、体验。

5. 解释 Service Worker 的工作流程，并说明如何避免缓存污染。

   • 参考答案：SW 经过 install/activate 后接管 fetch，可用 Cache API 缓存请求。需对版本号或 manifest 进行管理，确保更新时删除旧缓存并在激活阶段使用 clients.claim() 保证同步。
   • 追问：Workbox 如何简化开发？
   • 考察要点：离线缓存、版本控制。

6. 如何防止长任务阻塞主线程？

   • 参考答案：使用 requestIdleCallback、scheduler.postTask 或 Web Worker 将密集计算转移后台；拆分渲染、使用虚拟列表、减少 DOM 操作。
   • 追问：如何监控长任务？
   • 考察要点：任务切片、性能监控。

框架与架构

1. 在 React/Vue 中如何选择状态管理方案？比较 Redux、Pinia、Zustand 的特性。

   • 参考答案：Redux 适合复杂流转并有严格范式，Pinia 轻量、TS 友好，Zustand 无模板、支持简单 Hooks。选择依据是团队习惯、规模与调试需求。
   • 追问：回放能力与时间旅行在什么场景重要？
   • 考察要点：状态范式、可维护性。

2. 设计一个可插拔的表单引擎，如何实现字段联动与校验？

   • 参考答案：核心在于 schema->渲染组件映射、统一的状态/校验驱动。可使用 JSON Schema 或自定义 DSL，联动通过事件/订阅触发；校验可结合 yup/zod 并提供同步异步支持。
   • 追问：如何对大型表单做性能优化？
   • 考察要点：动态组件、DSL、性能。

3. 如何实现组件按需加载与 Tree Shaking？

   • 参考答案：按需加载可通过 babel-plugin-import、unplugin-auto-import 等插件处理；Tree Shaking 需使用 ESM、标记 sideEffects、避免动态 require。
   • 追问：第三方库不支持 ESM 时怎么办？
   • 考察要点：构建优化、依赖治理。

4. CSR + SSR 混合架构下如何避免 Hydration mismatch？

   • 参考答案：确保服务端与客户端输出一致，避免非确定性渲染；对仅客户端渲染的内容使用懒加载或 v-if 包裹；在 React 里可使用 suppressHydrationWarning 处理特定节点。
   • 追问：含时间戳或随机数时怎么处理？
   • 考察要点：同构渲染、一致性控制。

5. 请分享一次你将复杂业务逻辑抽象为自定义 Hook 或组合式函数的实践。

   • 参考答案：描述业务场景、抽象动机、拆分步骤、对比抽象前后的组件复杂度，并强调复用收益与测试策略。
   • 追问：抽象带来的隐患是什么？
   • 考察要点：代码复用、模块化、测试性。

6. 如何设计微前端的依赖共享与版本治理机制？

   • 参考答案：可使用 Module Federation 或 import-map 管理共享依赖，提供基线版本、兼容策略与自动升级提醒；新增 BFF 层处理公共 API。
   • 追问：出现版本冲突如何快速回滚？
   • 考察要点：微前端治理、运维。

工程治理

1. 构建规范化的 Git 提交流程，需要哪些工具与校验？

   • 参考答案：结合 Husky + lint-staged、Commitlint、规范化 PR 模板，并在 CI 中强制执行 lint/test/build，确保 commit 遵循 Conventional Commits。
   • 追问：如何避免滥用 fixup commit？
   • 考察要点：团队规范、自动化检查。

2. 如何在 CI 中并行执行单测、构建与 E2E？

   • 参考答案：可使用 GitHub Actions matrix、GitLab stages，将测试拆分多个 job 使用 cache；E2E 可在独立环境执行并收集报告。
   • 追问：失败后如何自动回滚？
   • 考察要点：CI 编排、缓存策略、危险控制。

3. 设计前端错误报警的分级策略与处理流程。

   • 参考答案：通常按照影响用户数与严重程度划分 S1-S4，配置阈值、值班、自动静默；流程包括采集 -> 聚合 -> 告警 -> 定位 -> 复盘。
   • 追问：如何区分真实告警与噪音？
   • 考察要点：稳定性治理、值班机制。

4. 介绍一次性能优化专项的推进过程与数据量化。

   • 参考答案：回答需包含指标基线、工具选择（Lighthouse、web-vitals）、行动项、跨团队协作与最终数据呈现（例如 LCP 降低 30%）。
   • 追问：如何确保优化可持续？
   • 考察要点：数据驱动、沟通、复盘。

5. 多团队共享 UI 组件库时如何管理版本与变更公告？

   • 参考答案：推荐使用语义化版本、变更日志、发布机器人，重大变更需提供迁移指南，并通过 Storybook/文档站同步公告。
   • 追问：如何处理 breaking change？
   • 考察要点：版本治理、发布流程。

6. 如何将监控、埋点与可观测性结果纳入 sprint 复盘？

   • 参考答案：在每个迭代梳理关键指标、异常案例、解决方案，将数据沉淀到仪表盘，并根据结果调整后续迭代计划。
   • 追问：指标过多时如何聚焦？
   • 考察要点：持续改进、指标管理。