50 道常见前端面试题及简洁答案，涵盖 HTML、CSS、JavaScript、框架、网络等核心知识点

# 前端面试题 50 道及答案

以下是一份包含 HTML、CSS、JavaScript 及其框架（如 React）等前端相关领域的 50 道常见面试题及其参考答案。这些问题涵盖了基础知识和一些高级概念，适合用于准备前端开发岗位的面试。

---

## **HTML**

1. **什么是 DOCTYPE？**
   - `DOCTYPE` 是一个声明，告诉浏览器使用哪种 HTML 或 XHTML 规范来解析文档。

2. **HTML 和 XHTML 的区别是什么？**
   - XHTML 是更严格的 HTML 版本，要求标签必须正确嵌套并闭合，属性值必须用引号括起来。

3. **HTML5 中的新特性有哪些？**
   - 新语义化标签（如 `<header>`, `<footer>`），本地存储（localStorage/sessionStorage），表单控件增强，Canvas API，音频/视频支持，Web Workers 等。

4. **如何在 HTML 页面中引入 CSS 文件？**
   - 使用 `<link rel="stylesheet" href="styles.css">` 标签引入外部样式表。

5. **什么是语义化标签？**
   - 语义化标签（如 `<article>`, `<section>`）提供了更好的可读性和结构清晰性，并有助于 SEO 和无障碍访问。

6. **HTML5 中的本地存储方式有哪些？**
   - `localStorage`（持久化存储）和 `sessionStorage`（会话级存储）。

7. **meta viewport 标签的作用是什么？**
   - 控制页面在移动设备上的缩放行为，通常设置为 `<meta name="viewport" content="width=device-width, initial-scale=1.0">`。

8. **如何防止 XSS 攻击？**
   - 对用户输入进行转义，避免直接插入 HTML，使用 CSP（内容安全策略）限制脚本执行。

9. **什么是 defer 和 async 属性？**
   - `defer` 表示脚本会在整个页面解析完成后按顺序执行；`async` 表示脚本会异步加载并立即执行，不保证执行顺序。

10. **HTML 中的锚点跳转如何实现？**
    - 使用 `<a href="#id">` 实现页面内跳转，目标元素需有对应的 `id`。

---

## **CSS**

11. **CSS 中的选择器优先级是如何计算的？**
    - 每个选择器有一个优先级权重：行内样式 > ID 选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器。最终通过比较各部分的数量决定优先级。

12. **盒模型是什么？标准盒模型和怪异盒模型的区别？**
    - 盒模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。标准盒模型中 width/height 只包括 content，而怪异盒模型中 width/height 包括 content + padding + border。

13. **如何居中一个 div？**
    - 方法一：父容器设置 `display: flex; justify-content: center; align-items: center;`
    - 方法二：绝对定位 + `transform`

14. **flex 布局的核心概念是什么？**
    - Flex 容器控制子元素（弹性项）的排列方向、对齐方式、间距等。常用属性：`flex-direction`、`justify-content`、`align-items`。

15. **CSS 动画与 JavaScript 动画的区别？**
    - CSS 动画性能更好，简单易用，但灵活性较差；JavaScript 动画可以动态控制动画状态，适用于复杂交互。

16. **如何实现响应式设计？**
    - 使用媒体查询（media queries）、flex 布局、grid 布局、rem/vw 单位、图片自适应等技术。

17. **BFC 是什么？有什么作用？**
    - BFC（块格式化上下文）是独立的渲染区域，内部元素不会影响外部布局。常用于清除浮动、解决 margin 折叠等问题。

18. **CSS 中的层叠规则是什么？**
    - 层叠顺序由选择器优先级、来源（用户代理样式、用户样式、作者样式）、!important 等决定。

19. **如何隐藏一个元素？**
    - `display: none`（完全隐藏且不占空间）
    - `visibility: hidden`（隐藏但仍占空间）
    - `opacity: 0`（透明度为 0，仍可交互）

20. **transition 和 animation 的区别？**
    - `transition` 用于两个状态之间的平滑过渡；`animation` 可以定义多个关键帧（@keyframes），实现复杂的动画效果。

---

## **JavaScript**

21. **var、let、const 的区别？**
    - `var` 存在变量提升和函数作用域；`let` 和 `const` 具有块级作用域，不存在变量提升。`const` 声明的变量不能重新赋值。

22. **什么是闭包？**
    - 闭包是指有权访问另一个函数作用域中变量的函数。常用于数据封装、柯里化、回调函数等场景。

23. **JavaScript 中的数据类型有哪些？**
    - 原始类型：`number`, `string`, `boolean`, `null`, `undefined`, `symbol`, `bigint`
    - 引用类型：`object`

24. **typeof 和 instanceof 的区别？**
    - `typeof` 返回基本数据类型（如 "number", "string"）或 "object"（对象或 null）；
    - `instanceof` 用于判断某个对象是否属于某个构造函数的实例。

25. **什么是原型链？**
    - 每个对象都有一个原型（prototype），原型本身也是一个对象，因此可以通过原型链查找属性和方法。

