腾讯前端 AI 面试深度解析：核心考点与实战复盘

2. 浏览器的缓存策略

缓存是性能优化的基石，主要分为强缓存和协商缓存。理解两者的区别及适用场景至关重要。

// 浏览器缓存分为两大类：强缓存和协商缓存
// 1. 强缓存（不发请求，直接读本地）
//    响应头 Cache-Control: max-age=3600 // 缓存 1 小时 (HTTP/1.1)
//    响应头 Expires: Wed, 21 Oct 2025 07:28:00 GMT // 绝对时间 (HTTP/1.0)
//    适用场景：静态资源（图片、CSS、JS）、带 hash 的文件、长期不变的内容

// 2. 协商缓存（发请求，服务器判断）
//    响应头（第一次返回） Last-Modified / ETag
//    请求头（后续请求带上） If-Modified-Since / If-None-Match
//    服务器判断：未修改 → 返回 304，已修改 → 返回 200 和新资源
//    适用场景：HTML 文件、API 接口、可能变化但不频繁的资源

// 3. 缓存位置
//    - Memory Cache（内存缓存）：快，进程关闭后消失
//    - Disk Cache（磁盘缓存）：慢，持久化
//    - Service Worker Cache：可编程缓存

// 4. 最佳实践组合
//    HTML：协商缓存 Cache-Control: no-cache
//    JS/CSS/图片：强缓存 + 文件名 hash
//    app-8f3c9d.js → 内容变化时 hash 变化，自动更新 Cache-Control: max-age=31536000

3. React 合成事件

React 封装的事件系统解决了跨浏览器兼容性问题，并通过事件委托提升了性能。理解其背后的机制有助于排查一些奇怪的事件触发顺序问题。

// 1. 什么是合成事件（SyntheticEvent）
//    React 封装的事件系统，跨浏览器包装器
//    使用方式：<button onClick={handleClick}>点击</button>

// 2. 合成事件的作用
//    2.1 浏览器兼容性：统一行为，避免 IE 与其他浏览器差异
//    2.2 性能优化（事件委托）：所有事件都委托到 document（React 16）或 root 容器（React 17+）
//    2.3 事件池（React 16 及以前）：对象会被复用，属性在回调后清空
//         解决：e.persist() 或 React 17 移除事件池

// 3. 合成事件 vs 原生事件对比
//    | 维度       | 合成事件           | 原生事件             |
//    |------------|--------------------|----------------------|
//    | 绑定方式   | 通过 JSX 属性      | addEventListener     |
//    | 触发阶段   | 统一在冒泡阶段     | 可指定捕获/冒泡      |
//    | 跨浏览器   | 统一行为           | 有差异               |
//    | 内存占用   | 事件委托，占用少   | 每个事件单独绑定     |

// 4. 混合使用注意事项
//    合成事件先触发，原生事件后触发
//    阻止冒泡需注意：stopPropagation() 只能阻止合成事件的冒泡，无法阻止原生事件冒泡

4. 动态路由管理系统设计

权限控制是后台管理系统的核心。如何防止权限滥用，确保用户只能访问授权的路由，需要前后端配合。

// 1. 系统需求分析
//    - 动态路由：根据配置动态生成
//    - 权限控制：不同用户看到不同路由
//    - 安全性：防止权限滥用

// 2. 数据结构设计
const routesConfig = {
  menus: [
    { path: '/dashboard', name: '仪表盘', permission: 'dashboard:view' },
    { path: '/user', name: '用户管理', children: [{ path: '/user/list', permission: 'user:list' }] }
  ],
  permissions: ['dashboard:view', 'user:list']
}

// 3. 动态路由生成逻辑
function generateRoutes(menuItems, userPermissions) {
  const routes = []
  menuItems.forEach(item => {
    if (item.permission && !userPermissions.includes(item.permission)) return
    const route = {
      path: item.path,
      component: componentMap[item.component],
      meta: { permission: item.permission }
    }
    if (item.children) route.children = generateRoutes(item.children, userPermissions)
    routes.push(route)
  })
  return routes
}

