前端面试题分类汇总

一、面试准备与求职技巧

1. 自我介绍技巧

• 离职原因阐述：避免主观原因，尽量以项目到期、公司架构调整等客观原因解释
• 经验介绍顺序：按时间倒序，从最近工作经验开始介绍，控制在 2 分钟内
• 介绍结构：公司 → 负责角色 → 使用框架 → 技术难点 → 实现亮点功能
• 岗位匹配度：重点介绍与应聘岗位相关的经验，不相关经验可简要带过

二、前端框架专题（Vue）

1. Vue2 和 Vue3 的主要区别（概念 + 兼容点）

•	响应式系统：Vue2 使用 Object.defineProperty，Vue3 基于 Proxy（更完整、性能更好、支持对新增/删除属性的响应）。
•	性能与体积：Vue3 更小更快（虚拟 DOM 重写、Tree-shaking 支持）。
•	Composition API：Vue3 提供组合式 API（setup、ref、reactive 等），更适合逻辑复用与 TypeScript。
•	Fragment / Teleport / Suspense：Vue3 支持多个根节点（Fragment）、Teleport（传送 DOM 到任意位置）、Suspense（异步组件占位）。
•	生命周期钩子命名：部分钩子改名（beforeDestroy → beforeUnmount 等）。
•	性能优化器：Tree-shaking 更好，编译时优化更多（静态提升）。
•	Typescript 支持：Vue3 原生友好，类型系统深度集成。
•	生态与兼容：大多数库已升级，Vue2 项目需通过 @vue/compat 或手动迁移。

2. 组合式（Composition）API 的理解

•	核心思想：把组件逻辑按功能切分成可复用的函数（composables），替代 Options API 中按选项分散逻辑的问题。
•	优点：逻辑复用、可测试性、TypeScript 友好、可读性在复杂组件中更好。
•	常用 API：setup(props, ctx)、ref、reactive、computed、watch、onMounted、provide/inject。
•	组织方式：把复用逻辑抽成 useXxx 文件（例如 useFetch、useForm）。

3. Vue3 相对于 Vue2 的升级点（更细化）

•	响应式与 Proxy：支持对 Map/Set、数组索引的更完整观察。
•	编译器优化：静态节点提升、编译时标记静态 tree，减少运行时开销。
•	异步组件与 Suspense：优雅处理加载状态与占位。
•	Teleport：把 DOM 输出到任意宿主元素，便于 modal/tooltip。
•	更好的 TypeScript 支持。
•	新组件API（Fragments/Multiple root nodes）。
•	更灵活的插件 API 与自定义渲染器。

4. Vue 底层原理（Vue2 vs Vue3）

Vue2 响应式原理 • 通过 Object.defineProperty() 劫持属性 getter/setter。 • 依赖收集（Dep + Watcher）实现更新。 • 缺点：不能监听对象新增/删除、数组下标变化。

Vue3 响应式原理 • 使用 Proxy 劫持整个对象。 • 支持深层监听、动态属性、数组索引变化。 • 响应式核心：reactive() + effect() + track() + trigger()。

5. 从 Vue2 升级到 Vue3 要考虑哪些，怎么实现升级

关键考虑点： • 依赖升级：Vue Router（v3 → v4）、Vuex（可继续或迁移到 Pinia）、第三方 UI（ElementUI → Element Plus）、构建工具（webpack → Vite 可选）。 • API 改动：生命周期钩子命名变化、过滤器（filters）被移除（需替代为 computed 或 methods）、$on/$off 移除（用 mitt 或 event bus 替代）、$attrs/$listeners 合并。 • 响应式差异：Proxy 与 reactivity 的行为差异（比如 delete obj.prop 的观察）。 • 模板编译差异：某些模板表达式或写法需要微调。 • 类型支持：如使用 TS，需升级 tsconfig、类型声明。 • 兼容策略：可以先使用 @vue/compat（vue 3 的兼容构建）在兼容模式下一步步迁移。

三、组件设计与开发

1. 组件封装原则与实践

关键考虑点：API 设计（props/emits/slots）、可访问性（a11y）、样式隔离、插槽灵活性、性能（懒加载/按需）、文档与测试、TypeScript 类型、可复用性与可配置性、样式主题化（CSS variables / class API）、单元测试。

