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

一、HTML基础与语义化

1. 语义化标签的作用与使用场景
语义化标签（如<header>、<section>、<article>等）通过明确的标签含义提升代码可读性和SEO效果。例如，使用<nav>定义导航栏，<footer>定义页脚，而非滥用<div>。
示例：

<header>
  <h1>网站标题</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>

答案解析：语义化标签帮助屏幕阅读器识别内容结构，同时便于开发者维护代码。

2. HTML5新增特性
HTML5引入了<canvas>、<video>、<audio>等多媒体标签，以及本地存储（localStorage、sessionStorage）和Web Workers。
示例：

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

答案解析：这些特性减少了对Flash等插件的依赖，提升了网页交互能力。

二、CSS核心与布局

1. 盒模型与box-sizing属性
默认盒模型中，元素宽度仅包含内容区，而box-sizing: border-box会使宽度包含内边距（padding）和边框（border）。
示例：

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

答案解析：border-box简化了布局计算，尤其适合响应式设计。

2. Flexbox与Grid布局对比
Flexbox适合一维布局（如导航栏），Grid适合二维布局（如整体页面结构）。
Flexbox示例：

.container {
  display: flex;
  justify-content: space-between;
}

Grid示例：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

答案解析：Flexbox通过justify-content和align-items控制对齐，Grid通过grid-template-columns定义列宽。

三、JavaScript核心与ES6+

1. 闭包的概念与应用
闭包是指函数能够访问并记住其词法作用域，即使函数在其词法作用域之外执行。
示例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

答案解析：闭包常用于私有变量封装和事件处理。

2. Promise与async/await
Promise解决回调地狱问题，async/await基于Promise提供同步式写法。
示例：

// Promise
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
// async/await
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

答案解析：async/await代码更易读，但需注意错误处理（try/catch）。

四、性能优化与工程化

1. 浏览器渲染机制与优化
浏览器通过解析HTML生成DOM树，解析CSS生成CSSOM树，合并为渲染树后布局（Layout）和绘制（Paint）。优化手段包括减少重排（Reflow）和重绘（Repaint）。
示例：

• 避免频繁操作DOM（如循环内修改样式）。
• 使用transform和opacity触发GPU加速。

2. Webpack配置要点
Webpack核心概念包括入口（Entry）、输出（Output）、Loader和Plugin。
示例配置：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()]
};

答案解析：Loader处理文件转换（如JSX→JS），Plugin扩展功能（如生成HTML文件）。

五、持续更新与学习建议

1. 面试准备策略

• 分阶段复习：先夯实基础（HTML/CSS/JS），再攻克框架（React/Vue）和工程化。
• 模拟面试：通过LeetCode、CodePen等平台练习算法和代码实现。
• 关注前沿：定期阅读MDN、CSS-Tricks和Vue/React官方文档。

2. 资源推荐

• 书籍：《JavaScript高级程序设计》《CSS揭秘》
• 工具：Chrome DevTools、Lighthouse性能分析
• 社区：Stack Overflow、GitHub Discussions

总结

本文汇总了前端面试中高频的HTML、CSS、JavaScript及工程化问题，并提供详细答案与代码示例。由于技术迭代迅速，本内容将持续更新，建议读者收藏并定期回顾。掌握这些知识点不仅能通过面试，更能提升实际开发能力。