阿里巴巴-社招-2年 · 第 1 轮 · 二面

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: call、apply和bind、性能优化、浏览器渲染过程、浏览器的缓存机制 本轮共 10 道题。答案默认折叠,便于先自行作答。 1. 假设现在有一个老项目需从React 17升级至React 18,你会怎么做 题目要点 先升级 react/react-dom 版本,再更改根渲染方式为 createRoot 理解 React 18 并发特性,调整相关组件代码 确认并升级第三方依赖,保证兼容性 充分测试,监控性能,平滑迁移 参考答案 一、考察点 理解 React 18 的新特性及其对应用的影响 掌握 React 18 升级步骤及兼容性处理 了解新版本的渲染机制变化(如并发特性) 熟悉常见问题排查与升级风险规避 二、参考答案 2.1 升级前准备 阅读官方升级指南(React 官方文档提供详尽升级说明) 检查项目依赖版本,确保 React 相关依赖(如 ReactDOM、react-scripts 等)兼容 React 18 备份代码及建立测试环境,保证升级过程可回滚 2.2 主要升级步骤 1)升级 React 和 ReactDOM 版本 npm install react@18 react-dom@18 或 yarn add react@18 react-dom@18 2)更新根节点渲染方式 React 18 引入了新的根 API:createRoot,替代 React 17 的 ReactDOM.render。 ...

July 28, 2025