示例：可复用 Button 组件（TypeScript + Composition）

文件：components/BaseButton.vue

1<template>
2  <button
3    :class="[
4      'base-btn',
5      `base-btn--${variant}`,
6      { 'is-loading': loading, 'is-disabled': disabled },
7    ]"
8    :disabled="disabled || loading"
9    @click="onClick"
10  >
11    <slot name="icon" v-if="!loading"></slot>
12    <span class="base-btn__content">
13      <slot>{{ label }}</slot>
14    </span>
15    <span v-if="loading" class="base-btn__spinner" aria-hidden="true">...</span>
16  </button>
17</template>
18
19<script setup lang="ts">
20import { defineProps, defineEmits } from 'vue';
21
22const props = defineProps({
23  label: { type: String, default: '' },
24  variant: {
25    type: String as () => 'primary' | 'secondary' | 'ghost',
26    default: 'primary',
27  },
28  loading: { type: Boolean, default: false },
29  disabled: { type: Boolean, default: false },
30  type: {
31    type: String as () => 'button' | 'submit' | 'reset',
32    default: 'button',
33  },
34});
35
36const emit = defineEmits<{
37  (e: 'click', ev: MouseEvent): void;
38}>();
39
40function onClick(e: MouseEvent) {
41  if (props.disabled || props.loading) return;
42  emit('click', e);
43}
44</script>
45
46<style scoped>
47.base-btn {
48  /* 基础样式 */
49  padding: 0.5rem 1rem;
50  border-radius: 0.5rem;
51}
52.base-btn--primary {
53  /* 主按钮 */
54}
55.is-loading {
56  opacity: 0.8;
57  pointer-events: none;
58}
59.base-btn__spinner {
60  margin-left: 0.5rem;
61}
62</style>
复制

使用与说明： • 提供 slots（icon、默认 slot）以便扩展。 • 通过 emits 明确事件。 • 用 scoped 或 CSS Modules 保持样式隔离。 • 加 aria 属性与 disabled 状态。

四、浏览器与前端基础

1. 浏览器渲染机制

1. 解析 HTML → 构建 DOM 树
2. 解析 CSS → 构建 CSSOM 树
3. 合并生成 Render Tree（渲染树）
4. Layout（布局计算位置与大小）
5. Paint（绘制像素）
6. Composite（合成图层）

2. 浏览器缓存策略

3. 事件循环机制

• 宏任务（macro task）：script、setTimeout、setInterval、I/O、UI rendering
• 微任务（micro task）：Promise.then、MutationObserver、queueMicrotask

执行顺序： 同步代码 → 微任务 → 宏任务 → 微任务 → 宏任务…

4. 垃圾回收与内存管理

垃圾回收机制（GC）

• 标记-清除（Mark-Sweep）
• 引用计数（Reference Counting）
• 分代回收（Generational GC）

内存泄漏（Memory Leak）

• 全局变量：未被回收，持续占用内存
• 闭包：外部函数引用内部函数变量，导致内部函数无法被回收
• 事件监听：未移除的事件监听器，持续占用内存
• DOM 元素：未被移除的 DOM 节点，持续占用内存

5. V8 引擎原理

• 基于 Chrome 的 JavaScript 引擎
• 采用分代回收（新生代 + 老生代）
• 增量标记（Incremental Marking）和延迟清理（Delay Sweep）
• 并行编译（Parallel Compilation）和并行执行（Parallel Execution）

6. http 请求头

7. http1 与 http2 区别

1、 传输方式（传输协议）

HTTP/1.x 使用的是 文本协议，所有的数据都是以纯文本的形式传输的，每个请求和响应都是独立的。

HTTP/2 使用的是 二进制协议，数据以二进制格式进行传输，这使得解析和处理更高效。

2、 多路复用（Multiplexing）

HTTP/1.x 每个连接一次只能发送一个请求，响应必须等待前一个请求完成。这导致了 队头阻塞（Head-of-line blocking） 问题：如果前面的请求有延迟，后面的请求必须排队等待。