// 4. 权限滥用解决方案
//    方案 1：后端路由白名单（前端只存静态路由，动态路由全由后端返回）
//    方案 2：路由守卫二次校验（router.beforeEach 检查目标路由所需权限）
//    方案 3：按钮级权限控制（自定义指令 v-permission）
//    方案 4：动态路由缓存（权限变化时重置路由 matcher）

5. DOM 与 BOM 的区别

虽然经常混用，但 DOM 和 BOM 的操作对象截然不同。DOM 操作文档内容，BOM 操作浏览器窗口本身。

// 1. DOM (Document Object Model)
//    核心对象：document
//    作用：操作页面内容，如 getElementById, createElement
//    标准：W3C 标准

// 2. BOM (Browser Object Model)
//    核心对象：window
//    作用：操作浏览器本身，如 location, history, navigator, screen
//    实现：浏览器厂商实现，部分标准化

// 3. 联系
//    window.document 就是 DOM 的入口
//    实际应用中常结合使用，例如通过 BOM 获取 URL 参数，再通过 DOM 操作对应元素

6. 性能优化策略

性能优化需要从加载、运行时、用户体验三个维度入手，量化指标是关键。

// 1. 加载性能优化
//    - 资源压缩：WebP 格式，Terser 压缩 JS，Gzip/Brotli
//    - 加载策略：路由懒加载，图片懒加载 (IntersectionObserver)，预加载关键资源
//    - 缓存策略：强缓存 + hash 文件名

// 2. 运行时性能优化
//    - 减少重排重绘：使用 transform 代替 top/left，批量操作 DOM (DocumentFragment)
//    - 框架优化：React.memo, useMemo, useCallback; Vue v-memo
//    - 虚拟滚动：只渲染可见区域 (react-window)
//    - Web Worker：处理复杂计算，不阻塞主线程

// 3. 用户体验优化
//    - 骨架屏：提升首屏感知速度
//    - 加载状态：按钮禁用态，提交中提示
//    - 错误边界：ErrorBoundary 捕获组件错误
//    - 进度反馈：大文件上传进度条

// 4. 监控与量化
//    使用 PerformanceObserver 监听 LCP, FID, CLS 等核心 Web 指标

7. Webpack HMR 原理

热模块替换 (HMR) 能在不刷新页面的情况下更新模块，极大提升开发效率。其核心在于保持应用状态的同时替换代码。

// 1. HMR 核心价值
//    - 保持应用状态（不像 live reload 会重置）
//    - 快速反馈（修改样式立即生效）

// 2. 工作原理
//    1. devServer 启动，建立 WebSocket 连接
//    2. 监听文件变化，编译发生变化的模块
//    3. 通过 WebSocket 通知浏览器
//    4. 浏览器请求更新后的模块，替换旧模块，执行更新

// 3. 模块接受更新
if (module.hot) {
  module.accept('./component.js', () => {
    render(require('./component.js'))
  })
  module.dispose(() => {
    // 清理工作
  })
}

// 4. 框架集成
//    React: react-hot-loader / @hot-loader/react-dom
//    Vue: vue-loader 自动支持 HMR

8. SSR 服务端渲染原理

SSR 在服务端生成完整 HTML 发送给客户端，解决了首屏慢和 SEO 问题，但增加了服务端压力。

// 1. CSR vs SSR
//    | 维度       | CSR (客户端渲染) | SSR (服务端渲染) |
//    |------------|------------------|------------------|
//    | 首屏加载   | 慢               | 快               |
//    | SEO        | 差               | 好               |
//    | 服务端压力 | 小               | 大               |

// 2. SSR 工作流程
//    服务端：renderToString 将组件渲染为 HTML 字符串，注入数据和模板
//    客户端：hydrateRoot 复用服务端生成的 DOM，只绑定事件

// 3. Next.js 实现示例
export async function getServerSideProps(context) {
  const data = await fetchData()
  return { props: { data } }
}

// 4. 注意事项
//    - 避免使用浏览器特有 API (window/document)
//    - 数据获取需要在服务端完成
//    - 注意内存泄漏（每次请求创建新的 store）
//    - 流式渲染：renderToPipeableStream

知识点速查表

这场面试反映出当前大厂对前端工程师的要求已从单纯的业务实现转向底层原理与架构能力的综合考量。深入理解这些高频考点背后的逻辑，比死记硬背答案更为重要。