当前位置：首页 > news >正文

面试总结。

news 来源：原创 2025/6/7 14:54:49

一、回流（重排）与重绘（Repaint）

优化回答：

概念区分：
- 回流（Reflow/Relayout）：当元素的几何属性（如宽高、位置、隐藏 / 显示）发生改变时，浏览器需重新计算元素的布局及相互位置关系，触发整个页面或部分区域的重新排版。
  - 影响范围：可能波及父子元素甚至整个文档流，性能消耗较高。
- 重绘（Repaint）：当元素的视觉属性（如颜色、背景、阴影）改变但不影响布局时，浏览器仅重新绘制该元素，无需重新计算布局。
  - 影响范围：仅针对当前元素，性能消耗较低。
触发场景：
- 回流：width/height、padding/margin、display: none、offsetTop/offsetLeft等属性修改，或添加 / 删除 DOM 节点。
- 重绘：color、background、box-shadow等样式修改。
性能优化：
- 批量修改样式：使用class批量应用样式，避免逐行修改属性。
- 使用文档碎片（Document Fragment）：批量操作 DOM 时先存入碎片，减少回流次数。
- 脱离文档流：对复杂动画元素使用position: fixed/absolute或will-change: transform，使其独立于其他元素。

二、Vue 与 React 的核心区别

原回答问题：未提及状态管理、生态差异等核心点

优化回答：

从以下维度对比，结合项目实践：

模板与渲染：
- Vue：基于模板语法（HTML 标签 + 指令，如v-if/v-for），编译后生成虚拟 DOM。
- React：使用JSX（JavaScript 内嵌 HTML），更灵活，可直接在模板中编写逻辑。
状态管理：
- Vue：内置响应式系统（通过Object.defineProperty劫持数据变化），组件状态自动更新。
- React：需手动通过setState或useState触发更新，状态不可直接修改，需通过回调或函数式更新确保一致性。
组件机制：
- Vue：组件数据通过props单向传递，$emit实现自定义事件，支持 ** 插槽（Slot）** 和双向绑定（v-model）。
- React：组件数据通过props单向传递，事件采用合成事件（Synthetic Events），状态提升（Lifting State Up）或 Hook（如useContext）实现跨组件通信。
生态与工具链：
- Vue：生态轻量，官方提供vue-router、vuex，适合快速开发中小型项目。
- React：生态庞大，需搭配react-router、Redux/MobX等库，适合大型复杂应用（如单页应用、移动端跨平台开发）。
项目实践差异：
- 若项目需要快速迭代、低学习成本，Vue 更优（如管理系统）；
- 若需高性能渲染（如列表滚动、动画）或跨平台（React Native），React 更优。

三、深拷贝的实现方法

原回答问题：未提及具体实现方式

优化回答：

核心问题：
- 浅拷贝仅复制基本类型值或引用类型的地址，导致新旧对象共享同一内存，修改会互相影响。
- 深拷贝需递归复制所有层级属性，使新对象与原对象完全独立。

实现方法：

JSON.parse(JSON.stringify())：
- 简单易用，但无法处理函数、Symbol、Date、RegExp 等特殊类型，且会忽略undefined、破坏原型链。
```
const shallowCopy = JSON.parse(JSON.stringify(obj));
```

递归实现：

手动判断数据类型，递归复制对象 / 数组，处理循环引用（避免栈溢出）。

function deepClone(obj, visited = new WeakMap()) {if (typeof obj !== 'object' || obj === null) return obj; // 基本类型或nullif (visited.has(obj)) return visited.get(obj); // 处理循环引用const clone = Array.isArray(obj) ? [] : {};visited.set(obj, clone);for (const key in obj) {if (obj.hasOwnProperty(key)) {clone[key] = deepClone(obj[key], visited);}}return clone;
}

工具库：
- 使用lodash.clonedeep或immer（ immutable 数据方案），兼容性和健壮性更强。

应用场景：
- 需彻底隔离数据时（如状态管理中的不可变数据），避免因引用共享导致的意外副作用。

四、CSS 继承属性与非继承属性

原回答问题：列举较少，未明确分类

优化回答：

继承属性（子元素默认继承父元素样式）：
- 文本相关：font-family、font-size、color、line-height、text-align、visibility。
- 列表相关：list-style、list-style-type。
- 其他：opacity、cursor、direction（文本方向）。
非继承属性（需显式声明）：
- 盒模型：width、height、margin、padding、border。
- 定位与布局：position、float、display、z-index。
- 背景与装饰：background、text-decoration、box-shadow。
例外情况：
- a标签的color默认继承，但 hover 状态需单独设置；
- 可通过all: inherit强制继承所有属性（包括非继承属性），但需谨慎使用（可能破坏布局）。

五、回答技术问题的通用策略

结构化表达：
- 分点回答（如 “第一... 第二... 第三...”），先讲定义 / 原理，再讲应用场景，最后补充注意事项或优化方案。
- 例：“水平垂直居中的方法有三种：1. Flex 布局（适用于现代浏览器）；2. Grid 布局（二维布局场景）；3. 定位法（兼容性要求高时）。”
结合项目经验：
- 穿插实际案例，如 “在数书平台项目中，我用 Flex 布局实现了响应式卡片居中，在 IE 兼容场景下 fallback 到定位法。”
主动扩展：
- 若问题涉及相关知识点，可适当延伸（如问v-if时，补充v-show的使用场景对比：频繁切换用v-show，条件性渲染用v-if）。
承认不足并展示学习能力：
- 若遇不确定的问题，可如实说：“这个点我目前了解到的是...，但可能还有更深的原理，我最近在学习 XX 文档，后续会重点研究。”

总结建议

强化原理学习：
- 深入理解浏览器渲染机制（如回流 / 重绘）、框架设计思想（如 Vue 的响应式、React 的单向数据流），通过官方文档（MDN、Vue/React 官网）和权威书籍（如《你不知道的 JavaScript》）夯实基础。
刻意练习输出：
- 用 “费曼学习法” 复述知识点（如向虚拟听众讲解深浅拷贝区别），或通过博客、技术笔记整理思路。
模拟面试实战：
- 针对高频问题（如组件通信、性能优化、跨域解决方案）进行模拟回答，录制后复盘改进表达逻辑。