HTTP/2 引入了 多路复用，允许在一个连接上同时发送多个请求和响应，它们的顺序是独立的，不会相互阻塞。这大大提高了性能，尤其是在高延迟网络环境下。

3、 请求头压缩（Header Compression）

HTTP/1.x 请求头通常是以文本形式发送，且每次请求都需要传输大量重复的头部信息（如 cookies、User-Agent 等），增加了带宽的消耗。

HTTP/2 使用了 HPACK 编码压缩请求和响应头，减少了头部信息的重复传输，优化了带宽使用。

4、 服务器推送（Server Push）

HTTP/1.x 不支持服务器推送，客户端只能主动请求资源。

HTTP/2 支持 服务器推送，允许服务器在客户端请求之前主动将一些相关资源推送给客户端，从而减少等待时间（例如，服务器推送某个页面的 CSS、JS 文件，客户端只需使用它们）。

5、 连接复用与持久连接

HTTP/1.x 中，每个请求需要建立一个新的 TCP 连接（除非使用持久连接），且存在多个并发请求时会产生连接数过多的问题。

HTTP/2 通过 连接复用，使得多个请求可以共享同一个 TCP 连接，这不仅减少了 TCP 连接的开销，还可以减少因连接数过多而导致的性能问题。

6、 安全性

HTTP/1.x 和 HTTP/2 在协议层面并没有强制要求加密，但是 HTTP/2 更倾向于使用 HTTPS，很多实现都要求 HTTPS 才能启用 HTTP/2。

HTTP/1.x 的安全性与是否使用 HTTPS 无关，虽然它也可以通过 HTTPS 加密，但并没有像 HTTP/2 那样直接要求。

7、 流量控制

HTTP/1.x 并不具备细粒度的流量控制机制。

HTTP/2 通过对每个流、每个消息和每个数据帧的流量控制，提供了更精细的控制，可以更好地管理带宽和避免过载。

五、虚拟 DOM 与性能优化

1. Diff 算法原理

目标

高效比对两棵虚拟 DOM 树，最小化真实 DOM 操作次数。

Vue2/React16 以前 diff 逻辑

• 只在同层级比较节点（不跨层）
• key 值唯一识别子节点，减少误删重建
• 新旧节点类型不同 → 直接替换整个节点
• 相同节点 → 比较 props → 递归 children

Vue3 diff 优化（双端比较算法）

采用双端 diff（头尾双指针）：

2. Vue 的虚拟 DOM 为什么比直接操作 DOM 快

•	批量更新：Vue 会将多个数据变化收集到一个 "队列" 中，最后一次性操作真实 DOM。
•	虚拟 DOM 对比：Vue 会先对比新旧虚拟 DOM 树，找出差异最小的部分，再操作真实 DOM。
•	避免频繁操作 DOM：直接操作 DOM 会导致浏览器回流（reflow）和重绘（repaint），而虚拟 DOM 只操作有变化的部分。

六、前端架构设计

1. SPA vs MPA（单页应用 vs 多页应用）

2. 服务端渲染（SSR）相关

2.1 怎样实现服务端渲染（SSR）

常见方案：Nuxt 3（推荐，集成度高）、Vite + Vue3 SSR（自建）、Quasar/SSR 等。下面给出一个 Vite + Vue3 SSR 的最小可运行示例（适合理解原理并可直接部署）。 注意点： • SSR 下避免在模块顶层访问 window / document。在组件中用 onMounted 或判断 typeof window !== 'undefined'。 • 数据预取：在服务端 fetch 数据并把 initial state 注入页面（=...），客户端 hydrate 时使用。 • 缓存策略：服务端渲染耗成本，需配合 CDN、页面缓存、Redis 缓存等。 • 推荐使用 Nuxt3 若你想要开箱即用且功能全面。

2.2 服务端渲染（SSR）实现原理

原理 • Vue 组件在 服务器端生成完整 HTML。 • 浏览器直接拿到 HTML → 更快首屏渲染。 • 再执行客户端 JS 进行 "水合（hydrate）" 接管。

核心流程 1. Node 服务端运行 Vue 实例（使用 vue-server-renderer 或 @vue/server-renderer）。 2. 输出 HTML 字符串。 3. 客户端再挂载同样组件结构，完成激活。

