前端开发面试笔试题权威解析库

【深度解析】为什么不用CSS Grid？

虽然Grid可实现类似效果，但存在两大缺陷：

• 列数固定：需媒体查询动态调整grid-template-columns
• 内容顺序错乱：瀑布流要求从上到下填充，Grid默认按行填充导致卡片错位

CSS Columns方案优势：

• 自动列数适配（通过min-width计算）
• 内容严格垂直顺序填充
• 浏览器支持度高（Chrome 50+ / Firefox 52+ / Safari 12+）

兼容方案：旧版Safari需加-webkit-columns前缀

【原理图解】事件循环执行流程

┌───────────────────────────────────────────────────────┐
│                      调用栈 (Call Stack)                 │
│  ┌─────┐  ┌─────┐  ┌─────┐  ┌─────┐  ┌─────┐         │
│  │ 1   │→ │ 5   │→ │ 6   │→ │ 2   │→ │ 3   │         │
│  └─────┘  └─────┘  └─────┘  └─────┘  └─────┘         │
└───────────────────────────────────────────────────────┘
                    ↓
┌───────────────────────────────────────────────────────┐
│                      微任务队列 (Microtask Queue)       │
│  [then(6)] → [then(4)] → [then(8)] → ...             │
│  ↑ 执行前清空全部                                      │
└───────────────────────────────────────────────────────┘
                    ↓
┌───────────────────────────────────────────────────────┐
│                      宏任务队列 (Macrotask Queue)       │
│  [setTimeout(2)] → [setTimeout(7)] → [I/O]...         │
│  ↑ 执行一个后清空所有微任务                            │
└───────────────────────────────────────────────────────┘

延伸考点：async/await本质是Generator+Promise的语法糖，其await后代码属于微任务

【源码级解析】React 18批量更新机制

答案：After setCount: 0 → Effect executed: 2

原理：

1. 在React 18的自动批处理（Automatic Batching）下，同一次事件循环中的多次setCount会被合并
2. 初始count=0，两次setCount(count+1)实际计算为：
     → count + 1 = 1
     → count + 1 = 1（因闭包捕获旧值）
     → React检测到重复值，不触发重渲染
3. React 18中，事件处理器内默认启用批处理，因此最终count=1？
   错误！实际React 18的批处理会执行：
     → setCount(c => c + 1) // 推荐写法
     → setCount(c => c + 1) // 两次累加为2
4. console.log在setCount后立即执行，此时state尚未更新 → 输出0
5. 组件重渲染后，useEffect依赖count变化 → 输出Effect executed: 2

最佳实践：

// ✅ 正确写法：使用函数式更新
const handleClick = () => {
  setCount(c => c + 1);
  setCount(c => c + 1); // 两次累加为2
}

【优化方案】四步法

Step 1：体积拆分

• 使用splitChunks.cacheGroups分离框架代码（react、lodash）
• 路由级懒加载：import('~/pages/Home')
• 动态导入大依赖：import('chart.js').then(module => ...)

Step 2：缓存策略

Step 3：开发体验优化

• 开发环境使用eval-source-map（快速重建）
• 禁用生产环境插件（如Terser、OptimizeCSSAssets）
• 使用fork-ts-checker-webpack-plugin异步类型检查

Step 4：构建分析

// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: '../report.html'
    })
  ]
}

【代码实现】

function lengthOfLongestSubstring(s) {
  let maxLen = 0;
  let left = 0;
  const charIndexMap = new Map();
  for (let right = 0; right < s.length; right++) {
    const char = s[right];
    if (charIndexMap.has(char)) {
      // 移动左指针到重复字符后
      left = Math.max(left, charIndexMap.get(char) + 1);
    }
    charIndexMap.set(char, right);
    maxLen = Math.max(maxLen, right - left + 1);
  }
  return maxLen;
}

【复杂度分析】

面试加分项：

• 处理Unicode字符（如emoji）需用Set或Map存储原始字符
• 扩展应用：最长重复子串、最小覆盖子串
• 对比暴力解法（O(n³)）与优化思路

【案例对比】某电商网站优化前后

关键措施：

• 图片懒加载：IntersectionObserver + loading="lazy"
• 关键CSS提取：critters-webpack-plugin
• 路由预取：<link rel="prefetch" as="script">
• Service Worker缓存HTML：workbox-webpack-plugin