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

一、HTML与CSS基础

1.1 HTML语义化标签

问题：为什么推荐使用<header>、<section>等语义化标签而非<div>？
答案：

• SEO优化：语义化标签帮助搜索引擎理解页面结构，提升关键词匹配度。
• 可访问性：屏幕阅读器能通过标签识别内容类型（如<nav>表示导航栏）。
• 代码可维护性：明确标签用途减少注释需求，例如：

  <!-- 传统写法 -->
  <div class="header">...</div>
  <!-- 语义化写法 -->
  <header>...</header>

1.2 CSS盒模型

问题：如何设置盒模型使width包含padding和border？
答案：通过box-sizing: border-box实现，示例：

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 5px solid #000;
  /* 实际占用宽度仍为200px */
}

应用场景：响应式布局中避免元素因内边距导致溢出。

1.3 定位机制

问题：position: sticky的生效条件是什么？
答案：

• 需指定top/right/bottom/left中的至少一个值。
• 父容器不能有overflow: hidden属性。
• 示例：导航栏固定效果

  .nav {
  position: sticky;
  top: 0;
  background: white;
  }

二、JavaScript核心

2.1 变量与作用域

问题：let与var的区别有哪些？
答案：
| 特性 | var | let |
|——————-|——————————-|——————————-|
| 作用域 | 函数作用域 | 块级作用域 |
| 重复声明 | 允许 | 报错 |
| 变量提升 | 是（值为undefined） | 存在暂时性死区 |

代码示例：

console.log(a); // undefined（变量提升）
var a = 1;
console.log(b); // ReferenceError（暂时性死区）
let b = 2;

2.2 异步编程

问题：实现一个延迟2秒后执行的函数。
答案：

• Promise版：

  function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  async function run() {
    await delay(2000);
    console.log("2秒后执行");
  }

• Callback版：

  function delay(ms, callback) {
    setTimeout(callback, ms);
  }
  delay(2000, () => console.log("2秒后执行"));

2.3 原型链

问题：如何判断对象是否拥有某个属性（包括继承属性）？
答案：使用in操作符或Object.prototype.hasOwnProperty()的组合：

const obj = { a: 1 };
const protoObj = { b: 2 };
Object.setPrototypeOf(obj, protoObj);
console.log("a" in obj); // true
console.log("b" in obj); // true（继承属性）
console.log(obj.hasOwnProperty("b")); // false

三、前端框架与库

3.1 React Hooks

问题：useEffect的依赖项数组有什么作用？
答案：

• 控制副作用的执行时机，依赖项变化时重新执行。
• 空数组[]表示仅在组件挂载时执行一次。

• 常见错误：遗漏依赖项导致闭包问题

  // 错误示例：count始终为0
  function Counter() {
    const [count, setCount] = useState(0);
    useEffect(() => {
      const id = setInterval(() => {
        setCount(count + 1); // 依赖count但未声明
      }, 1000);
    }, []);
    // 修正方案：使用函数式更新
    useEffect(() => {
      const id = setInterval(() => {
        setCount(c => c + 1);
      }, 1000);
    }, []);
  }

3.2 Vue响应式原理

问题：Vue2如何实现数据响应式？
答案：

• 数据劫持：通过Object.defineProperty递归遍历对象属性，设置getter/setter。
• 依赖收集：Watcher对象在读取数据时被触发，数据变更时通知更新。
• 局限性：无法检测数组索引变化和新增属性（需用Vue.set）。

Vue3改进：使用Proxy替代，支持动态属性监听。

四、性能优化

4.1 加载优化

问题：如何减少首屏加载时间？
答案：

• 代码分割：动态导入import()实现路由级懒加载。

  const module = await import('./module.js');

• 资源预加载：

  <link rel="preload" href="critical.css" as="style">

• 图片优化：使用WebP格式，配合srcset实现响应式图片。

4.2 渲染优化

问题：列举3种减少重绘（Reflow）的方法。
答案：

1. 使用transform和opacity实现动画（触发GPU加速）。
2. 避免频繁操作DOM，批量更新（如React的虚拟DOM）。
3. 对固定尺寸元素使用will-change属性提前告知浏览器优化。

五、持续更新机制

本文章将每两周更新一次，新增内容涵盖：

1. 新兴框架：如SolidJS、Svelte的原理题。
2. 浏览器新特性：如CSS Container Queries的实践题。
3. 工程化：Vite、TurboPack等构建工具优化题。

参与贡献：欢迎通过GitHub提交PR补充题目或修正答案，共同维护高质量题库。

---

结语：前端技术日新月异，掌握核心原理比记忆答案更重要。建议结合本文题目深入理解底层机制，同时多实践开源项目提升综合能力。