优点： • 提升首屏速度 • 解决 SEO • 可与前后端同构代码共享逻辑

3. 微前端（Qiankun）

3.1 Qiankun 是如何实现应用隔离的？

通过沙箱（Proxy + 快照）隔离 JS，全局样式通过 Shadow DOM 或 CSS Scope 解决冲突，子应用路由独立、资源懒加载。

七、前端性能

1. 浏览器与性能优化总结（结合项目经验）

八、前端工程化与构建工具

1. Vite 和 Webpack 比较

1️⃣ 开发阶段

🔹 Webpack • 开发时会 先打包整个项目 → 输出到内存中 → 再启动 dev server。 • 即使改动一个文件，也需要重新走一次模块编译 + 热更新替换。

👉 缺点：首次启动慢、热更新速度受项目体积影响大。

🔹 Vite • 直接利用浏览器的 原生 ES Module（ESM） 功能。 • 启动时只构建 入口文件（index.html）； • 当浏览器请求某个模块时，Vite 才会用 ESBuild（Go 实现，极快） 按需编译返回。

👉 优点：冷启动几乎秒开、改一个文件只重新编译那一个模块。

⸻

2️⃣ 构建阶段（生产环境） • Vite 开发时用 ESBuild（Go 写的，速度极快）； • 生产构建阶段仍使用 Rollup 来做最终打包（更成熟、优化更深）； • Webpack 则始终由自身体系（Loader + Plugin）负责打包。

九、TypeScript 与类型系统

1. TypeScript 中泛型的使用

泛型用于写可复用、可类型推断的函数/类/接口。常见场景：表单、API 响应类型、组件 props、工具函数。

示例 1：泛型函数

1function identity<T>(arg: T): T {
2  return arg;
3}
4const x = identity<number>(123);
5const y = identity('string'); // 类型推断
复制

示例 2：泛型接口 / 类型

1interface ApiResponse<T> {
2  code: number;
3  data: T;
4  message?: string;
5}
6
7type User = { id: number; name: string };
8const res: ApiResponse<User> = { code: 0, data: { id: 1, name: '车车' } };
复制

示例 3：在 Vue 组件中使用泛型（组合 API + TS）

1// useFetch.ts
2import { ref } from 'vue';
3
4export function useFetch<T>(url: string) {
5  const data = ref<T | null>(null);
6  const loading = ref(false);
7  async function fetchData() {
8    loading.value = true;
9    const res = await fetch(url);
10    data.value = (await res.json()) as T;
11    loading.value = false;
12  }
13  return { data, loading, fetchData };
14}
15
16// 使用：
17const { data: users } = useFetch<User[]>('/api/users');
复制

十、Web 安全与防护

1. 支付安全

• 不在前端保管敏感信息（私钥、密钥）
• 使用平台提供的 SDK（如支付宝/微信/Stripe）进行支付流程，避免自实现加密流程
• 使用 HTTPS 强制通信加密
• 前端只存临时标识（短期 token），支付确认基于后端验证
• 防篡改：对重要参数做签名校验（后端生成签名，前端不可信任）
• 防重放：使用唯一 nonce 或 order_id + 后端校验已消费状态
• XSS/CSRF 防护：避免页面被劫持导致支付参数被修改

2. XSS 跨站脚本攻击

• 攻击原理：注入恶意脚本到网页中，当用户浏览页面时执行
• 防护措施：
  • 对用户输入进行转义（如 HTML 转义），防止浏览器将其解析为 HTML 标签
  • 使用 Content Security Policy (CSP) 限制资源加载，防止恶意脚本注入
  • 对用户输入进行验证和过滤，拒绝包含恶意字符的输入
  • 使用模板引擎的自动转义功能

3. CSRF 跨站请求伪造

• 攻击原理：诱导用户在已登录的情况下访问恶意网站，利用用户的身份执行非预期操作
• 防护措施：
  • 使用 CSRF 令牌（如 Django 的 csrf_token），要求每个 POST 请求包含有效令牌
  • 对敏感操作（如修改密码、删除数据）使用 POST 方法
  • 限制请求来源（Referer 检查），防止跨域请求
  • 验证请求头中的 Origin 或 Referer