26. **call、apply 和 bind 的区别？**
    - `call` 和 `apply` 会立即执行函数，并改变 this 指向；`bind` 返回一个新的函数，this 被绑定但不会立即执行。
    - `call` 接收参数列表，`apply` 接收参数数组。

27. **事件委托是什么？如何实现？**
    - 利用事件冒泡机制，在父元素上监听事件，根据 event.target 判断实际触发元素，从而减少事件监听器数量。

28. **Promise 的状态有哪些？**
    - `pending`（进行中）、`fulfilled`（成功）、`rejected`（失败）

29. **async/await 是什么？如何使用？**
    - `async` 函数返回一个 Promise，`await` 用于等待 Promise 结果，使异步代码看起来像同步代码。

30. **深拷贝和浅拷贝的区别？如何实现？**
    - 浅拷贝只复制引用地址，深拷贝递归复制所有层级。深拷贝可通过 JSON.parse(JSON.stringify(obj))、递归遍历、第三方库（lodash）等方式实现。

---

## **DOM**

31. **如何获取 DOM 元素？**
    - `document.getElementById()`, `document.querySelector()`, `document.querySelectorAll()` 等。

32. **如何操作 DOM 节点？**
    - 创建节点：`document.createElement()`
    - 添加节点：`appendChild()`, `insertBefore()`
    - 删除节点：`removeChild()`
    - 修改节点：`setAttribute()`, `innerHTML`, `textContent`

33. **事件流是什么？**
    - 事件流描述了事件在 DOM 树中的传播过程，分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

34. **如何阻止事件冒泡？**
    - 使用 `event.stopPropagation()` 或 `event.cancelBubble = true`（IE兼容）。

35. **如何阻止默认事件？**
    - 使用 `event.preventDefault()` 或 `return false`（jQuery 中有效）。

---

## **ES6+**

36. **解构赋值是什么？举例说明。**
    - 解构赋值允许从数组或对象中提取值并赋给变量。例如：
      ```javascript
      const [a, b] = [1, 2];
      const { name, age } = { name: 'Alice', age: 20 };
      ```

37. **箭头函数与普通函数的区别？**
    - 箭头函数没有自己的 `this`、`arguments`、`super`、`new.target`，继承自外层作用域；不能作为构造函数（不能 new）。

38. **模板字符串是什么？**
    - 使用反引号（`` ` ``）包裹字符串，支持多行文本和变量插值 `${}`。

39. **Symbol 类型的作用是什么？**
    - Symbol 是一种唯一且不可变的数据类型，常用于对象属性名，避免命名冲突。

40. **Set 和 Map 的区别？**
    - Set 是值的集合，成员唯一；Map 是键值对集合，键可以是任意类型。

---

## **React**

41. **React 中组件的生命周期有哪些阶段？**
    - 挂载阶段（constructor, getDerivedStateFromProps, render, componentDidMount）
    - 更新阶段（getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate）
    - 卸载阶段（componentWillUnmount）

42. **React Hooks 是什么？常用的 Hooks 有哪些？**
    - Hooks 是 React 16.8 引入的特性，用于在函数组件中使用状态和生命周期。常用 Hook：useState、useEffect、useContext、useReducer、useCallback、useMemo。

43. **useEffect 的用途是什么？第二个参数的作用？**
    - `useEffect` 用于处理副作用（如数据获取、订阅、手动 DOM 操作）。第二个参数是一个依赖数组，只有当依赖项发生变化时才会重新执行副作用。

44. **React 中的虚拟 DOM 是什么？为什么需要它？**
    - 虚拟 DOM 是内存中的 DOM 表示，用于提高性能。React 通过对比新旧虚拟 DOM 的差异（diff 算法），最小化真实 DOM 的更新次数。

45. **React 中的 key 属性有什么作用？**
    - `key` 帮助 React 识别哪些元素发生了变化、被添加或删除，从而高效地更新 UI。

46. **React 中的状态提升是什么？**
    - 将多个组件共享的状态提升到它们最近的共同父组件中管理，实现组件间通信。

47. **React 中的高阶组件（HOC）是什么？**
    - HOC 是一个函数，接收一个组件并返回一个新组件，用于复用组件逻辑，如权限验证、数据注入等。

48. **React 中的 Context 是什么？何时使用？**
    - Context 提供了一种跨层级传递数据的方式，无需手动一层层传递 props。适用于主题、用户认证等全局数据。

49. **React.memo 是什么？**
    - `React.memo` 是一个高阶组件，用于优化函数组件的渲染性能，避免不必要的重新渲染。

50. **React 中的 Portals 是什么？**
    - Portals 提供了一种将子节点渲染到存在于 DOM 层次结构之外的 DOM 节点的方式，常用于模态框、提示框等场景。

--- 

以上就是 50 道常见的前端面试题及参考答案，涵盖 HTML、CSS、JavaScript、DOM、ES6+、React 等方面。希望对你有所帮助！