前端面试题汇总大全（含答案）— 持续更新

一、HTML与CSS基础篇

1.1 HTML语义化标签的应用场景

问题：HTML5新增的语义化标签（如<header>、<section>、<article>）在实际开发中有何优势？
答案：

• SEO优化：语义化标签帮助搜索引擎理解页面结构，例如<article>标签内的内容会被优先识别为独立文章。
• 可访问性提升：屏幕阅读器通过语义化标签解析内容层级，例如<nav>标签明确导航区域。
• 代码可维护性：相比<div>滥用，语义化标签能直观表达区块功能，如<figure>配合<figcaption>展示带标题的图片。
  扩展建议：在团队规范中强制使用语义化标签，并通过工具（如HTMLHint）检查标签滥用问题。

1.2 CSS盒模型与布局技巧

问题：如何实现一个固定宽高的元素在页面中水平垂直居中？
答案（Flexbox方案）：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 视口高度 */
}

深度解析：

• 传统方案局限：绝对定位+transform: translate(-50%, -50%)需已知元素尺寸，而Flexbox无需计算。
• Grid方案对比：display: grid; place-items: center;代码更简洁，但Flexbox在一维布局中更灵活。
  性能优化：避免在频繁渲染的元素上使用复杂布局，优先选择静态布局方案。

二、JavaScript核心篇

2.1 闭包与作用域链

问题：以下代码输出什么？如何避免内存泄漏？

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  };
}
const increment = outer();
increment(); // 输出？
increment(); // 输出？

答案：

• 输出依次为1和2，因闭包保留了对count的引用。
• 内存泄漏风险：若outer被频繁调用且inner未被释放，会导致count长期驻留内存。
  解决方案：

  // 显式解除引用
  let increment;
  function outer() {
  let count = 0;
  increment = function() { /* ... */ };
  return function() {
    increment = null; // 手动释放
  };
  }

2.2 异步编程与Promise

问题：实现一个并发数控制的Promise调度器。
答案（代码实现）：

class Scheduler {
  constructor(limit) {
    this.queue = [];
    this.activeCount = 0;
    this.limit = limit;
  }
  add(promiseCreator) {
    return new Promise((resolve) => {
      this.queue.push(() => promiseCreator().then(resolve));
      this.run();
    });
  }
  run() {
    while (this.activeCount < this.limit && this.queue.length) {
      const task = this.queue.shift();
      task();
      this.activeCount++;
    }
  }
  done() {
    return new Promise((resolve) => {
      if (this.activeCount === 0 && this.queue.length === 0) {
        resolve();
      } else {
        // 监听所有任务完成
      }
    });
  }
}

应用场景：限制API请求并发数，避免触发频率限制。

三、框架与工程化篇

3.1 React Hooks使用陷阱

问题：以下代码有何问题？如何修复？

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1); // 问题点
    }, 1000);
  };
  return <button onClick={handleClick}>{count}</button>;
}

答案：

• 问题：闭包捕获了初始的count值，导致多次点击后计数不准确。
• 修复方案：使用函数式更新或useRef跟踪最新值。
  ```javascript
  // 方案1：函数式更新
  setCount(prev => prev + 1);

// 方案2：useRef
const countRef = useRef();
countRef.current = count;
setTimeout(() => setCount(countRef.current + 1), 1000);

### 3.2 Vue3响应式原理
**问题**：Vue3的`reactive`与`ref`有何区别？  
**答案**：  
- **`reactive`**：通过Proxy实现深度响应式，适用于对象类型。  
```javascript
const state = reactive({ count: 0 });

• ref：包装基本类型值为响应式对象，需通过.value访问。

  const count = ref(0);
  console.log(count.value); // 访问值

  选择建议：
• 对象类型优先用reactive，避免.value冗余代码。
• 基本类型或需在模板外使用的值用ref。

四、性能优化篇

4.1 浏览器渲染机制

问题：如何减少重排（Reflow）和重绘（Repaint）？
答案：

• 批量DOM操作：使用DocumentFragment或虚拟DOM。

  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
  }
  document.body.appendChild(fragment);

• CSS优化：避免width/height/margin等触发重排的属性频繁变更，改用transform。
• 工具检测：使用Chrome DevTools的Performance面板分析渲染瓶颈。

4.2 代码分割与懒加载

问题：如何在React中实现路由级代码分割？
答案（React.lazy + Suspense）：

const Home = React.lazy(() => import('./Home'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Route path="/" component={Home} />
    </Suspense>
  );
}

Webpack配置：确保output.chunkFilename设置为[name].chunk.js以便区分异步模块。

五、持续更新机制

本文章将通过以下方式保持内容时效性：

1. 月度更新：根据MDN/TC39最新规范修订答案。
2. 读者贡献：开放GitHub仓库（示例链接）接收PR补充新题。
3. 框架专项：针对Vue3/React18等新版本增设章节。

建议行动：收藏本文并订阅更新通知，同时参与社区讨论完善题库。