4. 点击劫持与其他安全问题

• 点击劫持原理：通过将页面内容嵌套在一个透明的 <iframe> 中，诱导用户点击实际并非用户意图的内容
• 防护措施：
  • 使用 X-Frame-Options 响应头防止页面被嵌入 iframe
  • 实现 frame-busting 脚本
  • 提供视觉提示，让用户知道正在与哪个网站交互

其他安全问题

• SQL 注入：使用参数化查询，避免直接拼接 SQL 语句
• 敏感数据泄露：加密存储敏感信息，避免在控制台打印敏感数据
• 依赖包漏洞：定期更新依赖包，使用工具扫描漏洞

十一、JavaScript 核心特性

1. 对象操作方法

Object.keys(obj)

返回一个包含对象所有可枚举属性名的数组（不包含原型链上的属性）。

1const obj = { a: 1, b: 2 };
2console.log(Object.keys(obj)); // ["a", "b"]
复制

Object.values(obj)

返回一个包含对象所有可枚举属性值的数组（不包含原型链上的属性）。

1const obj = { a: 1, b: 2 };
2console.log(Object.values(obj)); // [1, 2]
复制

Object.entries(obj)

返回一个包含对象所有可枚举属性键值对数组的数组。

1const obj = { a: 1, b: 2 };
2console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]
复制

Object.assign(target, ...sources)

将源对象的可枚举属性复制到目标对象上，并返回目标对象。

1const obj1 = { a: 1 };
2const obj2 = { b: 2 };
3Object.assign(obj1, obj2);
4console.log(obj1); // { a: 1, b: 2 }
复制

Object.freeze(obj)

冻结对象，使其不能再修改。即禁止添加、删除或修改对象属性。

1const obj = { a: 1 };
2Object.freeze(obj);
3obj.a = 2; // 不会生效
4console.log(obj); // { a: 1 }
复制

Object.hasOwnProperty(prop)

检查对象是否包含某个自有（非继承）属性。

1const obj = { a: 1 };
2console.log(obj.hasOwnProperty('a')); // true
3console.log(obj.hasOwnProperty('b')); // false
复制

delete 操作符

删除对象的某个属性。

1const obj = { a: 1, b: 2 };
2delete obj.a;
3console.log(obj); // { b: 2 }
复制

Object.getOwnPropertyDescriptors(obj)

获取对象所有自有属性的描述符。

1const obj = { a: 1, b: 2 };
2console.log(Object.getOwnPropertyDescriptors(obj));
复制

2. 数组操作方法

push()

向数组末尾添加一个或多个元素，并返回新数组的长度。

1const arr = [1, 2];
2arr.push(3); // [1, 2, 3]
复制

pop()

从数组末尾删除一个元素，并返回该元素。

1const arr = [1, 2, 3];
2const popped = arr.pop(); // 3
3console.log(arr); // [1, 2]
复制

shift()

删除数组的第一个元素，并返回该元素。

1const arr = [1, 2, 3];
2const shifted = arr.shift(); // 1
3console.log(arr); // [2, 3]
复制

unshift()

在数组的开头添加一个或多个元素，并返回新数组的长度。

1const arr = [2, 3];
2arr.unshift(1); // [1, 2, 3]
复制

splice()

从数组中添加或删除元素。

1const arr = [1, 2, 3, 4];
2arr.splice(2, 1); // 删除从索引 2 开始的 1 个元素，返回被删除的元素
3console.log(arr); // [1, 2, 4]
复制

slice()

返回一个数组的浅拷贝，包含指定的部分。

1const arr = [1, 2, 3, 4];
2const sliced = arr.slice(1, 3); // [2, 3]
复制

forEach()

遍历数组的每个元素，执行指定的回调函数。

1const arr = [1, 2, 3];
2arr.forEach((num) => console.log(num)); // 1, 2, 3
复制

map()

创建一个新数组，数组中的元素是原始数组元素调用回调函数处理后的值。

1const arr = [1, 2, 3];
2const doubled = arr.map((num) => num * 2); // [2, 4, 6]
复制

filter()

创建一个新数组，包含所有通过测试的元素。

