前端面试宝典：基础知识与高频题深度解析

一、HTML与CSS核心基础知识

1. HTML语义化与标签使用

HTML语义化是前端开发的基石，直接影响页面可访问性与SEO效果。常见高频题包括：

• 语义化标签的作用：通过<header>、<article>、<section>等标签明确内容结构，提升代码可读性与屏幕阅读器兼容性。例如，用<nav>替代<div class="nav">可更清晰地定义导航区域。
• 表单验证的实现：HTML5新增required、pattern等属性支持原生表单验证。示例代码：

  <input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

  通过pattern属性可自定义邮箱格式的正则表达式，减少对JavaScript的依赖。

2. CSS布局与盒模型

CSS布局能力是面试重点考察项，需掌握以下核心概念：

• 盒模型组成：由content、padding、border、margin四部分构成，可通过box-sizing: border-box调整计算方式，避免布局错位。

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

  /* Flexbox实现水平居中 */
  .container { display: flex; justify-content: center; }
  /* Grid实现复杂布局 */
  .grid-container { 
    display: grid; 
    grid-template-columns: 1fr 2fr 1fr; 
    gap: 20px;
  }

  实际开发中，Grid可替代部分浮动布局，减少代码复杂度。

二、JavaScript核心概念与高频题解析

1. 变量与作用域

• var、let、const的区别：
  • var存在变量提升，可重复声明；
  • let与const有块级作用域，const用于常量声明。
    面试中常考察闭包场景：

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

    闭包通过作用域链保留内部变量，实现数据封装。

2. 异步编程与事件循环

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

  async function fetchData() {
    try {
      const res = await fetch('https://api.example.com');
      const data = await res.json();
      return data;
    } catch (err) {
      console.error('Fetch failed:', err);
    }
  }

  面试中常问Promise.all与Promise.race的区别：前者等待所有Promise完成，后者取第一个完成的结果。

• 事件循环机制：
  JavaScript为单线程语言，通过事件循环（Event Loop）处理异步任务。执行顺序为：同步任务→微任务（Promise）→宏任务（setTimeout）。示例：

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

三、前端框架核心原理与面试题

1. React/Vue响应式原理

• React的虚拟DOM与Diff算法：
  React通过虚拟DOM减少直接操作真实DOM的开销，Diff算法对比新旧虚拟DOM树，仅更新变化部分。面试中常问key属性的作用：帮助React识别元素，优化列表渲染性能。

• Vue的响应式实现：
  Vue2使用Object.defineProperty，Vue3改用Proxy实现更全面的响应式。示例对比：

  // Vue2的局限性：无法监听数组索引变化
  const obj = { name: 'Vue2' };
  Object.defineProperty(obj, 'name', { get() {}, set(val) { console.log(val); } });
  // Vue3的Proxy支持动态属性
  const proxyObj = new Proxy({}, {
    set(target, key, value) {
      console.log(`Setting ${key} to ${value}`);
      return true;
    }
  });

2. 性能优化策略

• 代码分割与懒加载：
  React的React.lazy与Vue的异步组件可减少首屏加载时间。示例：

  // React动态导入
  const LazyComponent = React.lazy(() => import('./LazyComponent'));
  // Vue异步组件
  const AsyncComponent = () => ({
    component: import('./AsyncComponent'),
    loading: LoadingComponent
  });

• 防抖与节流：
  防抖（debounce）限制频繁触发事件，节流（throttle）控制事件执行频率。应用场景：搜索框输入防抖、滚动事件节流。

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

四、前端安全与工程化

1. 常见安全漏洞

• XSS攻击与防御：
  XSS（跨站脚本攻击）通过注入恶意脚本窃取用户数据。防御方法包括：
  • 输入过滤：移除<script>等危险标签；
  • 转义输出：使用textContent替代innerHTML；
  • CSP（内容安全策略）：限制脚本加载来源。
• CSRF攻击与防御：
  CSRF（跨站请求伪造）利用用户登录状态执行非法操作。防御方法包括：
  • 同源检测：验证Referer头；
  • Token机制：后端生成随机Token，前端提交时携带。

2. 工程化实践

• Webpack配置优化：
  通过tree-shaking移除未使用代码，code-splitting分割代码块，cache-loader缓存编译结果。示例配置：

  module.exports = {
    optimization: {
      usedExports: true, // 启用tree-shaking
      splitChunks: {
        chunks: 'all', // 自动拆分公共模块
      },
    },
  };

• CI/CD流程：
  持续集成（CI）通过自动化测试保证代码质量，持续部署（CD）实现快速发布。常用工具：Jenkins、GitHub Actions。

五、复习建议与实战技巧

1. 分阶段复习：
   • 第一阶段：梳理HTML/CSS/JavaScript基础知识；
   • 第二阶段：深入框架原理与性能优化；
   • 第三阶段：模拟面试题，总结答题模板。
2. 代码实战：
   通过LeetCode、Codewars等平台练习算法题，结合实际项目优化代码。
3. 复盘总结：
   每次面试后记录未答出的问题，针对性补充知识盲区。

本文通过系统梳理前端基础知识与高频面试题，结合代码示例与实战技巧，为开发者提供从理论到实践的完整复习路径。掌握这些核心内容，将显著提升面试通过率与开发能力。