腾讯前端 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 做了封装'远远不够，最好把事件委托和 React 16、17 的变化一起说出来。

// 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 原生事件对比
//    | 维度       | 合成事件           | 原生事件             |
//    |------------|--------------------|----------------------|
//    | Binding方式   | 通过 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 关注浏览器环境，本质上不是一回事。

// 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 的取舍也比较明确：首屏和 SEO 会好一些，但服务端复杂度会上去，状态和内存管理都得更小心。不是所有页面都适合上 SSR，内容型页面通常更划算。

// 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

知识点速查表

这场面试说明了一件事：大厂前端现在更看重你对底层机制的理解，而不是只会写业务页面。题目看上去分散，其实都在试一件事——你能不能把知识讲成一条完整链路，而不是一串零散名词。