1const arr = [1, 2, 3, 4];
2const even = arr.filter((num) => num % 2 === 0); // [2, 4]
复制

reduce()

使用累加器（accumulator）对数组的每个元素进行操作，返回一个单一的值。

1const arr = [1, 2, 3, 4];
2const sum = arr.reduce((acc, num) => acc + num, 0); // 10
复制

find()

返回数组中第一个符合条件的元素。如果没有符合的元素，返回 undefined。

1const arr = [1, 2, 3, 4];
2const found = arr.find((num) => num > 2); // 3
复制

includes()

判断数组是否包含某个元素，返回布尔值。

1const arr = [1, 2, 3];
2console.log(arr.includes(2)); // true
复制

concat()

合并两个或多个数组，并返回一个新的数组。

1const arr1 = [1, 2];
2const arr2 = [3, 4];
3const merged = arr1.concat(arr2); // [1, 2, 3, 4]
复制

3. 异步编程

Promise 基础

1// 创建 Promise
2const promise = new Promise((resolve, reject) => {
3  // 异步操作
4  setTimeout(() => {
5    resolve('操作成功');
6    // 或 reject('操作失败');
7  }, 1000);
8});
9
10// 使用 Promise
11promise
12  .then((result) => console.log(result))
13  .catch((error) => console.error(error));
复制

async/await

1async function fetchData() {
2  try {
3    const response = await fetch('/api/data');
4    const data = await response.json();
5    return data;
6  } catch (error) {
7    console.error('Error fetching data:', error);
8  }
9}
复制

4. 函数式编程

高阶函数

1// 接受或返回函数的函数
2function withLogging(func) {
3  return function (...args) {
4    console.log('Calling function with:', args);
5    return func.apply(this, args);
6  };
7}
8
9const add = (a, b) => a + b;
10const addWithLogging = withLogging(add);
复制

纯函数

1// 相同输入总是产生相同输出，无副作用
2function pureMultiply(a, b) {
3  return a * b;
4}
复制

闭包

1function createCounter() {
2  let count = 0;
3  return {
4    increment: () => count++,
5    getCount: () => count,
6  };
7}
8
9const counter = createCounter();
复制

十二、html 相关问题

1. 语义化标签

使用语义化标签（如 <header>、<nav>、<main>、<footer>）来组织页面结构，提高可访问性和 SEO。

2. 盒模型

盒模型（Box Model）是 CSS 中用于描述元素布局的一种模型。每个元素都被视为一个矩形框，包含内容区域、内边距（padding）、边框（border）和外边距（margin）。

怪异盒模型（Quirks Mode）是指浏览器在解析 HTML 和 CSS 时，采用的一种非标准的盒模型。在怪异盒模型中，元素的宽度和高度不包括内边距和边框，而只包括内容区域。

3. 响应式设计

响应式设计是指网页能够根据不同设备的屏幕尺寸和分辨率，自动调整布局和样式，以提供最佳的用户体验。

rem 是 CSS 中用于相对单位的一种长度单位，相对于根元素（html 元素）的字体大小。 em 是 CSS 中用于相对单位的一种长度单位，相对于父元素的字体大小。 tailwindcss 是一个基于 utility-first 原则的 CSS 框架，提供了丰富的预定义类名，用于快速构建响应式网页。

4. flex 布局

常见的 flex 布局属性包括：

• display: flex：将元素设为 flex 容器
• flex-direction：定义 flex 项目的主轴方向（row、row-reverse、column、column-reverse）
• justify-content：定义 flex 项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）
• align-items：定义 flex 项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）
• flex-wrap：定义 flex 项目是否换行（nowrap、wrap、wrap-reverse）

5. 画三角形

1.triangle {
2  width: 0;
3  height: 0;
4  border-left: 50px solid transparent;
5  border-right: 50px solid transparent;
6  border-bottom: 100px solid red;
7}
复制

6. 居中布局

常见的居中布局方式包括：

• 水平居中：margin: 0 auto
• 垂直居中：line-height 等于 height
• 水平垂直居中：display: flex; justify-content: center; align-items: center;

7. h5 新特性 css3 新属性

拖放（ Drag and drop）APIl

语义化更好的内容标签（ header、nav、 footer、 aside、 article、 section）