阿里巴巴-社招-2年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: react hooks、WeakMap 和 WeakSet 本轮共 12 道题。答案默认折叠,便于先自行作答。 1. ES6相关属性都用过那些 题目要点 熟悉 ES6 关键新特性和语法糖 了解特性设计目的,提升代码可维护性和性能 结合项目场景合理运用,避免滥用带来的副作用 使用 ESLint 及 Babel 保证兼容性和规范 参考答案 一、考察点 全面了解 ES6(ECMAScript 2015)新特性 掌握模块化、变量声明、函数、对象、数组、字符串、类、Promise 等核心特性 能说明特性使用场景、优势及与旧版本对比 具备在项目中合理应用 ES6 特性的能力 二、参考答案 1.1 变量声明 let 和 const:块级作用域,解决 var 变量提升和重复声明问题 推荐使用 const 声明常量,let 声明可变变量,避免全局污染 1.2 模板字符串(Template Literals) 使用反引号 ` 支持多行字符串和内嵌表达式 ${expr} 替代传统字符串拼接,提升可读性 1.3 解构赋值(Destructuring) 支持数组和对象解构,简化变量赋值 常用于函数参数处理、数据提取 1.4 箭头函数(Arrow Functions) 简洁函数表达式,自动绑定 this 不可作为构造函数,不绑定 arguments 常用于回调和函数简写 1.5 扩展运算符(Spread)和剩余参数(Rest) 扩展运算符 ... 用于数组和对象展开 剩余参数用于函数参数收集 1.6 对象字面量增强 属性简写、方法简写、计算属性名 支持简洁声明和动态键名 1.7 类(Class) ES6 引入基于原型的语法糖,支持继承、构造函数、静态方法 提升面向对象编程体验 1.8 Promise 和异步编程 用于异步流程控制,解决回调地狱 支持链式调用和错误捕获 1.9 模块(Module) import 和 export 语法,支持静态分析和按需加载 替代传统的 CommonJS、AMD 模块规范 1.10 Symbol 类型 新增基本类型,表示独一无二的值 常用于定义对象的私有属性和常量 1.11 Set 和 Map 数据结构 Set:无重复元素集合 Map:键值对集合,键可以是任意类型 1.12 Iterator 和 Generator 统一遍历接口 Generator 生成器函数,用于异步流程和惰性计算 1.13 其他 for...of 循环:遍历可迭代对象 默认参数和函数参数尾逗号 数组新增方法如 Array.from、find、findIndex 三、常见使用场景及优势 特性 使用场景 优势与改进点 let/const 代替 var,块级作用域变量声明 避免变量提升和作用域污染 模板字符串 拼接复杂字符串和多行文本 可读性高,减少错误 解构赋值 参数提取、数组拆包、函数返回值拆分 代码简洁,语义清晰 箭头函数 回调函数、简化函数定义 自动绑定 this,代码更短 扩展运算符 数组合并、对象拷贝 简化代码,避免手动循环 Promise 异步请求、链式调用 解决回调地狱,增强异步流程可读性 模块化 项目拆分、代码复用 标准化模块,支持静态分析 Set/Map 需要高效查找、去重、键值映射的场景 性能优于传统对象和数组 四、常见误区或面试陷阱 ❌ 误区一:滥用箭头函数导致 this 绑定错误 不适合需要动态 this 的场景(如对象方法) ❌ 误区二:未充分利用解构赋值,写出冗长代码 理解解构赋值提升代码清晰度 ❌ 误区三:Promise 误用未捕获异常,导致异常丢失 应正确使用 .catch 或 try...catch 包裹 async/await 2. 为什么WeakMap的键必须是对象 题目要点 WeakMap 键必须是对象,因为弱引用机制只能作用于对象 对基本类型无法进行弱引用,无法参与垃圾回收机制 WeakMap 设计用于保存对象私有数据,避免内存泄漏 与普通 Map 区别在于弱引用和不可枚举特性 参考答案 一、考察点 理解 WeakMap 的设计初衷和底层实现机制 掌握 WeakMap 与普通 Map 的区别 了解 JavaScript 垃圾回收机制与弱引用的关系 能说明 WeakMap 键限制为对象的技术原因及应用场景 二、参考答案 1.1 WeakMap 的基本概念 WeakMap 是一种键为对象,值任意的数据结构 与普通 Map 不同,WeakMap 对键对象的引用是“弱引用” 当键对象不存在其它引用时,能被垃圾回收器回收,避免内存泄漏 1.2 键必须是对象的原因 1)弱引用必须指向对象 JavaScript 的弱引用机制只能对对象类型生效 基本类型(如字符串、数字)是值类型,无法被弱引用追踪和回收 2)垃圾回收机制要求 只有对象才存在垃圾回收标记和生命周期管理 WeakMap 通过弱引用允许键对象在无外部引用时自动回收 如果允许基本类型作为键,则无法做到弱引用,违背 WeakMap 设计初衷 3)设计意图和使用场景 用于存储与对象相关联的私有数据,避免内存泄漏 例如框架中保存某个 DOM 节点的元数据,DOM 节点销毁时对应数据自动释放 1.3 WeakMap 与 Map 的区别 特性 Map WeakMap 键类型 任意类型 只能是对象 是否可枚举 可遍历所有键值 不可遍历 引用强度 对键保持强引用,阻止垃圾回收 对键保持弱引用,不阻止垃圾回收 适用场景 普通键值映射 关联对象私有数据,自动回收 1.4 常见误区或面试陷阱 ❌ 误区一:认为 WeakMap 可以用基本类型作为键 会导致运行时错误,WeakMap 只能接受对象作为键 ❌ 误区二:误用 WeakMap 导致内存泄漏 忽略 WeakMap 不可遍历特性,误判数据存在与否 3. Map支持哪些非对象键 题目要点 Map 支持所有基本类型和对象作为键 包括字符串、数字、布尔值、Symbol、null、undefined 与 WeakMap 只能用对象键不同,Map 更灵活 理解键类型和对应的行为差异,避免键冲突 参考答案 一、考察点 理解 JavaScript Map 的键类型及其存储机制 掌握 Map 与 WeakMap 键的差异 了解基本类型和对象类型作为键的行为和区别 能说明非对象键在 Map 中的实际使用场景 二、参考答案 1.1 Map 键的类型支持 Map 的键可以是任意值,包括基本类型和对象类型 ...

July 28, 2025

阿里巴巴-社招-1年 · 第 1 轮 · 二面

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: react hooks、性能优化 本轮共 10 道题。答案默认折叠,便于先自行作答。 1. 你们项目为什么选Redux而非MobX 题目要点 Redux 强调可预测性、单向数据流、纯函数 reducer,适合复杂项目 丰富的调试工具和社区中间件支持开发效率和可维护性 MobX 响应式自动追踪,适合快速开发,但隐式依赖增加调试难度 团队规模和项目复杂度是选择状态管理方案的关键因素 现代 Redux 已大幅简化,代码冗余感降低 参考答案 一、考察点 是否理解 Redux 和 MobX 两种状态管理库的设计理念与差异 是否能结合项目实际需求,论述选择某一方案的合理性 是否掌握 Redux 在复杂状态管理中的优势与局限 是否能表达对团队协作、维护性和性能的综合考虑 二、参考答案 1.1 原理说明 Redux 基于 Flux 架构思想,使用单一全局状态树(Store) 状态只读,通过派发(dispatch)纯函数(Reducer)更新状态 强调不可变数据和纯函数,方便调试和时间旅行(time-travel debugging) 侧重于可预测性和可维护性 MobX 采用响应式编程思想,通过可观察(observable)数据和自动追踪依赖实现状态同步 支持隐式状态更新,使用更接近传统面向对象编程 适合快速开发,较少样板代码 1.2 选择 Redux 的主要理由 1)明确的状态流向和可预测性 Redux 的单向数据流和纯函数 reducer 让状态变化过程清晰、易追踪 在多人协作中,可以方便定位状态更新的具体原因,减少调试成本 2)强大的开发者工具支持 Redux DevTools 提供时间旅行、快照对比、action 日志等,极大提升调试体验 有丰富的中间件生态(如 redux-thunk、redux-saga),便于处理复杂异步逻辑 3)适合大型复杂项目 状态结构复杂时,Redux 更便于组织和维护,模块化拆分 reducer 明确职责 明确的规范和社区共识,团队成员易于理解和统一编码风格 4)可测试性强 Reducer 是纯函数,易于单元测试,保证业务逻辑可靠 1.3 不选 MobX 的考虑 1)隐式依赖难以追踪 MobX 的自动依赖追踪机制带来状态变化的隐式性,可能导致调试困难 团队成员对响应式原理不熟悉时,维护成本升高 2)状态变化不够可预测 MobX 允许任意地方修改状态,可能出现难以预料的副作用 不利于实现严格的状态管理和权限控制 3)社区规范和中大型项目生态 Redux 生态成熟且社区规范丰富 MobX 在某些复杂场景下不够透明,团队风险较大 1.4 常见误区或面试陷阱 ❌ 误区一:认为 MobX 性能一定优于 Redux 实际性能差异因项目而异,合理使用 Redux 也能实现优秀性能 ❌ 误区二:Redux 代码一定繁琐难写 现代 Redux 工具(如 Redux Toolkit)极大简化开发体验,减少样板代码 ❌ 误区三:认为 MobX 是“魔法”,不需要学习状态管理原理 响应式原理本身也需要深入理解,否则容易导致维护难题 2. 项目中提到“首屏加载优化1.5秒”,具体如何实现 题目要点 首屏加载优化核心在于减少首屏资源体积和请求数量 结合 SSR/SSG 预渲染,缩短白屏时间 动态拆分代码,懒加载非关键资源 充分利用浏览器缓存和 CDN 监控指标涵盖 FCP、TTI,持续迭代优化 参考答案 一、考察点 理解首屏加载的定义及关键性能指标(如 FCP、TTI) 掌握多种前端性能优化手段,涵盖资源、网络、渲染等层面 能结合具体技术和业务场景,说明优化实施细节 理解优化过程中的权衡与监控方法 二、参考答案 1.1 首屏加载的概念与性能指标 首屏加载:用户打开页面到看到页面主要内容(首屏内容)完整渲染的时间 ...

July 28, 2025

阿里巴巴-社招-1年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: Webpack与Vite、事件循环、跨域通信 本轮共 16 道题。答案默认折叠,便于先自行作答。 1. 项目中遇到了哪些技术难题,是如何解决的 题目要点 STAR法则 参考答案 略 2. 在解决这些技术难题的过程中,有没有尝试过其他解决方案 题目要点 略 参考答案 略 3. 项目中是如何进行团队协作的 题目要点 略 参考答案 略 4. 在团队协作中,有没有遇到过沟通不畅或者意见不合的情况?是如何解决的 题目要点 略 参考答案 略 5. webpack 的 plugin 了解吗 题目要点 Plugin 是 Webpack 扩展机制,贯穿构建全过程 核心结构是类 + apply(compiler) + Tapable 钩子 常见生命周期钩子:compile、emit、done 等 可用于注入变量、分析构建、生成资源、操作产物等 熟悉 compiler 与 compilation 的概念 可结合实际项目经验举例说明插件使用场景 参考答案 一、考察点 是否理解 Plugin 在 Webpack 中的作用和工作机制 Plugin 是 Webpack 最核心的扩展机制之一 是否掌握编写 Plugin 的基本方法和生命周期 了解 compiler、compilation、钩子(hooks)等概念 能否结合实际项目场景说明使用插件的案例和目的 ...

July 28, 2025

滴滴-社招-5年 · 第 1 轮 · 二面

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 10 道题。答案默认折叠,便于先自行作答。 1. 介绍一下你觉的最有成就感的项目 题目要点 略 参考答案 略 2. 项目为什么选择Lerna+Yarn Workspaces构建Monorepo 题目要点 Monorepo 实现多包统一管理,提升代码复用和维护效率 Lerna 管理版本发布、变更检测、脚本执行 Yarn Workspaces 优化依赖安装,支持本地包软链接 两者结合,实现高效、便捷的 Monorepo 构建和维护 适合大型复杂项目及多包同步开发场景 参考答案 一、考察点 理解 Monorepo 的概念及优势 多个相关包/模块统一管理、版本控制、发布流程等 掌握 Lerna 与 Yarn Workspaces 的功能和配合方式 包管理、依赖安装优化、版本发布、脚本执行等 能够分析技术选型的利弊和实际应用场景 团队协作、构建效率、依赖一致性等 展示架构设计思路和实践经验 二、参考答案 1.1 原理说明 Monorepo 概念 将多个相关的项目包(packages)放在同一代码仓库中统一管理 便于代码复用、版本统一、跨包协调 Lerna 功能 管理 Monorepo 中多个包的版本发布和依赖关系 支持基于 Git 的变更检测,自动决定哪些包需要发布 脚本集中执行,提升跨包开发效率 Yarn Workspaces 功能 优化依赖安装,自动将多个包的依赖扁平化安装,避免重复依赖 支持包之间的本地软链接,方便跨包开发调试 减少 node_modules 大小,提升安装速度 Lerna + Yarn Workspaces 配合优势 Lerna 专注版本和发布管理 Yarn Workspaces 专注依赖管理和安装优化 组合使用,实现 Monorepo 的高效管理和性能提升 1.2 核心用法 + 选择理由 选择 Lerna + Yarn Workspaces 的具体理由 依赖管理高效:Yarn Workspaces 扁平化依赖树,减少冗余,提高安装速度,节省磁盘空间 版本发布便捷:Lerna 支持自动检测改动包,实现增量发布,减少发布成本 跨包开发友好:Workspaces 实现包间软链接,调试时无需发布即可实时联动 统一管理多个包:代码结构清晰,版本一致性好,避免包版本冲突 社区成熟稳定:Lerna 和 Yarn 是成熟开源项目,生态完善,文档丰富 使用场景举例 大型前端项目拆分为多个业务组件包 同时管理多个相关 npm 包,需同步发布和升级 需要提升 CI/CD 流程效率和开发体验 1.3 常见误区或面试陷阱 ❌ 误区一:认为 Lerna 可以独立完成所有 Monorepo 管理工作 实际 Lerna 本身不管理依赖安装,需配合 Workspaces 或 npm/yarn 其他特性 ❌ 误区二:忽视依赖扁平化带来的版本冲突风险 需要合理规划依赖版本,避免冲突和不兼容 ❌ 误区三:Monorepo 不适合所有项目,盲目迁移可能增加复杂度 适用项目规模和团队协作需求需评估清楚 3. 如何解决子包间的循环依赖问题 题目要点 循环依赖会导致加载异常和维护困难 抽取公共模块拆分依赖,消除环路 使用接口抽象和依赖注入解耦 动态导入延迟加载,规避同步循环 设计单向依赖,保持依赖关系 DAG 配合工具检测和团队规范防范 参考答案 一、考察点 理解循环依赖的概念及危害 ...

July 28, 2025

滴滴-社招-5年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: 作用域链与闭包、全方位解读this、函数柯里化、原型链与继承、DOM操作、深拷贝/浅拷贝、call、apply和bind 本轮共 24 道题。答案默认折叠,便于先自行作答。 1. 深拷贝浅拷贝有什么区别?怎么实现深拷贝? 题库原题:深拷贝浅拷贝有什么区别?怎么实现深拷贝? 题目要点 JS数据类型分别基本数据类型和引用数据类型,基本数据类型保存的是值,引用类型保存的是引用地址(this指针)。 浅拷贝共用一个引用地址,深拷贝会创建新的内存地址。 浅拷贝方法 直接对象复制 Object.assign 深拷贝 JSON.stringify转为字符串再JSON.parse 深度递归遍历 参考答案 一、数据类型存储 前面文章我们讲到,JavaScript中存在两大数据类型: 基本类型 引用类型 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中 二、浅拷贝 浅拷贝,指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝 如果属性是基本类型,拷贝的就是基本类型的值。如果属性是引用类型,拷贝的就是内存地址 即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址 下面简单实现一个浅拷贝 function shallowClone(obj) { const newObj = {}; for(let prop in obj) { if(obj.hasOwnProperty(prop)){ newObj[prop] = obj[prop]; } } return newObj; } 在JavaScript中,存在浅拷贝的现象有: Object.assign Array.prototype.slice(), Array.prototype.concat() 使用拓展运算符实现的复制 Object.assign var obj = { age: 18, nature: ['smart', 'good'], names: { name1: 'fx', name2: 'xka' }, love: function () { console.log('fx is a great girl') } } var newObj = Object.assign({}, obj); slice() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.slice(0) fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] concat() const fxArr = ["One", "Two", "Three"] const fxArrs = fxArr.concat() fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 拓展运算符 const fxArr = ["One", "Two", "Three"] const fxArrs = [...fxArr] fxArrs[1] = "love"; console.log(fxArr) // ["One", "Two", "Three"] console.log(fxArrs) // ["One", "love", "Three"] 三、深拷贝 深拷贝开辟一个新的栈,两个对象的属性完全相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性 ...

July 28, 2025

滴滴-社招-3年 · 第 1 轮 · 三面

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: 浏览器渲染过程、浏览器的缓存机制、浏览器的垃圾回收机制、浏览器的存储机制 本轮共 10 道题。答案默认折叠,便于先自行作答。 1. 在你做过的项目中,最值得说的是哪一个 题目要点 STAR法则 参考答案 基于自己简历挖掘亮点项目 2. 在该项目中,你主要负责哪些模块的开发?这些模块的技术难点是什么 题目要点 略 参考答案 略 3. 请举例说明在项目中,你是如何通过技术手段解决业务问题的 题目要点 略 参考答案 略 4. 在项目中,你采取了哪些性能优化措施?效果如何 题目要点 略 参考答案 可以参考 【性能优化】相关知识点,在面经最后 5. 在项目中遇到的最大技术挑战是什么?你是如何解决的 题目要点 略 参考答案 略 6. 在项目中,你是如何与团队成员协作的?请分享一个具体的协作案例 题目要点 略 参考答案 略 7. 在团队协作中,遇到过哪些冲突?你是如何解决的 题目要点 略 参考答案 略 8. 在项目中,你是如何进行项目管理和进度保障的 题目要点 略 参考答案 略 9. 你的职业规划是什么样的?短期和长期目标分别是什么 题目要点 略 参考答案 略 10. 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式 注意:不能使用任何内置的 BigInteger 库或直接将输入转换为整数 示例 1: 输入: num1 = "2", num2 = "3" 输出: "6" 示例 2: 输入: num1 = "123", num2 = "456" 输出: "56088" 题目要点 模拟多位数乘法的过程,按位乘积+进位合并 用数组保存每一位的计算结果,最终拼接成字符串 注意字符串转数字、进位处理、前导 0 清除等细节 不允许使用 BigInt、Number 等将字符串转换为数字 参考答案 考察点 考察对字符串操作的熟练程度和大数模拟乘法逻辑实现能力 掌握多位数相乘的数学原理,模拟竖式乘法 考察对数组操作、进位处理、边界情况的处理能力 参考答案 一、原理说明 由于不能直接将字符串转为整数,需模拟“逐位乘法 + 进位处理”,如同手动计算多位乘法(竖式)一样: ...

July 28, 2025

滴滴-社招-3年 · 第 1 轮 · 二面

← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点: react hooks、列表和key、高阶组件、性能优化、react 渲染机制、React函数组件更新、react 组件设计模式、全方位解读this、类型判断 本轮共 14 道题。答案默认折叠,便于先自行作答。 1. 项目中遇到的最大技术挑战是什么 题目要点 略 参考答案 略 2. 项目整体架构是什么样的 题目要点 略 参考答案 略 3. 在项目中,你们是如何进行前端代码的模块化和组件化的 题目要点 模块化:代码拆分成独立功能模块,使用 ES Module 标准 组件化:UI拆分成可复用组件,封装结构、样式和逻辑 结合构建工具支持模块管理和代码分割 组件通信通过 props、事件、状态管理实现 合理设计文件结构和规范,提升维护性和扩展性 注意职责单一、样式隔离和性能优化 防止模块和组件划分不合理导致管理混乱 参考答案 考察点 理解模块化和组件化的概念及其在前端开发中的重要性 熟悉常见的模块化规范(如 CommonJS、ES Module)及其区别 掌握组件化设计思想和实现方式,尤其是在主流框架中的实践 能结合项目需求合理组织代码结构,提高复用性和维护性 参考答案 一、原理说明 模块化 指将代码拆分成独立的、功能明确的模块,每个模块有自己的作用域和接口,避免全局污染,提高代码可维护性。 常见规范包括: CommonJS(Node.js环境,使用 require 和 module.exports) AMD(异步模块定义,适用于浏览器异步加载) ES Module(ESM)(现代标准,使用 import 和 export,支持静态分析) 组件化 是模块化的进一步细化,专注于 UI 层面,将界面拆分成独立且可复用的组件,封装逻辑、样式和结构。 组件通常包含状态管理、事件处理、生命周期管理等,方便组合和维护。 主流框架如 Vue、React、Angular 都鼓励基于组件开发。 二、项目中模块化和组件化的实践 1. 模块化管理 项目采用 ES Module 作为标准模块规范,利用 import 和 export 进行模块间依赖管理。 通过合理拆分功能模块(如工具库、接口服务、状态管理、业务逻辑)形成清晰的依赖关系,便于维护和测试。 使用构建工具(Webpack、Vite)支持模块打包和代码分割,提高加载效率。 配合 alias 和路径管理,保持模块引用简洁,提升开发体验。 2. 组件化设计 界面层面,拆分成粒度合适的可复用组件,满足单一职责原则。 采用状态提升、属性传递和事件回调机制实现组件间通信。 使用组件库(如 Element UI、Ant Design)或自研组件库提升开发效率。 结合样式模块化(CSS Modules、Scoped CSS、CSS-in-JS)实现样式隔离,防止样式冲突。 组件支持配置化和插槽机制,提高灵活性和扩展性。 3. 代码组织结构 按业务域或功能划分文件夹,模块和组件分层清晰,便于定位和扩展。 统一入口导出,方便模块聚合和复用。 编写完善的文档和规范,确保团队成员对模块和组件使用方式达成共识。 4. 优势与价值 提高代码复用率,减少重复开发和维护成本。 降低耦合度,提升系统可扩展性。 加快开发节奏,方便多人协作。 利用现代构建工具实现性能优化。 三、常见误区与注意点 模块划分过细或过粗 导致管理困难或代码臃肿,需根据项目复杂度合理拆分。 组件职责不明确,混合业务逻辑和表现层,影响复用和测试。 忽视样式隔离,导致样式污染和冲突。 组件间通信设计不合理,导致状态管理混乱。 忽略模块和组件的性能优化,如避免无意义的重新渲染和重复加载。 4. 项目中做过哪些性能优化方面的工作 题目要点 资源按需加载与代码拆分减少首屏加载时间 静态资源压缩、合并和 CDN 加速 图片优化与懒加载 减少 DOM 操作,合理使用虚拟 DOM JS 任务拆分,使用防抖节流和 Web Worker 接口合并、缓存和 HTTP/2 多路复用 持续性能监控与数据驱动优化 避免过度拆分和缓存策略失误 注重整体性能和用户设备多样性 参考答案 考察点 理解前端性能优化的核心目标与常见瓶颈 掌握多种性能优化手段及其适用场景 能结合具体项目场景,分析问题并提出有效优化策略 熟悉常用性能监控和评估工具,验证优化效果 参考答案 一、原理说明 前端性能优化的核心目标是提升页面加载速度、响应速度和交互流畅度,从而改善用户体验,降低用户流失。 性能瓶颈通常来源于资源加载慢、渲染阻塞、JavaScript 执行耗时、内存泄漏和网络请求频繁等。 现代性能优化涉及多个层面,包括网络层、资源层、渲染层和代码执行层。 性能优化不仅是技术问题,更涉及合理架构设计和业务合理拆分。 二、项目中的具体优化实践 1. 资源加载优化 采用代码拆分(Code Splitting)和按需加载,避免一次性加载大量无关代码,缩短首屏加载时间。 使用 CDN 分发静态资源,提升资源下载速度。 资源压缩和合并(如压缩 JS/CSS,合并小文件减少请求数量)。 图片优化(WebP 格式替代、图片懒加载、合理尺寸裁剪)。 利用浏览器缓存策略(Cache-Control、Service Worker)减少重复请求。 2. 渲染性能优化 减少 DOM 操作次数,合并多次修改,避免触发频繁回流和重绘。 使用虚拟 DOM 和虚拟列表技术优化大量数据渲染。 CSS 动画尽量使用 GPU 加速属性(如 transform、opacity)。 避免长任务阻塞主线程,合理拆分 JS 任务,防止界面卡顿。 3. JavaScript 执行优化 减少不必要的计算和事件绑定,防抖节流常用来优化频繁触发的事件。 使用 Web Worker 将计算密集型任务移至后台线程,避免主线程阻塞。 利用 Tree Shaking 去除未使用代码,减小包体积。 预编译和缓存机制提升运行效率。 4. 网络请求优化 接口合并,减少请求次数。 接口缓存,避免重复请求同一数据。 接口压缩与批量请求。 使用 HTTP/2 多路复用,提升请求并发性能。 5. 性能监控与持续优化 集成性能监控工具(如 Lighthouse、Chrome DevTools Performance、RUM 埋点等)。 通过埋点监控首屏时间、接口响应时间、动画帧率等关键指标。 根据监控数据持续跟踪性能瓶颈,迭代优化。 三、常见误区与注意点 只注重单一优化手段,忽视整体性能提升策略。 盲目过度拆分导致请求过多,反而影响性能。 缓存设置不合理,导致用户看到过期内容。 不关注性能监控数据,缺乏闭环改进。 忽视用户设备差异,优化方案不够适配低端设备。 5. 在移动端开发中,你们是如何处理不同设备的适配问题的 题目要点 了解并使用 viewport 设置布局基础 灵活组合 rem/vw/flex/media query 等单位和布局方案 使用 postcss 工具链统一适配流程 考虑高DPR设备图像清晰度适配 针对横屏、Pad 等极端设备考虑额外样式方案 注重兼容性测试,处理浏览器差异 参考答案 考察点 是否了解常见的移动端适配方案及原理 是否能结合业务场景选择合理的适配策略 是否关注兼容性、用户体验和性能平衡 是否能系统性总结适配技术手段的优缺点 参考答案 一、适配问题的来源 移动端设备种类繁多,存在如下适配挑战: ...

July 28, 2025

滴滴-社招-3年 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点: z-index、布局技巧、Flexbox、优化性能、react hooks、浏览器渲染过程、浏览器的缓存机制、浏览器的垃圾回收机制 本轮共 11 道题。答案默认折叠,便于先自行作答。 1. 讲一下可视化搭建平台中魔方组件的设计与实现难点 题目要点 略 参考答案 略 2. 如何解决多模块叠加时的z-index管理问题 题目要点 z-index 基于层叠上下文,简单数字不能保证全局一致性 建立统一 z-index 管理系统(如 Z_INDEX_MAP)是可维护的关键 模块内部创建局部 stacking context,避免全局冲突 动态模块如拖拽、浮层应使用自动 z-index 分配策略 避免滥用 z-index,建议结合 portal、绝对定位和容器设计实现可控叠加 参考答案 考察点 面试官想了解你在复杂 UI 组件系统中的图层管理策略 探查你对 z-index 的工作机制、层级上下文(stacking context)的理解 是否具备系统化组织多模块图层关系的经验,能避免冲突和错乱 参考答案 一、z-index 背后机制与问题本质 1. z-index 的作用机制 z-index 定义元素在“同一层叠上下文(stacking context)”中的前后顺序 层叠上下文由具有特定属性的元素(如position: relative/absolute/fixed + z-index)创建 每个层叠上下文是独立的,只影响自身子元素的层叠关系 2. 可视化搭建系统的典型挑战 多模块(如弹窗、悬浮面板、组件拖拽层、选中态)频繁叠加,若统一用裸 z-index 数字管理,非常容易: 维护混乱 层级冲突(某组件盖住了弹窗) 模块互相影响,难以解耦 二、系统化的 z-index 管理方案 1. 建立统一的层级管理规范(z-index Map) 在系统中定义一套统一的 z-index 枚举表,例如: export const Z_INDEX_MAP = { base: 0, component: 10, floatingPanel: 100, modal: 1000, tooltip: 2000, dragLayer: 3000, globalMask: 9999, }; 所有模块只能从该映射中引用 z-index,禁止硬编码数字,避免冲突 2. 模块隔离,建立明确的层叠上下文边界 使用 position: relative/absolute + z-index,每个模块在其容器内控制层级 避免所有元素在一个全局层叠上下文中争夺 z-index 3. 动态 z-index 分配机制(如拖拽时临时置顶) 为拖拽、临时弹出等模块动态分配最高层级,例如: let dynamicZIndex = Z_INDEX_MAP.dragLayer; function getNextZIndex() { return dynamicZIndex++; } 使多个拖拽元素在交互中可动态置顶,不影响整体秩序 4. 可视化调试工具辅助 引入 DevTool 插件或内嵌 z-index 层级可视化辅助组件,用不同颜色或 label 显示当前模块层级,便于调试 三、z-index 冲突的实际案例与应对策略 问题:浮层 A(z-index: 200)被浮层 B(z-index: 100)遮挡 ...

July 28, 2025

美团-本地商业-校招 · 第 1 轮 · 一面

← 已是第一轮 · 返回本次面经 · 已是最后一轮 → 本轮要点: 本次面试主要聚焦于前端中高级技术深度和实际项目经验的考察。重点涵盖了前端工程化与性能优化(如Webpack优化、首屏加载、HTTP缓存、CDN等)、JavaScript运行机制与高级特性(事件循环、宏微任务、Vue 2/3响应式原理、数组操作等),以及Web安全与系统设计(如XSS防御、HTTPS原理、持久化登录系统设计)。此外,还深入探讨了跨平台开发(Uni-App/Taro原理及选型)和微前端架构的关键考量点。面试官旨在通过这些题目,全面评估候选人在复杂业务场景下的技术选型、问题分析与解决能力,以及对前端底层原理和安全实践的掌握程度。 本轮共 18 道题。答案默认折叠,便于先自行作答。 1. 简单介绍你的技术背景和项目经验。 题目要点 说明:该题是典型的主观型问题,没有唯一的标准答案。 考察目标:面试官主要考察答题者的自我认知、表达能力、技术广度与深度、以及对自身项目经验的复盘和总结能力。 答题结构建议:建议围绕"我是谁"、“我会什么”、“我做过什么"三个核心点展开,并结合具体项目经验突出个人优势和亮点。 参考答案 很高兴能有机会介绍一下我的技术背景和项目经验。我叫[你的名字],毕业于[你的学校和专业],在校期间我对前端技术产生了浓厚兴趣,系统学习了HTML、CSS和JavaScript基础。毕业后,我加入了[你的公司名称],至今有[X]年的前端开发经验。 在职业生涯中,我主要专注于[你的主要技术方向,如Web应用开发、跨平台开发、前端性能优化等]。我熟练掌握Vue.js(或React)框架及其生态系统,包括状态管理(Vuex/Pinia或Redux/MobX)、路由管理(Vue Router或React Router)和构建工具(Webpack/Vite)。同时,我对Node.js也有一定了解,能够进行一些基础的后端协作或独立开发前端工具。 在[公司名称],我参与了[项目名称,可以是核心项目或最有代表性的项目]的开发工作。这个项目是一个[简单描述项目类型,如中后台管理系统、电商平台、数据可视化平台]。我在其中主要负责[具体职责,如负责XX模块的开发、实现YY功能、进行ZZ性能优化]等。 举个例子,在[具体项目或模块]中,我们遇到了[一个具体的技术挑战,如首屏加载慢、组件复用性差、跨端适配问题]。为了解决这个问题,我当时[你采取的具体措施和方案,如引入了Webpack的SplitChunksPlugin进行代码分割、设计了通用组件库并结合Slots/Props实现高复用、使用了Uni-App的条件编译处理平台差异]。最终,[达到的效果和数据,如首屏加载时间从5s优化到1s、组件复用率提升了30%、成功支持了微信和支付宝小程序]。这次经历让我深刻理解了[你的收获和思考,如前端性能优化的重要性、组件化设计的价值、跨平台开发的权衡点]。 我不仅关注代码实现,也注重项目的整体质量和用户体验,善于发现问题并积极寻求解决方案。我也乐于学习和探索新技术,保持对前端前沿的关注。谢谢。 2. 项目中遇到的性能优化挑战是什么?具体如何解决的? 题目要点 说明:该题是典型的主观型问题,没有唯一的标准答案。 考察目标:面试官主要考察答题者在实际项目中发现、分析和解决性能问题的能力,包括对性能指标的理解、优化策略的掌握以及实际操作经验和复盘能力。 答题结构建议:建议按照"背景/挑战 -> 如何分析 -> 具体优化措施 -> 优化效果与思考"的结构展开,突出解决问题的思路和细节。 参考答案 在[你的项目名称,如电商H5页面/管理后台]项目中,我们曾面临一个比较明显的性能挑战,主要体现在**[具体场景,如首页首屏加载时间过长,达到了5秒以上;或者某个复杂列表页在滚动时出现卡顿]**。这严重影响了用户体验,尤其是在移动网络环境下,导致用户跳出率较高。 为了定位问题,我们首先借助了Chrome DevTools (Lighthouse、Performance面板) 进行分析。通过对加载瀑布流、CPU使用率和内存占用进行观察,我们发现主要瓶颈在于: [具体瓶颈1,如:主JS包体积过大,导致解析和执行时间长]。 [具体瓶颈2,如:图片资源未优化,大量高清大图直接加载,占用带宽]。 [具体瓶颈3,如:复杂组件渲染耗时,导致回流重绘频繁,引起卡顿]。 针对这些问题,我们采取了以下具体的优化措施: 代码分割与按需加载:针对主JS包体积过大的问题,我们引入了Webpack的SplitChunksPlugin,结合路由懒加载(或组件懒加载)。将不同路由页面的代码和不常用的第三方库进行拆分,例如:component: () => import('./views/OrderDetail.vue')。这样,用户首次访问时只需要加载当前页面的核心代码,显著减少了首屏JS的下载和解析量。 图片优化:对于图片资源,我们采取了多项措施: 图片压缩:对项目中的所有图片资源进行了统一的无损压缩处理,并推荐设计师使用WebP格式的图片。 懒加载:对于首屏之外的图片,我们实现了图片懒加载,只有当图片进入用户视口时才进行加载,避免了不必要的资源请求。 CDN加速:将静态图片资源部署到CDN,利用CDN的边缘节点分发,减少了网络延迟。 组件渲染优化:针对复杂组件的卡顿问题,我们做了以下工作: 虚拟列表/长列表优化:对于数据量大的列表页,我们引入了虚拟列表技术,只渲染可视区域内的DOM节点,减少了DOM数量,大幅提升了滚动流畅度。 避免不必要的渲染:在Vue/React组件中,合理使用v-if/v-show、keep-alive、React.memo/PureComponent等,结合shouldComponentUpdate(React)或计算属性/监听器(Vue)来避免组件的重复渲染。 减少回流重绘:优化了DOM操作,减少了频繁读写布局属性,例如将多个样式修改合并为一次操作,或者使用CSS的transform代替left/top进行动画。 经过这些优化,我们的**[项目名称]首页首屏加载时间成功从5秒降低到了2秒以内**(或更具体的数据),用户反馈页面的流畅度也有了显著提升,这对业务转化率带来了积极影响。这次优化经历让我对前端性能优化有了更系统和深入的理解,也认识到性能优化是一个持续的过程,需要贯穿于项目的整个生命周期中。我们会定期进行性能监控和分析,确保用户体验。谢谢。 3. 如果让你主导一个跨平台电商项目,如何选择技术栈? 题目要点 技术栈选型能力:面试官想考察候选人是否具备从宏观层面规划项目技术栈的能力,包括对主流前端框架、跨平台技术以及相关生态的了解。 对跨平台开发的深入理解:考察候选人是否清楚跨平台开发的核心痛点(如性能、体验、API兼容性),并能提出针对性的解决方案。 系统设计和权衡能力:评估候选人能否在性能、开发效率、维护成本、团队能力、业务需求等多个维度之间进行权衡和取舍。 对电商领域特点的认知:了解候选人是否对电商项目特有的需求(如商品展示、购物车、支付、大促活动)有前瞻性思考,并能在技术选型中体现。 参考答案 1.1 原理说明 跨平台电商项目通常是指一个产品需要同时在Web(H5)、微信小程序、支付宝小程序、App(iOS/Android)等多个终端运行,并且希望尽可能复用代码,降低开发和维护成本。技术栈选择是一个复杂的决策过程,需要综合考虑项目的业务需求、性能要求、开发效率、团队技术栈、维护成本以及社区生态等多方面因素。 ...

July 28, 2025