项目与架构题通常用于判断你的项目经验是不是可复用、可扩展、能落地，而不是只会说技术名词。

应用架构

Monorepo

知识点讲解

Monorepo 适合多应用、多包协作。关键能力是 workspace 管理、依赖约束、任务编排、缓存、版本发布和代码边界。

面试常问

问：Monorepo 最大收益是什么？

答：跨包修改可以一次提交，复用工具链和组件更方便，依赖版本更统一。但要配合构建缓存和清晰边界，否则仓库会变慢变乱。

微前端

知识点讲解

微前端把大型前端拆成多个可独立开发、构建、部署的子应用。常见方案有 iframe、qiankun、Module Federation、Web Components。

面试常问

问：微前端要解决哪些隔离问题？

答：样式隔离、JS 沙箱、路由隔离、状态通信、依赖冲突、公共资源加载和权限统一。

渲染与跨端

SSR、SSG 与 CSR

知识点讲解

CSR 由浏览器渲染，交互灵活但首屏和 SEO 较弱。SSR 服务端每次请求生成 HTML，首屏和 SEO 更好。SSG 构建时生成静态 HTML，性能好但实时性较弱。

面试常问

问：SSR 的成本是什么？

答：服务端压力更大，缓存策略更复杂，开发时要处理同构限制、状态注水、接口转发和部署运维。

PWA、Electron 与 Tauri

知识点讲解

PWA 通过 Service Worker、Manifest、缓存策略提供类原生体验。Electron 用 Chromium + Node 构建桌面应用，生态成熟但包体大。Tauri 使用系统 WebView 和 Rust 后端，包体更小。

面试常问

问：PWA 能解决什么问题？

答：离线访问、资源缓存、添加到桌面、推送通知和弱网体验优化。但 iOS 支持程度和浏览器兼容要提前评估。

性能、埋点与监控

性能优化体系

知识点讲解

性能要从指标、链路、优化、监控闭环考虑。常见指标有 LCP、INP、CLS、FCP、TTFB。优化包括资源压缩、代码分割、缓存、SSR、图片优化、减少长任务。

面试常问

问：如何做首屏优化？

答：分析首屏关键路径，减少阻塞资源，路由级拆包，关键 CSS，图片懒加载和压缩，SSR/SSG，CDN 和缓存，并用真实监控验证。

埋点系统

知识点讲解

埋点分为代码埋点、可视化埋点、无埋点。核心要素包括事件名、属性、用户标识、页面、时间、会话、上报策略和隐私合规。

面试常问

问：埋点如何保证可靠上报？

答：页面卸载时用 sendBeacon，普通场景批量上报和失败重试，离线时暂存，服务端做去重和校验。

日志与监控

知识点讲解

前端监控包括 JS 错误、资源加载失败、接口错误、性能指标、白屏、用户行为路径。日志要能关联用户、页面、版本和请求 ID。

面试常问

问：如何定位线上白屏？

答：先看 JS 错误、资源加载、接口状态、首屏指标和版本发布记录，再结合用户环境、路由和行为路径复现。

DevOps 与部署

Docker

知识点讲解

Docker 把应用和运行环境打包成镜像，保证不同环境一致。前端常见做法是构建静态资源后用 Nginx 镜像托管，或部署 Node SSR 服务。

面试常问

问：前端为什么也要懂 Docker？

答：因为现代前端可能包含 SSR、BFF、构建服务和预览环境。理解 Docker 能帮助处理环境一致性、部署和回滚。

发布与回滚

知识点讲解

成熟发布链路包括分支策略、CI 检查、构建产物、灰度、监控、告警、回滚。静态资源建议内容哈希命名，HTML 控制缓存，避免版本错配。

面试常问

问：如何避免前端发布后缓存错乱？

答：JS/CSS 用 hash 文件名长期缓存，HTML 短缓存或不强缓存，发布时先上传静态资源再切 HTML，回滚时保留旧资源。

底层追问与代码示例

微前端的样式隔离

知识点讲解

微前端样式冲突来自全局 CSS、选择器命名、组件库样式和 reset。常见隔离方案包括命名空间、CSS Modules、Shadow DOM、运行时样式作用域。

1
2
3
4
5
6
7
8
/* 命名空间隔离 */
.app-order .button {
  color: #1677ff;
}

.app-user .button {
  color: #52c41a;
}

Shadow DOM 隔离更强：

1
2
3
4
5
6
7
8
const host = document.querySelector('#micro-app')
const shadow = host.attachShadow({ mode: 'open' })
shadow.innerHTML = `
  <style>
    button { color: red; }
  </style>
  <button>submit</button>
`

面试常问

问：Shadow DOM 是不是完美方案？

答：不是。它会带来样式穿透、弹窗挂载、组件库适配、全局主题、事件边界等问题，工程上要评估成本。

Module Federation 的核心思想

知识点讲解

Module Federation 允许一个应用在运行时加载另一个应用暴露的模块，并共享依赖。

1
2
3
4
5
6
7
8
9
10
11
12
// remote webpack config
new ModuleFederationPlugin({
  name: 'userApp',
  filename: 'remoteEntry.js',
  exposes: {
    './UserCard': './src/UserCard'
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
})
1
2
// host
const UserCard = React.lazy(() => import('userApp/UserCard'))

专业回答要补充：运行时加载提高独立部署能力，但也带来版本兼容、共享依赖、加载失败和监控问题。

SSR 状态注水与 XSS

知识点讲解

SSR 通常会把服务端获取的数据注入 HTML，客户端再 hydrate。如果直接拼 JSON，可能引入 XSS。

1
2
3
<script>
  window.__INITIAL_STATE__ = {"name":"</script><script>alert(1)</script>"}
</script>

应该安全序列化，转义危险字符：

1
2
3
4
5
6
7
8
function safeSerialize(data: unknown) {
  return JSON.stringify(data)
    .replace(/</g, '\\u003c')
    .replace(/>/g, '\\u003e')
    .replace(/&/g, '\\u0026')
    .replace(/\u2028/g, '\\u2028')
    .replace(/\u2029/g, '\\u2029')
}

面试常问

问：SSR Hydration mismatch 怎么产生？

答：服务端和客户端首次渲染结果不一致，比如使用随机数、时间、浏览器 API、用户本地状态，或者服务端数据和客户端数据不同步。

前端监控 SDK 简化实现

知识点讲解

监控 SDK 至少采集 JS 错误、Promise rejection、资源错误和性能指标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
window.addEventListener('error', event => {
  const target = event.target

  if (target && target !== window) {
    report({
      type: 'resource_error',
      url: target.src || target.href,
      tag: target.tagName
    })
    return
  }

  report({
    type: 'js_error',
    message: event.message,
    stack: event.error?.stack
  })
}, true)

window.addEventListener('unhandledrejection', event => {
  report({
    type: 'promise_error',
    reason: String(event.reason)
  })
})

function report(data) {
  const body = JSON.stringify({
    ...data,
    url: location.href,
    ts: Date.now()
  })
  navigator.sendBeacon('/monitor', body)
}

面试常问

问：为什么资源错误要用捕获阶段？

答：资源加载错误不会冒泡到 window，但可以在捕获阶段监听到。