前端面试题

HTML/CSS 面试题

1. HTML5 新特性有哪些？

• 语义化标签：<header>, <footer>, <nav>, <section>, <article> 等
• 多媒体：<audio>, <video>, <canvas>, <svg>
• 表单增强：新的 input 类型（email, url, number 等）
• Web Storage：localStorage 和 sessionStorage
• WebSocket
• 地理位置 API
• 拖放 API

2. CSS 盒模型是什么？

CSS 盒模型包含：

• content（内容）
• padding（内边距）
• border（边框）
• margin（外边距）

有两种盒模型：

• 标准盒模型：width/height = content
• IE盒模型：width/height = content + padding + border

3. 什么是 BFC？如何创建 BFC？

BFC（Block Formatting Context）是一个独立的渲染区域，内部元素的布局不会影响外部元素。

创建 BFC 的方法：

• float 不为 none
• position 为 absolute 或 fixed
• display 为 inline-block, table-cell, table-caption
• overflow 不为 visible

JavaScript 面试题

1. 什么是闭包？有什么优缺点？

闭包是指一个函数可以访问其词法作用域外的变量。

优点：

• 实现私有变量
• 保持变量状态
• 模块化开发

缺点：

• 内存泄漏风险
• 性能影响

2. 什么是事件循环（Event Loop）？

JavaScript 是单线程的，通过事件循环机制实现异步操作：

1. 执行同步代码
2. 执行微任务（Promise, MutationObserver）
3. 执行宏任务（setTimeout, setInterval, I/O）
4. 重复上述步骤

3. 什么是原型链？

每个对象都有一个原型对象，通过 __proto__ 属性连接，形成原型链。当访问对象属性时，会沿着原型链向上查找。

Vue.js 面试题

1. Vue 的生命周期有哪些？

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

2. Vue 的响应式原理是什么？

• 通过 Object.defineProperty 实现数据劫持
• 每个组件实例都有对应的 watcher 实例
• 数据变化时，触发 setter，通知 watcher 更新视图

3. Vue 的组件通信方式有哪些？

• props/$emit
• $parent/$children
• provide/inject
• eventBus
• Vuex

React 面试题

1. React 的生命周期有哪些？

• 挂载阶段：
  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount
• 更新阶段：
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate
• 卸载阶段：
  • componentWillUnmount

2. 什么是虚拟 DOM？

虚拟 DOM 是真实 DOM 的 JavaScript 对象表示，通过 diff 算法比较新旧虚拟 DOM，只更新必要的真实 DOM 节点。

3. React Hooks 是什么？

Hooks 是 React 16.8 新增的特性，允许在函数组件中使用状态和其他 React 特性。

常用 Hooks：

• useState
• useEffect
• useContext
• useReducer
• useCallback
• useMemo

性能优化面试题

1. 如何优化页面加载速度？

• 减少 HTTP 请求
• 使用 CDN
• 压缩资源
• 使用缓存
• 延迟加载
• 优化图片
• 使用 HTTP/2

2. 如何优化 JavaScript 性能？

• 避免全局查找
• 使用事件委托
• 减少 DOM 操作
• 使用防抖和节流
• 使用 Web Workers
• 代码分割

实践案例

1. 实现一个防抖函数

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

2. 实现一个深拷贝函数

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

学习资源

在线教程

• MDN Web Docs
• Vue.js 官方文档
• React 官方文档
• JavaScript.info
• freeCodeCamp

书籍推荐

• 《JavaScript 高级程序设计》
• 《你不知道的 JavaScript》
• 《Vue.js 设计与实现》
• 《React 设计模式与最佳实践》

练习平台

• LeetCode
• CodeWars
• Frontend Mentor
• CSS Battle