音频、视频（ audio、 video）API

画布（ Canvas）API

地理（ Geolocation）APl

本地离线存储（ localStorage），即长期存储数据，浏览器关闭后数据不丢失。

会话存储（ sessionStorage），即数据在浏览器关闭后自动删除

表单控件包括 calendar、date、time、 email、url、 search。

新的技术包括 webwork、 websocket、 Geolocation

• transform：用于元素的旋转、缩放、倾斜或平移等变换效果。
• transition：用于元素属性变化时的平滑过渡效果。
• animation：用于创建复杂的动画效果，包括多个关键帧。
• @keyframes：用于定义动画的关键帧，包括属性值的变化。
• media query：用于根据不同的设备尺寸和分辨率，应用不同的 CSS 样式。
• flexbox：用于创建灵活的布局，特别适用于响应式设计。
• grid layout：用于创建二维网格布局，适用于复杂的页面结构。
• responsive images：用于根据不同的设备尺寸和分辨率，加载不同尺寸的图片，以提高加载速度和用户体验。
• svg：用于创建矢量图形，适用于图标、 logo 等需要缩放的场景。

8. 回流 重绘

回流（Reflow）：当 DOM 元素的几何属性发生变化，导致浏览器需要重新计算元素的位置和大小，从而触发回流。

重绘（Repaint）：当 DOM 元素的外观属性发生变化，导致浏览器需要重新绘制元素的外观，而不改变其位置和大小，从而触发重绘。

回流和重绘都是浏览器渲染页面的过程中发生的性能问题。为了避免这些问题，开发人员应该尽量减少 DOM 操作和样式变化，以及使用硬件加速等技术。

回流必定重绘，重绘不一定回流。

9. sessionStorage 和 localStorage 的区别

• sessionStorage 存储的数据在浏览器关闭后会自动删除，而 localStorage 存储的数据不会自动删除，直到手动删除或过期。
• sessionStorage 存储的数据只能在当前会话中访问，而 localStorage 存储的数据可以在所有会话中访问。
• sessionStorage 存储的数据的大小限制为 5MB，而 localStorage 存储的数据的大小限制为 10MB。

10. cookie 的特点

• cookie 是存储在用户浏览器中的小型文本文件，用于在客户端和服务器之间传递信息。
• cookie 可以包含键值对，用于存储用户的状态信息或登录凭证等。
• cookie 可以设置过期时间，过期后会自动删除。
• cookie 可以设置路径，只有在指定路径下的请求才会携带该 cookie。
• cookie 可以设置域，只有在指定域下的请求才会携带该 cookie。

11. bfc 块级格式化上下文

bfc（Block Formatting Context）是指块级格式化上下文，是 CSS 中的一种布局机制。

bfc 的特征包括：

• 内部的元素在垂直方向上一个接一个地排列。
• 每个元素的左外边距与包含块的左边界相接触，右外边距与包含块的右边界相接触。
• 内部元素的宽度不能超过包含块的宽度。
• bfc 可以包含浮动元素，但是不会包含浮动元素的高度。

bfc 可以用于解决一些布局问题，例如清除浮动、防止 margin 合并等。

如何创建 BFC ？

• 根元素，即 html 元素
• float 值不为 none
• position 值为 absolute 或 fixed
• display 的值为 inline-block、tabl-cell、table-caption
• overflow 的值不为 visible

BFC 的使用场景

• 去除边距重叠问题
• 清除浮动（让父元素的高度包含子浮动元素）
• 阻止元素被浮动元素覆盖

12. display: none 和 visibility: hidden 两者的区别

• display: none 会使元素完全从文档流中移除，占用的空间也会被释放。而 visibility: hidden 会使元素隐藏起来，但是仍然占用空间。
• display: none 是一种不渲染的方式，而 visibility: hidden 是一种渲染的方式。
• display: none 会触发重绘和回流，而 visibility: hidden 只会触发重绘。

十三、项目 相关问题

1. 项目中遇到的问题和解决方法

2. 如果开发时间确认 如何从后往前开发排期

3. 后端人员无法提供自己需要的接口格式 怎么去沟通

4. 当产品需求不合理 不符合项目后期迭代 如何去沟通