前端面试题集合一：从基础到进阶的实战指南

一、HTML与CSS基础：构建页面的基石

1. HTML语义化标签的实际应用

语义化标签（如<header>、<section>、<article>）的核心价值在于提升代码可读性与SEO优化。例如，在电商网站中，使用<nav>定义主导航栏，<main>包裹主体内容，<footer>放置版权信息，既能清晰划分结构，也能帮助搜索引擎理解页面层级。
面试问题示例：
“如何用语义化标签重构一个传统<div>布局的新闻页面？”
回答要点：

• 用<article>包裹每篇新闻，<header>包含标题与发布时间
• 使用<aside>放置侧边栏推荐内容
• 通过<figure>+<figcaption>组合展示配图与说明

2. CSS盒模型与布局实战

盒模型的box-sizing属性直接影响元素尺寸计算。默认的content-box模式下，width仅指内容宽度，而border-box模式下width包含内边距与边框。
代码示例：

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

布局难点解析：

• 三栏布局：浮动（Float）需清除浮动，Flexbox通过justify-content: space-between简化，Grid布局直接定义grid-template-columns: 1fr 2fr 1fr
• 垂直居中：Flexbox的align-items: center与justify-content: center组合，或Grid的place-items: center

二、JavaScript核心：交互逻辑的灵魂

1. 闭包与作用域链的深度理解

闭包的核心是函数能够访问其定义时的作用域链。典型应用包括模块化开发（IIFE模式）与事件监听器中的私有变量。
面试题：
“以下代码输出什么？如何修改避免内存泄漏？”

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}
const counter = createCounter();
counter(); counter(); // 输出？

解析：

• 输出0和1，闭包保留了count的引用
• 内存泄漏风险：若将counter长期持有（如挂载到全局），count无法被回收
• 解决方案：显式解除引用counter = null

2. 异步编程的演进与选择

从回调函数到Promise，再到Async/Await，异步处理的可读性逐步提升。
代码对比：

// 回调地狱
getUser(id, function(user) {
  getPosts(user.id, function(posts) {
    console.log(posts);
  });
});
// Promise链式调用
getUser(id)
  .then(user => getPosts(user.id))
  .then(posts => console.log(posts));
// Async/Await
async function showPosts(id) {
  const user = await getUser(id);
  const posts = await getPosts(user.id);
  console.log(posts);
}

关键点：

• Promise需处理catch错误，Async函数可用try/catch捕获
• 微任务（Promise）与宏任务（setTimeout）的执行顺序

三、框架原理：效率与维护的平衡

1. React Hooks的核心机制

Hooks通过闭包保存状态，但需注意依赖项陷阱。
面试题：
“为什么以下代码中的timer会引发问题？”

function Timer() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // 错误：依赖闭包中的count
    }, 1000);
    return () => clearInterval(timer);
  }, []);
}

修正方案：

• 使用函数式更新：setCount(prev => prev + 1)
• 或将count加入依赖项（需配合useRef优化性能）

2. Vue响应式系统的实现

Vue2通过Object.defineProperty劫持属性访问，Vue3改用Proxy实现更全面的监听。
深度问题：
“Vue如何检测数组变化？为什么不能直接通过索引修改数组？”
解析：

• Vue2重写了数组的push/pop等方法，触发依赖更新
• 直接索引修改（如arr[0] = 1）不会触发响应式，需使用Vue.set或splice

四、性能优化：速度与体验的双重保障

1. 渲染优化策略

• 代码分割：动态导入import()实现按需加载
• 虚拟滚动：仅渲染可视区域内的列表项（如React-Window库）
• 防抖节流：控制高频事件（如滚动、输入）的触发频率

代码示例：

// 防抖函数
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

2. 打包构建优化

• Tree Shaking：通过ES6模块的静态分析移除未导出代码
• CDN加速：将第三方库（如Vue、Lodash）托管至CDN
• Source Map：生产环境关闭以减少文件体积

五、实战建议：如何高效备考

1. 分类整理：按知识点建立错题本，标注考察频率（如★★★高频）
2. 代码手写：用纸笔模拟面试环境，训练逻辑表达与代码规范
3. 项目复盘：结合实际项目经验，解释技术选型与问题解决方案
4. 模拟面试：与同伴进行角色扮演，记录回答中的技术漏洞

总结：前端面试不仅是知识点的考核，更是工程思维与解决问题能力的体现。通过系统梳理基础、深入框架原理、掌握优化技巧，开发者能在面试中展现出扎实的专业素养。