前端面试题集合一：从基础到进阶的全方位解析

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

1. HTML语义化标签的应用
语义化标签（如<header>、<section>、<article>）的核心价值在于提升代码可读性与SEO优化。例如，搜索引擎会优先解析<h1>-<h6>标题层级，而<nav>标签能明确导航区域。实际开发中，应避免滥用<div>，例如用<main>替代通用容器，用<figure>包裹图片与说明文字。
代码示例：

<article>
  <header>
    <h1>文章标题</h1>
    <p>作者：张三</p>
  </header>
  <section>
    <p>正文内容...</p>
  </section>
</article>

2. CSS盒模型与布局技巧
盒模型由content、padding、border、margin组成，通过box-sizing: border-box可切换标准/IE盒模型。布局方面，Flexbox适合一维布局（如导航栏），Grid布局则擅长二维结构（如复杂表单）。
场景题：如何实现垂直居中？

• Flexbox方案：

  .container {
  display: flex;
  align-items: center;
  justify-content: center;
  }

• Grid方案：

  .container {
  display: grid;
  place-items: center;
  }

3. 响应式设计的实现
媒体查询（@media）是响应式设计的核心，需结合viewport元标签与相对单位（如rem、vw）。例如，移动端适配时，可通过@media (max-width: 768px)调整字体大小与布局。
最佳实践：

html { font-size: 16px; }
@media (max-width: 768px) {
  html { font-size: 14px; }
}

二、JavaScript核心：逻辑与异步的掌控

1. 闭包与作用域链
闭包指函数能访问其定义时的词法环境，常用于封装私有变量。例如，计数器模块可通过闭包实现：

function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    getCount: () => count
  };
}
const counter = createCounter();
counter.increment(); // 1

2. 事件循环机制
JavaScript单线程通过事件循环（Event Loop）实现异步，任务分为宏任务（如setTimeout）与微任务（如Promise）。执行顺序为：同步代码 → 微任务队列 → 宏任务队列。
面试题：以下代码输出顺序？

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出：1 → 4 → 3 → 2

3. 原型链与继承
原型链是JavaScript实现继承的机制，通过__proto__或Object.getPrototypeOf()访问。ES6的class语法本质仍是原型继承的语法糖。
代码示例：

class Parent {
  constructor(name) { this.name = name; }
}
class Child extends Parent {
  sayHello() { console.log(`Hello, ${this.name}`); }
}
const child = new Child('Alice');
child.sayHello(); // Hello, Alice

三、框架原理：React与Vue的深度解析

1. React Hooks的设计思想
Hooks通过闭包管理状态，useState与useEffect的组合可替代类组件的生命周期。常见陷阱包括闭包问题（如异步更新时获取旧状态），可通过useRef或函数式更新解决。
代码示例：

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setTimeout(() => setCount(c => c + 1), 1000); // 函数式更新
  };
  return <button onClick={handleClick}>{count}</button>;
}

2. Vue3的Composition API
Composition API通过setup()函数组织逻辑，提升代码复用性。与Options API相比，其优势在于可按功能而非选项类型组织代码。
对比示例：

// Options API
export default {
  data() { return { count: 0 }; },
  methods: { increment() { this.count++; } }
}
// Composition API
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

四、性能优化：从代码到工程的提升

1. 代码层面的优化

• 防抖与节流：搜索框输入防抖（debounce）可减少请求次数，滚动事件节流（throttle）可优化性能。
• 懒加载与代码分割：通过React.lazy或Vue Router的动态导入实现组件按需加载。

2. 工程化实践

• Webpack优化：使用Tree Shaking删除未使用代码，Cache-Loader缓存编译结果。
• CI/CD流程：通过Husky预提交钩子运行ESLint，Jenkins自动化部署。

五、实战场景题解析

1. 跨域问题解决方案

• CORS：后端设置Access-Control-Allow-Origin头。
• JSONP：仅支持GET请求，通过<script>标签绕过同源策略。
• 代理服务器：开发环境配置webpack-dev-server代理，生产环境使用Nginx反向代理。

2. 前端安全防护

• XSS攻击：通过innerHTML插入未转义内容，防御需使用textContent或DOM净化库。
• CSRF攻击：后端生成CSRF Token，前端通过请求头或表单字段提交。

六、总结与建议

前端面试不仅考察知识广度，更注重深度与工程思维。建议开发者：

1. 构建知识体系：从基础到框架原理形成完整链路。
2. 实践驱动学习：通过开源项目或个人博客积累经验。
3. 关注前沿技术：如Web Components、Serverless等新兴方向。

本文涵盖的面试题与解析可作为备考指南，但真正的能力提升需结合持续实践与思考。