规划一套覆盖多品牌、多终端的前端平台，需要哪些核心能力与边界？

• 参考答案：平台需提供组件生态、脚手架、构建与部署、可观测性、设计系统支持，同时定义边界：哪些能力在平台、哪些留给业务；通过平台路线图与 ROI 评估推动落地。
• 追问：如何量化平台价值？
• 考察要点：平台定位、能力矩阵、收益评估。

如何设计统一的 Design Token 系统并兼容 Web、App、小程序？

• 参考答案：将 Token 分为 Global、Alias、Component 层，通过 Style Dictionary/SKDs 输出多种格式；结合 CSS Vars、Native Modules；提供版本管理和冲突检测。
• 追问：多语言/多品牌如何共存？
• 考察要点：Design Token、跨端同步。

构建组件市场需要哪些治理机制和安全策略？

• 参考答案：建立组件注册与审核流程、版本签名、依赖扫描、灰度发布；提供指标追踪（下载量、缺陷率），并设置故障回滚与责任人。
• 追问：跨团队的组件冲突如何调解？
• 考察要点：组件治理、安全、指标。

制定三年前端技术演进路线时应考虑哪些外部与内部因素？

• 参考答案：外部：行业趋势、浏览器标准、社区生态；内部：业务目标、现有基础设施、团队能力。路线需包含阶段目标、试点计划与评估节点。
• 追问：如何在不确定性下调整路线？
• 考察要点：战略规划、风险管理。

评估引入 Server Components、微前端、WebAssembly 等新技术的 ROI。

• 参考答案：需要分析痛点、预期收益、实施成本、团队能力，先做 POC 验证；设立成功指标，如性能提升、开发效率、资源节省。
• 追问：试点失败如何处理？
• 考察要点：技术评估、ROI、试点机制。

规划一个开源战略时，前端团队应承担哪些职责？

• 参考答案：包括选型评估、代码治理、社区运营、许可证与合规、内部贡献激励等；需要制定开源贡献流程与安全审计机制。
• 追问：如何处理安全漏洞披露？
• 考察要点：开源治理、合规、安全。

设计一个支撑多业务线的微前端平台，请说明路由、依赖共享、部署和回滚策略。

• 参考答案：可基于 Module Federation + import-map 管理子应用；路由层采用主应用集中控制并支持子应用内嵌；共享公共依赖并设置基线版本；部署通过 CI 生成独立产物并接入灰度、可一键回滚。
• 追问：不同技术栈如何共存与升级？
• 考察要点：微前端治理、部署、兼容。

规划大型应用的领域边界与包管理，如何在 Monorepo 中组织代码？

• 参考答案：以业务域拆分 package，公共模块沉淀到 shared 层；使用 PNPM workspace + Changeset 管理版本；利用 lint 规则限制跨域引用。
• 追问：如何监控依赖图与循环依赖？
• 考察要点：领域驱动、依赖治理。

构建 Design System 的步骤有哪些？如何处理多品牌、多语言需求？

• 参考答案：流程包括需求调研、Token 体系定义、组件库实现、设计工具同步、文档/示例。多品牌通过 Theme Token、CSS Var 或 Style Dictionary 生成；国际化需考虑排版与 RTL 支持。
• 追问：如何衡量 Design System 的 ROI？
• 考察要点：设计协同、组件复用、品牌一致性。

前端如何与 BFF 协作减少接口耦合并提升效率？

• 参考答案：BFF 承担聚合与缓存，前端提供契约与性能需求；采用 GraphQL/RESTful + Swagger 管理；通过 Contract Test 保证双方协议稳定。
• 追问：当 BFF 出现瓶颈时如何降级？
• 考察要点：接口契约、协作流程、降级策略。

边缘渲染（Edge Rendering）场景下如何实现容灾与功能降级？

• 参考答案：部署多节点并监控延迟，提供 Fallback 至原始渲染或静态化；关键数据使用 CDN KV 同步；可通过 Feature Flag 在边缘禁用高风险功能。
• 追问：多节点同步失败时如何感知？
• 考察要点：边缘计算、容灾、Feature Flag。

如何设计前端 A/B 实验平台，确保实验隔离与数据准确？

• 参考答案：平台需包含实验定义、用户分桶、曝光与埋点、指标计算。分桶常用 hash + Seed，保证互斥；数据进入分析仓库，提供统计显著性计算。
• 追问：实验冲突如何处理？
• 考察要点：实验治理、数据准确性。

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

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

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

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

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

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

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

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

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

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

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

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

解释标准盒模型与 IE 盒模型的区别，并写出在样式层面切换的方式。

• 参考答案：标准盒模型下元素宽高只包含 content，padding/border 会向外扩张；IE 盒模型将 padding 与 border 计入 width/height。可通过 box-sizing: content-box 或 box-sizing: border-box 切换，常见做法是对所有元素设置 border-box 以便计算布局。
• 追问：盒模型切换后对 margin 折叠是否有影响？
• 考察要点：理解 box-sizing、布局计算与兼容策略。

为一篇博客文章设计语义化结构，需包含导航、正文、侧边栏和页脚。

• 参考答案：推荐骨架：<header> 包含 LOGO 与 <nav>；主区域使用 <main>，内部用 <article> 承载正文、<aside> 放推荐或作者信息；页脚 <footer> 放版权与联系。语义化标签利于 SEO、无障碍与可维护性。
• 追问：IE9 以下不认识语义标签时如何兼容？
• 考察要点：语义标签、可访问性与兼容处理。

实现左侧 200px 固定、右侧自适应的两栏布局，请给出 Flex 与 float 两种方案。

• 参考答案：Flex：父元素 display:flex，左列设 flex:0 0 200px，右列 flex:1 即可。浮动：左列 float:left;width:200px，右列 margin-left:200px 或 overflow:hidden 清除浮动。两种方案需结合清除浮动或 align-items:stretch 保证高度。
• 追问：若需要支持等高列该如何处理？
• 考察要点：常见布局手法与兼容性差异。

描述 CSS 优先级的计算规则，并计算 #app .card > p.highlight 的权重。

• 参考答案：优先级从低到高依次为标签、类/伪类、ID、内联样式、!important。该选择器包含 1 个 ID、2 个类、1 个标签，权重为 0-1-2-1。覆盖时可提高权重或使用更具体选择器，但应避免滥用 !important。
• 追问：如何在不改 HTML 的前提下覆盖该规则？
• 考察要点：权重计算、样式覆盖策略。

使用媒体查询在 768px 以下折叠导航栏，请写出关键样式并说明断点依据。

• 参考答案：常见写法：@media (max-width:768px){ .nav { display:none; } .nav-toggle{ display:block; } }。768px 对应常见平板宽度，可依据实际数据调整。折叠时需保证可访问性，例如通过 aria-* 属性描述状态。
• 追问：深色模式或 prefers-reduced-motion 需额外处理吗？
• 考察要点：响应式断点、无障碍与兼容。

如何实现一个三列自适应网格，使卡片在桌面端显示 3 列、平板 2 列、移动 1 列？

• 参考答案：可使用 CSS Grid：父元素 display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;。或结合媒体查询手动设置列数。Grid 能自动在不同宽度下注入合适列数。
• 追问：需要兼容旧浏览器时如何降级？
• 考察要点：响应式网格与降级方案。