前端最新面试题

现代工程化工具链全景

构建工具演进路径：
Grunt（任务流）→ Gulp（流式构建）→ Webpack（模块打包）→ Vite（原生ESM）→ Turbopack（Rust原生）

2024年Vite核心优化点：

• 预构建策略：将依赖预构建为ESM模块，解决ESM动态import性能问题
• HMR协议升级：基于WebSocket的细粒度更新，避免整页刷新
• SSR优化：通过import.meta.glob实现模块预加载
• Rollup插件兼容：通过vite-plugin-legacy支持IE11

DevOps工具链：
GitLab CI / GitHub Actions / Jenkins → 配合ESLint/Prettier/Turnstile → 部署至Vercel/Cloudflare Pages/自建K8s集群

CI/CD流水线设计要点

以GitHub Actions为例，前端项目典型流程：

name: Frontend CI/CD
on:
  push:
    branches: [ main, develop ]
jobs:
  test-lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: corepack enable
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint:eslint
      - run: pnpm test:unit
  build-deploy:
    needs: test-lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: corepack enable
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
      - run: pnpm build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

关键点：
① 使用corepack enable统一包管理器版本
② frozen-lockfile确保依赖确定性
③ cache: 'pnpm'加速依赖安装
④ 通过needs依赖实现串行执行

跨端技术方案对比

Web App与Hybrid App性能对比

根据2024年腾讯移动实验室测试，在同等硬件下：

结论：Hybrid在性能与开发效率间取得平衡，但Web App在轻量级场景（如活动页）更具优势。

CSS布局：Flex与Grid对比

Q：Flex适合一维布局，Grid适合二维布局。请举例说明两者的混合使用场景。

典型场景：响应式卡片网格

<div class="container">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 300px;
  min-width: 0;
}

优势：
• Flex控制卡片排列
• Grid可处理卡片内部网格（如仪表盘）

CSS进阶：CSS变量与预处理器对比

Q：CSS自定义属性（var(--color)）与Sass/Less变量有何区别？

核心差异：

Vue响应式：ref与reactive区别

Q：为什么ref包装基础类型，reactive包装对象/数组？

原理分析：
① ref内部使用Object.defineProperty拦截get/set，对.value进行代理
② reactive使用Proxy代理整个对象，支持深层嵌套
③ Vue 3.5+对ref进行了优化：
    • 基础类型直接代理
    • 对象/数组自动转为reactive

最佳实践：
• 基础类型（string/number/boolean）→ ref
• 复合类型（object/array）→ reactive
• 避免ref嵌套reactive（会失去响应式）

Vue组件通信：provide/inject深度应用

Q：provide/inject如何实现跨多级组件通信？如何避免依赖注入的副作用？

安全实践：
① 使用Symbol作为key避免命名冲突
② 配合reactive创建响应式对象
③ 提供修改方法而非直接暴露数据

<!-- App.vue -->
<script setup>
import { provide, reactive, readonly } from 'vue';
const state = reactive({
  count: 0,
  increment: () => state.count++
});
provide('appState', readonly(state));
</script>
<!-- Child.vue -->
<script setup>
import { inject } from 'vue';
const state = inject('appState');
</script>

React状态管理：useReducer vs Redux

Q：什么情况下应选择useReducer而非useState？

适用场景：
• 状态逻辑复杂（多个子状态联动）
• 下一个状态依赖前一个状态
• 需要统一处理异步副作用
• 团队需要可预测的状态管理模式

代码对比：

// useReducer实现
const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'reset':
      return initialState;
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'reset' })}>Reset
    
  );
}

React性能优化：useMemo与useCallback辨析

Q：何时使用useMemo？何时使用useCallback？常见误区是什么？

正确用法：
• useMemo：缓存计算结果（避免昂贵计算重复执行）
• useCallback：缓存函数引用（避免子组件props变化触发重渲染）

误区警示：
① 过度使用导致内存泄漏
② 忽略依赖数组导致状态不一致
③ 在简单组件中滥用（需基准测试）

性能优化指标：LCP与FID优化策略

Q：如何优化LCP（最大内容绘制）？

优化路径：
① 资源预加载：
    <link rel="preload" href="/hero.jpg" as="image">
② 图片优化：
    • 使用WebP/AVIF格式
    • 响应式图片（srcset）
    • 懒加载（loading="lazy"）
③ 字体优化：
    • 使用font-display: swap
    • 字体子集化（font-subset）

性能工具链：Chrome DevTools实战

关键工具：

• Performance面板：录制性能剖面，分析关键路径
• Lighthouse：自动化性能审计（分数≥90达标）
• Coverage面板：检测未使用CSS/JS
• Memory面板：查找内存泄漏（堆快照对比）

前端面试题平台推荐

模拟面试平台对比

1. 面霸（Mianba）
• 专业面试官模拟
• 提供结构化反馈
• 价格：¥200-500/次

2. 牛客网模拟面试
• 企业HR参与
• 涵盖HR面/技术面
• 包含在会员服务中

3. 自建模拟面试群
• 同行互相模拟
• 成本低但专业性弱
• 建议搭配面经使用