滴滴-社招-3年 on Last Stand

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

Mon, 28 Jul 2025 05:39:29 +0000

← 第 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 等将字符串转换为数字

参考答案

考察点

考察对字符串操作的熟练程度和大数模拟乘法逻辑实现能力
掌握多位数相乘的数学原理，模拟竖式乘法
考察对数组操作、进位处理、边界情况的处理能力

参考答案

一、原理说明

由于不能直接将字符串转为整数，需模拟“逐位乘法 + 进位处理”，如同手动计算多位乘法（竖式）一样：

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

Mon, 28 Jul 2025 03:27:35 +0000

← 第 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 等极端设备考虑额外样式方案
注重兼容性测试，处理浏览器差异

参考答案

考察点

是否了解常见的移动端适配方案及原理
是否能结合业务场景选择合理的适配策略
是否关注兼容性、用户体验和性能平衡
是否能系统性总结适配技术手段的优缺点

参考答案

一、适配问题的来源

移动端设备种类繁多，存在如下适配挑战：

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

Mon, 28 Jul 2025 03:15:10 +0000

← 已是第一轮 · 返回本次面经 · 第 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）遮挡