大厂面经 on Last Stand

小红书-社招-5年 · 第 1 轮 · 技术面试

Sun, 01 Feb 2026 14:42:25 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮概述： 该轮面试主要考察了前端基础知识，包括BFC、浮动元素、作用域、异步编程、Webpack、Vue等多方面的内容。题目涉及理论知识和代码实现。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. BFC讲一下

题库原题：什么是BFC？

题目要点

BFC（Block Formatting Context） 是 CSS 中一个重要的布局概念，它描述了一个块级元素的内部布局和外部布局之间的关系。BFC 主要用于处理元素的布局、浮动、边距合并等问题。

BFC 的作用

阻止外边距折叠：
- 外边距折叠：当两个块级元素垂直相邻时，它们的外边距会合并，形成一个更大的外边距。
- BFC：在 BFC 内部的元素的外边距不会影响到外部 BFC 的元素，避免了外边距折叠的问题。
包含浮动元素：
- 浮动元素：通常会从其包含块中溢出。
- BFC：具有 BFC 的元素可以包含其内部的浮动元素，确保其高度包括浮动元素的高度。
控制元素的布局：
- BFC：在 BFC 内部，元素的布局（如浮动、定位）会受到影响和控制，避免与外部元素发生冲突。
防止元素重叠：
- BFC：能够隔离不同的 BFC 区域，避免元素之间的重叠或干扰。

如何触发 BFC

BFC 会在以下情况中被触发：

块级格式化上下文的创建：
- 元素的 display 属性值为 block 或 inline-block。
- 元素的 position 属性值为 absolute 或 fixed。
- 元素的 float 属性值为 left 或 right。
- 元素的 overflow 属性值为 hidden、scroll 或 auto。
其他常见触发情况：

小红书-社招-3年 · 第 1 轮 · 技术面试

Sun, 01 Feb 2026 14:42:08 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮概述： 这一轮主要考察了前端基础知识，包括JavaScript的基本类型和引用类型的存储、闭包的内存泄漏、垃圾回收机制、事件循环、React框架的理解等。

本轮要点： Promise、CDN原理、Class、数据类型、浏览器渲染过程

本轮共 24 道题。答案默认折叠，便于先自行作答。

1. js中基本类型和引用类型的存储有什么不一样

题库原题：引用类型有哪些，有什么特点

题目要点

在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。

参考答案

在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。

常见的引用类型包括：

对象（Object）：对象是JavaScript中最基本的引用类型，它可以用来存储键值对，也可以通过原型链实现继承。
数组（Array）：数组是一种有序的集合，可以存储任意类型的数据，它的长度是动态的，可以随时添加或删除元素。
函数（Function）：函数是一种可执行的对象，可以封装一段可重复使用的代码。函数可以接收参数并返回值。

引用类型的特点包括：

引用类型的值是可变的：引用类型的值是存储在堆内存中的，当我们修改一个引用类型的值时，实际上是修改了它在内存中的地址，而不是修改了该值本身。
引用类型值的比较是引用的比较：当使用"==“或”===“运算符比较两个引用类型的值时，它们会进行引用的比较，即判断它们是否指向同一个内存地址。只有当两个引用指向同一个对象时，它们才被认为是相等的。
引用类型可以有自己的属性和方法：引用类型的值可以拥有自己的属性和方法。例如，数组对象有长度属性和一些常用的数组方法（例如push、pop、sort等），而函数对象有call、apply等方法。
引用类型可以通过原型链实现继承：通过原型链，引用类型可以继承父类型的属性和方法。

基本类型（如数字、字符串、布尔值）在JavaScript中是按值传递的，而引用类型是按引用传递的。

这意味着当将一个引用类型的值赋给另一个变量时，实际上是将内存地址复制给了新的变量，两个变量引用的是同一对象。而基本类型的值赋给另一个变量时，会创建一个新的值并赋给新的变量。

2. 闭包的内存泄漏应该如何监控和解决？

题库原题：如何检查Javascript中的内存泄漏？

题目要点

Chrome 浏览器查看内存占用，按照以下步骤操作。

参考答案

浏览器

Chrome 浏览器查看内存占用，按照以下步骤操作。

1、打开开发者工具，选择 Timeline 面板
2、在顶部的Capture字段里面勾选 Memory
3、点击左上角的录制按钮。
4、在页面上进行各种操作，模拟用户的使用情况。
5、一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。

如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。

反之，就是内存泄漏了。

命令行

命令行可以使用 Node 提供的process.memoryUsage方法。

console.log(process.memoryUsage());
// { rss: 27709440,
// heapTotal: 5685248,
// heapUsed: 3449392,
// external: 8772 }

process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。

小红书-社招-1年 · 第 1 轮 · 技术面试

Sun, 01 Feb 2026 14:40:35 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮概述： 这一轮主要考察了前端技术栈的深度和广度，包括CSS框架、响应式设计、渲染优化、Vue框架的高级特性、HTTP协议、浏览器渲染机制等方面的知识。

本轮共 22 道题。答案默认折叠，便于先自行作答。

1. 项目中为何选择 Tailwind CSS ？

题目要点

灵活性, 可维护性, 现代前端工具链

参考答案

Tailwind CSS 是一个高度可定制的低级 CSS 框架，它提供了大量的原子类，可以快速构建一致且响应式的布局。选择 Tailwind CSS 的原因可能包括其灵活性、可维护性以及与现代前端工具链的良好集成。

2. Tailwind 是怎么解决样式冲突的？

题库原题：Tailwind 是怎么解决样式冲突的？

题目要点

Tailwind 通过原子化 utility 类、统一选择器权重、避免层级嵌套、构建期生成样式以及可预测的覆盖规则，从架构层面降低样式冲突的发生概率。它不是依赖命名规范解决冲突，而是通过设计约束和单一职责类模型，使样式天然解耦，从而让冲突可控且可预测。

参考答案

这个问题如果只回答“因为类名不会冲突”是远远不够的。

Tailwind 解决样式冲突，本质上是通过 设计约束 + 原子化模型 + 构建期生成策略，从源头消除冲突的产生条件，而不是事后避免覆盖。

下面从机制层面拆解。

一、传统 CSS 为什么容易冲突

传统样式冲突来自三个方面：

1. 选择器冲突

.btn { color: red; }
.button { color: blue; }

不同模块命名不规范会互相覆盖。

2. 层级嵌套带来的权重问题

.page .btn { ... }

权重升级，导致后续难以覆盖。

3. 样式全局污染

CSS 默认是全局作用域，没有隔离边界。

360-实习 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:54:14 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这一轮主要考察了候选人的自我介绍、职业规划、项目经验、前端技术细节以及算法问题。面试氛围较为全面，涵盖了从基础到高级的多个方面。

面试时间： 45分钟

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

个人背景, 工作经验, 技术栈, 项目经验, 未来展望

参考答案

自我介绍应包括个人背景、工作经验、技术栈、项目经验和对未来的展望。重点在于展示自己的专业能力和对前端技术的热情。

2. 你的职业规划与前端技术方向的关系？

题目要点

技术趋势, 个人兴趣, 学习和实践, 技能提升, 未来发展

参考答案

回答时可以结合当前的技术趋势和个人兴趣，说明如何通过不断学习和实践来提升自己在前端领域的技能。同时，可以提到对未来技术发展的看法和如何适应这些变化。

3. 讲一个你参与过的项目

题库原题：你参与过哪些前端基建方面的建设？

题目要点

前端基建涵盖了从项目架构、构建工具配置到开发环境、自动化流程和安全等多个方面。良好的前端基建可以提升开发效率、代码质量和系统性能，为项目的长期维护和扩展打下坚实的基础。

参考答案

可以从以下方面进行回答：

1. 项目架构

目录结构：定义项目文件和目录的组织结构，确保项目的可维护性和可扩展性。
代码规范：统一代码风格和规范，使用 ESLint、Prettier 等工具进行代码检查和格式化。
模块化：采用模块化设计，将代码拆分为独立的模块，提高可重用性和可维护性。
脚手架：自动生成项目的基础结构，包括目录结构、配置文件、示例代码等。

2. 构建工具和配置

构建工具：使用工具如 Webpack、Vite、Rollup 等进行项目的构建和打包。
配置管理：配置构建工具以支持各种功能，如代码分割、热重载、环境变量等。
优化：配置代码压缩、缓存策略、Tree Shaking 等，提升构建产物的性能和效率。

3. 开发环境

开发服务器：设置本地开发服务器，支持热重载和调试功能。
环境配置：管理开发、测试、生产环境的配置和变量。

4. 包管理

依赖管理：使用 npm、Yarn 或 pnpm 等工具管理项目依赖，确保依赖版本一致性。
发布管理：管理和发布自定义的 npm 包或组件库。

5. 自动化流程

CI/CD：配置持续集成（CI）和持续部署（CD）流程，自动化构建、测试和部署。
测试：集成单元测试、集成测试和端到端测试工具，如 Jest、Cypress 等，确保代码质量。

6. 代码质量

静态分析：使用 ESLint、TSLint 等工具进行代码静态检查。
测试覆盖率：监控测试覆盖率，确保关键代码路径被充分测试。

7. 文档

代码文档：编写和维护项目文档，包括 API 文档、开发指南和使用说明。
自动化文档生成：使用工具如 Storybook、JSDoc 等生成组件库和 API 文档。

8. 组件库

设计系统：构建和维护一套一致的设计系统和组件库，提高开发效率和界面一致性。
共享组件：创建和管理共享组件，促进代码复用。

9. 性能优化

前端性能：优化页面加载速度、响应时间和渲染性能。
网络请求：管理和优化网络请求策略，减少请求次数和数据传输量。

10. 安全

安全最佳实践：遵循前端安全最佳实践，如防范 XSS 和 CSRF 攻击。
敏感数据保护：确保敏感数据不被暴露或滥用。

4. 项目中遇到的印象最深的难题是什么？如何解决的？

题目要点

难题背景, 影响, 解决方案, 最终结果

百度-百家号-实习 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:19:52 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮主要考察前端基础知识、JavaScript高级特性、HTTP协议、Vue与React框架对比、Git操作以及算法实现能力。问题涵盖理论理解与实际应用，氛围较为专业。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 如何判断一个变量是数组？

题库原题：判断数组的方式有哪些？

题目要点

推荐方法：使用 Array.isArray()，这是最简单、最可靠的方式来检查一个值是否为数组。
其他方法：instanceof 和 Object.prototype.toString.call() 也很有效，但有一些特定的局限性。constructor 和 isPrototypeOf() 方法不如 Array.isArray() 可靠，且在某些情况下可能会出现问题。

参考答案

判断一个值是否为数组的方式有多种：

1. `Array.isArray()` 方法

描述：这是 ES5 引入的标准方法，推荐用于检查一个值是否为数组。
语法：Array.isArray(value)

示例：

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false

2. `instanceof` 操作符

描述：使用 instanceof 操作符来判断对象是否是 Array 的实例。
语法：value instanceof Array

示例：

console.log([1, 2, 3] instanceof Array); // true
console.log('hello' instanceof Array); // false

3. `Object.prototype.toString.call()` 方法

描述：使用 Object.prototype.toString.call() 可以准确判断一个对象的类型，包括数组。它返回 [object Array] 对于数组，其他类型则返回不同的结果。
语法：Object.prototype.toString.call(value)

示例：

console.log(Object.prototype.toString.call([1, 2, 3])); // [object Array]
console.log(Object.prototype.toString.call('hello')); // [object String]

4. `constructor` 属性

描述：检查 constructor 属性是否为 Array。这种方法不如 Array.isArray() 可靠，因为 constructor 可以被改变。
语法：value.constructor === Array

示例：

console.log([1, 2, 3].constructor === Array); // true
console.log('hello'.constructor === Array); // false

5. `Array.prototype.isPrototypeOf()` 方法

描述：检查数组的 prototype 是否在目标对象的 prototype 链上。这种方法也可以用来判断一个对象是否为数组。
语法：Array.prototype.isPrototypeOf(value)

示例：

console.log(Array.prototype.isPrototypeOf([1, 2, 3])); // true
console.log(Array.prototype.isPrototypeOf('hello')); // false

6. 使用 `constructor` 属性和原型链

描述：结合 constructor 属性和原型链检查。这个方法有一定的局限性，不推荐使用。

示例：

function isArray(value) {
 return value && typeof value === 'object' && value.constructor === Array;
}

console.log(isArray([1, 2, 3])); // true
console.log(isArray('hello')); // false

2. 讲一下闭包及其优缺点。

题目要点

函数嵌套, 词法作用域, 内存管理

百度-搜索-春招 · 第 1 轮 · 技术面试

Sat, 31 Jan 2026 09:19:33 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮主要考察前端开发相关知识，包括动画实现、性能优化、React优化、Web Accessibility、计时器处理、WebSocket、缓存策略、国际化、兼容性问题等。题目以主观题为主，注重对核心原理和实际应用场景的理解。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大

题目要点

CSS transition, 动画性能优化, 硬件加速, 事件监听

参考答案

在实现此类动画时，可以使用CSS的transition属性或JavaScript的requestAnimationFrame方法。重点在于控制动画的流畅性和性能。可以通过设置合适的过渡时间（transition-duration）和使用硬件加速（如transform: scale()）来提升性能。此外，注意避免不必要的重排和重绘，确保动画的平滑性。

2. 如何避免动画过程中的卡顿？

题库原题：在解决动画卡顿问题时，会引导硬件加速，那么硬件加速的原理是什么？

题目要点

硬件加速是指利用 GPU（图形处理单元）来执行图形和动画相关的计算任务，以减轻 CPU（中央处理单元）的负担。GPU 专为处理图形和图像的高吞吐量操作而设计，因此在执行动画和复杂图形渲染时，硬件加速可以提供更流畅的体验。

原理解析

GPU vs CPU：
- GPU 拥有更多的核心，适合并行处理大量计算任务，而 CPU 核心较少，更适合串行处理复杂逻辑。
图形渲染：
- GPU 优化了图形渲染流程，包括顶点处理、像素着色等，这些是动画和图形显示的基础。
减少重绘和回流：
- 通过硬件加速，可以减少浏览器的重绘（repaint）和回流（reflow）次数，这些操作通常由 DOM 变更触发，非常消耗性能。
合成层（Compositing Layer）：
- 浏览器使用合成层来合并多个层的图形，GPU 可以快速地在这些层上进行变换和动画。
CSS 属性触发：
- 某些 CSS 属性，如 transform 的 3D 变换（translate3d、scale3d 等）和 opacity 动画，可以触发硬件加速。
浏览器优化：
- 浏览器会根据性能和资源情况，自动决定是否使用硬件加速。

考察重点

理解：硬件加速的基本概念和 GPU 在图形渲染中的作用。
应用：知道哪些 CSS 属性可以触发硬件加速，以及如何利用它们来优化动画性能。

参考答案

面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。

百度-商业化-秋招 · 第 1 轮 · 一面

Fri, 17 Oct 2025 08:26:28 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这场面试主要围绕前端项目的实际工程能力展开，重点考察了候选人对动态路由、权限控制和状态管理的理解与实践。同时涉及网络请求优化、缓存机制及组件复用等中高级工程问题，体现出对项目可维护性和性能的关注。面试还关注了候选人对 TypeScript 应用、学习方法和职业规划的思考，考察其成长潜力与技术视野。

本轮要点： 跨域相关

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 如何在前端项目中实现动态路由？

题库原题：如何在前端项目中实现动态路由？

题目要点

动态路由的核心是将路由配置从静态定义转为运行时生成或挂载。常见做法包括“前端维护完整路由表后过滤”以及“后端下发路由配置”。

具体实现依赖框架提供的 API（如 addRoute、useRoutes），同时需要兼顾权限控制、懒加载与导航组件的解耦，才能在保证安全性的同时保持可扩展性和良好的用户体验。

参考答案

在前端项目中实现动态路由，本质上是根据用户权限、接口返回的数据或者运行时条件，动态地生成或加载路由配置，从而决定页面的可访问性和导航结构。

以 React Router 和 Vue Router 为例，核心思路有一些共通点：在应用启动时，会有一个静态的基础路由表，用来保证最基本的页面可以正常访问（例如登录页、404 页、Layout 容器等）。而真正需要按用户角色、接口数据控制的路由，则通过接口请求或预置配置动态挂载进路由系统。

常见的实现方式有两类：

一种是前端自行维护完整的路由表，用户登录后，后端返回权限信息（角色、菜单、可访问模块 ID 等），前端在已有的路由表中做过滤，只保留当前用户有权限的部分，再动态挂载到路由系统。这种方式对前端掌控力更强，体验流畅，但需要在前端同步维护一份路由和权限的映射关系。

另一种是由后端直接下发路由配置（通常带有 path、component 标识、子路由结构等），前端拿到配置后再通过组件映射表动态生成路由。这种方式能减轻前端维护压力，但会带来接口设计和前后端耦合的问题。

在技术层面，React Router v6 提供了 useRoutes 可以直接基于对象动态生成路由，Vue Router 也支持 router.addRoute 在运行时动态添加路由。对于懒加载组件，还需要结合 import() 或 defineAsyncComponent（Vue）来实现，避免一次性加载所有页面。

此外，动态路由不仅仅是技术实现，还涉及安全性和用户体验。例如：

在前端动态路由实现时，不能只依赖前端的路由控制，还需要后端接口做权限校验，避免用户绕过前端访问受限页面。
路由结构最好和菜单、面包屑等导航组件解耦，通过统一的数据结构管理，保证后续扩展的灵活性。
在大规模项目中，动态路由还常与微前端、模块化加载结合，按需挂载子应用或子模块。

2. Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题库原题：Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题目要点

Vue3 的 addRoute 属于“增量挂载”，可以在运行时动态向现有路由表中追加新配置；React Router 的 useRoutes 则是基于配置对象动态生成，强调整体渲染而不是单点挂载。动态路由刷新后失效的根本原因是路由配置只存在于内存中，需要在应用初始化时通过本地存储或接口请求恢复路由数据，才能保证页面刷新后仍能正确访问。

腾讯-3年社招-前端面试 · 第 1 轮 · 一面

Sun, 07 Sep 2025 02:45:19 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

使用节流（throttle）限制事件触发频率，通常设置为 16ms 以保持 60fps 的流畅度。采用 requestAnimationFrame 优化动画渲染，确保在浏览器重绘时机执行位置更新。实现事件委托减少事件监听器数量，在容器元素上统一处理拖拽事件。对于复杂计算，使用防抖（debounce）延迟执行，避免在拖拽过程中进行不必要的重计算。

5. 性能优化关注的指标有哪些（如FCP、TTI）？你用了哪些具体手段？

题库原题：前端性能优化指标有哪些？怎么进行性能检测？

题目要点

前端性能评估主要围绕三个维度展开：

页面加载速度、交互响应能力以及页面稳定性。常见指标包括 FP、FCP、LCP 等加载指标，FID 和 INP 等交互指标，以及 CLS 布局稳定性指标。
性能检测通常分为两类方式：开发阶段使用 Lighthouse、Chrome DevTools、WebPageTest 等工具进行实验室分析；
线上环境通过 Performance API 或 web-vitals 采集真实用户性能数据，并结合监控平台进行统计与优化。

参考答案

前端性能通常不会只看单一指标，而是从用户感知加载速度、交互响应速度以及页面稳定性三个维度进行评估。当前行业中比较主流的一套指标体系来自 Google 提出的 Web Vitals，并结合传统的加载性能指标共同评估。

腾讯-3年社招-前端面试 · 第 1 轮 · 二面

Sun, 07 Sep 2025 02:45:19 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

采用响应式设计和移动优先策略，使用 rem/vw 单位实现弹性布局。建立设备适配规则库，根据屏幕尺寸和设备类型自动调整组件样式。实现触摸手势支持，优化移动端的交互体验。同时建立性能优化机制，针对移动设备的性能特点进行资源加载和渲染优化，确保在低性能设备上也能流畅运行。

腾讯-2年社招-前端面试 · 第 1 轮 · 一面

Sun, 07 Sep 2025 02:17:29 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

Sun, 07 Sep 2025 02:17:29 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

建立了完整的性能指标体系：Core Web Vitals 作为核心指标，包括 LCP（2.5s 以内）、FID（100ms 以内）、CLS（0.1 以内）；业务指标包括首屏加载时间、页面完全加载时间、接口响应时间等。通过 RUM（真实用户监控）收集线上数据，结合 Lighthouse 进行定期检测。制定了不同页面类型的性能基准，如首页 LCP 控制在 2s 内，列表页控制在 2.5s 内。

5. WebSocket 协议原理

题库原题：说下 websocket 的连接原理

腾讯-1年社招-前端面试 · 第 1 轮 · 二面

Thu, 04 Sep 2025 14:50:28 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

Thu, 04 Sep 2025 14:50:27 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 讲一下项目的难点和亮点

题目要点

突出解决问题的能力，说明遇到过的复杂问题和优化方案，亮点要体现价值和可扩展性。

参考答案

在大型前端项目中，常见难点在于性能优化和复杂业务的抽象。比如数据量大时页面渲染和交互卡顿，需要通过虚拟列表、懒加载、分片渲染等方式解决；跨端适配和复杂状态管理也是典型难点。亮点可以体现在工程化和架构设计上，例如通过模块化拆分、微前端架构提高可维护性，或通过自动化工具链提升研发效率。

2. 项目的规范是如何制定的，如何执行的

题目要点

强调自动化工具与制度双管齐下，执行靠工具、评审和 CI 流程。

参考答案

前端规范一般从编码规范、组件封装规范、目录结构、Git 提交规范等方面制定。执行时可以依赖工具保障，比如 ESLint + Prettier 自动化格式化，Husky + lint-staged 在提交时校验，CI/CD 流程中增加检测。对组件层面，约定统一的 API 风格和文档，保证多人协作一致性。

3. 说说vue中的diff算法

题库原题：说说vue中的diff算法

题目要点

diff算法是一种高效的比较算法，主要用于比较虚拟DOM节点，以确定如何更新真实DOM。它具有两个特点：只会在同层级进行比较，不会跨层级比较；在比较的过程中，循环从两边向中间收拢。

在Vue中，diff算法用于比较新旧VNode节点，以决定如何更新真实DOM。

这个过程分为以下几个步骤：

比较新旧VNode节点：如果新旧节点相同，则不做任何操作；如果新旧节点都不存在子节点，则直接结束比较；如果新旧节点都有子节点，则进入updateChildren函数比较子节点。
更新子节点：在updateChildren函数中，设置新旧VNode的头尾指针，然后从两边向中间比较。如果新旧头尾指针相同，则直接patchVnode；如果新旧头尾指针不同，则根据情况调用patchVnode、createElm创建新节点，或者从哈希表寻找key一致的旧VNode节点再进行分情况操作。
patchVnode方法：如果新旧节点都有文本节点且不相等，则设置真实dom的文本节点为新节点的文本节点；如果旧节点有子节点而新节点没有，则删除旧节点的子节点；如果旧节点没有子节点而新节点有，则将新节点的子节点真实化后添加到旧节点；如果两者都有子节点，则进入updateChildren函数比较子节点。

通过diff算法，Vue能够高效地比较新旧VNode节点，以决定如何更新真实DOM，从而提高页面渲染的性能。

参考答案

一、是什么

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较

diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

二、比较方式

diff整体策略为：深度优先，同层比较

比较只会在同层级进行, 不会跨层级比较

比较的过程中，循环从两边向中间收拢

字节-技术中台-校招 · 第 1 轮 · 一面

Tue, 02 Sep 2025 07:35:12 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮要点： 本次面试主要考察校招生的前端基础知识、框架理解（Vue和React）、TypeScript应用、手写代码能力以及解决实际问题的能力。面试官重点关注以下几个方面：

前端框架深度理解与实践：不仅要求掌握Vue和React的基础知识，更强调对框架设计原理（如Vue的响应式、虚拟DOM）的理解，以及在实际项目中的应用能力（如Vuex到Pinia的迁移，以及在React中模拟Vue特性的思路）。
JavaScript 核心与异步编程：对Object.defineProperty的数据劫持原理、Promise的深入理解及其各种组合与错误处理方式（Promise.all、Promise.allSettled），以及async/await与Promise的关系是考察重点。手写算法题（数组扁平化、深拷贝）考验基础编码功底。
TypeScript 实际应用：考察对TypeScript的熟练程度，包括基本类型、高级类型（如索引签名定义动态属性）的运用，以及如何在项目中利用TypeScript提升代码质量。
工程化与性能优化：Monorepo 多包依赖管理及冲突解决是工程实践的体现。图片懒加载的实现方式（尤其是Intersection Observer API的应用）及其阈值优化，体现了对前端性能优化的关注和实践经验。

整体而言，面试不仅考察"是什么"，更侧重"为什么"和"如何做"，需要候选人能够结合实际项目经验进行深入分析和解答。

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 你刚才提到了一些项目经历，讲一个你觉的最有成就感的？

题目要点

这道题是典型的主观题，面试官并不期待一个"唯一标准答案"。
主要考察的是答题者的表达能力、系统性思考问题的方式、对项目及技术的理解深度以及从项目中复盘和学习的能力。
答题结构建议：简述项目背景与挑战 → 描述你的解决方案及遇到的困难 → 总结项目成果与个人成长。

参考答案

在过去的项目经历中，让我最有成就感的是负责公司内部一个复杂的用户权限管理系统重构。这个系统当时面临着用户反馈权限配置混乱、性能瓶颈突出、以及新功能迭代困难等问题。

当时的核心挑战在于，我们有上百种细粒度的权限点，并且需要支持多维度、动态的权限组合，这在旧系统中已经形成了一个巨大的权限矩阵，任何改动都牵一发而动全身。我首先主导了权限模型的梳理和抽象，将权限点进行了归类和分级，并引入了基于角色的访问控制（RBAC）模型，同时考虑了自定义策略的扩展性。技术选型上，我们从传统的后端硬编码权限逻辑，逐步迁移到了前后端分离、统一鉴权服务的方式，并通过引入缓存机制优化了权限查询性能。

在实现过程中，最大的难点是如何在不影响现有业务的前提下，平滑地进行新旧权限系统的切换。为此，我设计了一套灰度发布方案，通过用户白名单和功能开关，逐步验证新系统的稳定性和准确性。在这个过程中，我们也遇到了一些意想不到的数据同步和兼容性问题，例如在特定场景下，新旧权限解析不一致导致的用户访问异常。我积极与后端团队、产品经理沟通，快速定位问题，并及时调整了数据同步策略和回滚机制，确保了业务的连续性。

最终，重构后的权限系统不仅将权限配置的效率提升了30%，还将核心鉴权接口的响应时间从原来的数百毫秒优化到了几十毫秒，极大地提升了系统的性能和稳定性。更重要的是，它为后续的新业务快速上线提供了坚实的基础，权限迭代周期缩短了50%以上。通过这个项目，我不仅深化了对权限系统设计的理解，也锻炼了我在复杂项目中进行技术选型、架构设计、风险管理和跨团队协作的能力。这次经历让我深切体会到，解决核心痛点并为业务带来实际价值，才是技术工作的最大成就感。

2. 项目里 Monorepo 管理多包依赖怎么实现的；

题目要点

Monorepo 概念：理解 Monorepo 的基本思想和优势。
多包依赖管理工具：了解 Lerna、Yarn Workspaces 或 pnpm Workspaces 等工具。
实现方式：掌握如何配置和使用这些工具来管理多包依赖，包括安装、发布、运行脚本等。
软链接/硬链接：理解这些工具如何通过符号链接解决依赖共享和版本管理问题。

参考答案

1.1 原理说明

Monorepo 是一种代码仓库管理策略，它将多个项目的代码存储在同一个版本控制仓库中，而不是为每个项目创建独立的仓库。这种方式的出现是为了解决多项目开发中代码共享、依赖管理、版本控制和协作效率等问题。它与传统的 Multirepo（多仓库）模式相对。

其核心原理在于通过特定的工具（如 Lerna、Yarn Workspaces 或 pnpm Workspaces）来管理仓库内的多个子包（package），实现：

统一的依赖管理：所有包的依赖都集中在一个地方（通常是根目录的 package.json 或各自的 package.json 结合工具配置），避免了重复安装和版本不一致的问题。工具会通过软链接或硬链接的方式将依赖安装到各个子包的 node_modules 中，实现依赖的共享和复用。
统一的构建、测试、发布流程：可以配置统一的脚本来执行所有或部分包的构建、测试和发布流程，简化 CI/CD。
代码共享与重用：各个子包可以直接相互引用，无需发布到 npm 等外部仓库，方便代码共享和模块化开发。

1.2 核心用法 + 示例代码

以 Yarn Workspaces 为例，它作为 Yarn 包管理器的内置功能，提供了一种轻量级的 Monorepo 解决方案。

字节跳动-商业化-校招 · 第 1 轮 · 一面

Tue, 02 Sep 2025 07:31:02 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮要点： 本次面试主要考察前端基础知识、React框架原理、算法能力等多个维度的内容。重点关注CSS布局、页面性能优化、React核心概念等方面。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 如何实现一个宽高自适应的正方形元素？

题目要点

CSS布局技巧和响应式设计能力
百分比单位在CSS中的特殊性质理解
现代CSS新特性的应用能力

参考答案

1.1 原理说明

实现宽高自适应的正方形元素的核心在于确保元素的高度能够根据其宽度以1:1的比例进行等比缩放。这通常通过利用CSS中某些属性的特殊计算方式来实现，或者通过现代CSS特性直接声明。以下是几种常见方案的核心原理：

使用padding-top/padding-bottom百分比：在CSS盒模型中，padding属性的百分比值是相对于父元素的宽度来计算的，即使是padding-top和padding-bottom也是如此。因此，当我们将一个元素的height设为0，并将padding-top或padding-bottom设为100%时，它的高度实际上会等于其父元素的宽度，从而形成一个完美的正方形（假设其宽度也为100%）。这种方法利用了这一特性来"撑开"元素的高度。
使用aspect-ratio（现代浏览器支持）：aspect-ratio是CSS的一个新属性，它允许开发者直接指定一个元素的宽高比，浏览器会根据这个比率自动计算元素的尺寸。例如，aspect-ratio: 1/1会强制元素保持1:1的正方形比例。这是一个更语义化、更现代的解决方案，减少了传统方法的 hackiness。
使用vw单位：vw（viewport width）是一个相对单位，1vw等于视口宽度的1%。通过将元素的width和height都设置为相同的vw值，例如50vw，可以确保它们始终保持相等的尺寸，并随着视口宽度的变化而自适应缩放，从而形成正方形。

这些方案各有优缺点，如兼容性、代码语义性等，选择哪种方案取决于具体的项目需求和目标浏览器环境。

1.2 核心用法 + 示例代码

在实际开发中，这些方案可以根据兼容性需求和代码简洁性进行选择。

方案1：使用padding-top/padding-bottom百分比 这种方法兼容性好，几乎所有浏览器都支持。常用于需要兼容旧版浏览器或在图片、视频容器中保持比例的场景。

.square {
 width: 100%; /* 宽度可以设置为百分比、固定值或vw等 */
 height: 0;
 padding-top: 100%; /* padding百分比相对于父元素宽度计算，确保高度与宽度相等 */
 background: #eee;
 /* 内部内容可以通过绝对定位放置，以避免被padding挤压 */
 position: relative;
}

.square-content {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #333;
}

HTML结构示例:

<div class="square">
 <div class="square-content">
 自适应正方形
 </div>
</div>

方案2：使用aspect-ratio（现代浏览器支持） 这是CSS3新增的属性，语义化最好，代码最简洁。适用于现代浏览器环境，是推荐的首选方案。

字节-国际电商-前端面试 · 第 1 轮 · 一面

Tue, 02 Sep 2025 07:09:39 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 考察面试者的表达能力、总结归纳能力和个人亮点。

本轮共 17 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

主观型问题，无唯一标准答案。 面试官主要考察答题者的表达能力、总结归纳能力、沟通技巧以及对自身经历和技术栈的清晰认知。
答题时建议围绕"我是谁"、“我做了什么”、“我做得怎么样"和"我为什么选择贵公司"这几个核心点展开，突出个人亮点与岗位匹配度。

参考答案

各位面试官好，我叫[您的姓名]，毕业于[您的学校]，专业是[您的专业]。在校期间，我专注于前端开发方向的学习与实践。在技术栈方面，我熟练掌握 HTML、CSS、JavaScript 基础，并深入学习了 Vue.js 框架，对 Vue 生态系统，如 Vuex、Vue Router 也有实际应用经验。在实习期间，我主要负责[您的项目职责，例如：公司官网前端页面的开发与维护，参与了XX功能模块的重构]。具体工作中，我曾独立负责[具体某个功能或模块]，通过[具体技术或方法]，实现了[具体效果或优化]，比如在[某项目中]实现了[某个功能]，有效提升了用户体验[或业务效率]。我个人对前端技术充满热情，具备良好的学习能力和解决问题的能力，期待能将我的技能和经验应用到贵公司，与团队一同成长。

2. 在学校期间有没有参与过什么技术社团或项目，对你的前端学习有什么帮助？

题目要点

主观型问题，无唯一标准答案。 面试官主要考察答题者在校期间对技术的热情、主动学习能力、团队协作能力以及将理论知识应用于实践的能力。他们希望了解你如何将课外活动与前端学习结合，并从中获得了哪些成长。
答题时建议突出你在社团/项目中承担的角色、遇到的挑战、如何解决问题、学到的技术知识以及对个人成长的影响。

参考答案

在校期间，我积极参与了学校的[例如：创新创业协会或某个技术兴趣小组]。在这些活动中，我曾参与一个[例如：校园兼职平台]的小型项目开发。当时，我们团队面临的挑战是[例如：如何利用有限的资源快速搭建一个具备基本交互功能的前端原型]。我主动承担了前端页面的开发工作，通过自学 Vue.js 的组件化思想和路由管理，将页面拆分为可复用的组件，并实现了前端路由功能。虽然项目规模不大，但它让我第一次有机会将课堂上学习的 HTML、CSS、JavaScript 知识体系化地应用到实际开发中。通过这次经历，我不仅锻炼了独立解决问题的能力，还体会到了团队协作的重要性，比如在开发中与后端同学进行接口联调、与设计师沟通 UI 实现细节等，这对我后续的实习和前端学习都产生了积极的推动作用。

3. 说说你实习项目中遇到的技术难点，以及你是如何解决的？

题目要点

主观型问题，无唯一标准答案。 面试官主要考察答题者对项目实践的深入理解、问题解决能力、技术深度以及学习和复盘能力。他们希望了解你在面对挑战时，如何分析问题、寻找解决方案并最终达成目标。
答题时建议围绕"遇到什么难点”、“如何分析与定位问题”、“采用了哪些技术方案”、“解决了什么问题"以及"从中获得了哪些经验和教训"等核心点展开，强调思考过程和技术细节。

参考答案

在我的实习项目中，我曾遇到一个比较棘手的性能问题。我们负责的一个电商列表页面，随着商品数量的增多，首次加载时间变得非常慢，用户体验受到严重影响。通过浏览器开发者工具分析，我发现主要瓶颈在于大量图片资源的加载以及首屏渲染时数据量过大导致的卡顿。

为了解决这个问题，我首先考虑了图片懒加载。我引入了一个 Intersection Observer API 的实现，使得图片只有在进入用户视口时才开始加载，这显著减少了初始的 HTTP 请求数量和带宽消耗。其次，针对数据量大的问题，我调研并实现了虚拟列表。核心思路是只渲染当前可见区域的列表项，并动态计算滚动时的偏移量和渲染范围。这避免了一次性渲染数千个 DOM 节点造成的性能压力。具体实现中，我维护了一个可滚动区域，根据滚动位置动态更新展示的数据索引，并结合 requestAnimationFrame 确保滚动动画的流畅性。

经过这些优化措施，页面的首次加载时间从原来的 8 秒降低到了 2 秒以内，列表滚动时的卡顿现象也基本消除。这个过程让我对前端性能优化有了更深层次的理解，特别是如何结合浏览器 API 和数据结构优化来解决实际问题，也锻炼了我分析和解决复杂性能瓶颈的能力。

4. 解释一下 TS 泛型的概念和作用

题目要点

泛型概念：面试官想确认面试者对泛型的基本定义、作用和设计目的的理解。
泛型作用：考察泛型在增强代码灵活性、类型安全和重用性方面的具体应用。
实际应用：理解泛型在实际开发中如何应用于函数、接口、类等场景，以及其在大型项目中的价值。

参考答案

1.1 原理说明

百度-小程序-暑期实习 · 第 1 轮 · 一面

Thu, 21 Aug 2025 15:43:17 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 21 道题。答案默认折叠，便于先自行作答。

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"]

三、深拷贝

深拷贝开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

百度-用户增长-秋招 · 第 1 轮 · 一面

Thu, 21 Aug 2025 15:39:11 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 有没有使用 Node.js 进行开发的经历？

题目要点

“不仅仅用过 Node.js，而且能说清楚在前端团队里它解决了哪些实际问题，产生了什么价值。” 这样比单纯回答“用过/没用过”更有亮点。

参考答案

考察的核心是：对 Node.js 的理解深度和在前端/全栈中的实际应用场景。

回答时可以从以下几个角度展开：

1. 使用场景

前端工程化工具链：使用 Node.js 驱动构建工具（Webpack、Vite、Rollup 等），编写脚本实现自动化构建、代码检查、Mock Server 搭建。
服务端接口开发：基于 Express、Koa、NestJS 搭建轻量级 API 服务，用于前后端分离项目的接口模拟或小型后台系统。
中间层 / BFF（Backend for Frontend）：在复杂业务中，用 Node.js 实现前后端解耦，比如统一处理接口聚合、鉴权、缓存。
SSR / SSG 场景：使用 Next.js 或 Nuxt.js，借助 Node.js 渲染首屏，提升 SEO 和加载体验。
运维与脚本：编写部署脚本、自动生成文件、批量处理数据。

2. 具体任务

可以结合自身经历强调：

是否搭建过 Mock 服务，辅助前后端并行开发；
是否写过中间层解决跨域、接口聚合问题；
是否在工程化中写过 Node.js 工具脚本（如自动生成路由表、埋点收集脚本）；
是否参与过服务端渲染或静态站点生成相关开发。

3. 收获和亮点

对 事件驱动、非阻塞 I/O 有更深理解，能写出高并发场景下的稳定服务；
学会了在前端视角下如何更好地和后端衔接；
在实际项目中通过 Node.js 提升了团队的开发效率（例如通过脚本工具减少重复劳动）。

2. CSS 3D 变形有哪些常见的属性和方法？

题目要点

CSS 3D 变形（3D Transform）是 CSS3 提供的一组属性，用来在三维空间中对元素进行旋转、缩放、平移、倾斜等操作。

百度-APP产品研发-秋招 · 第 1 轮 · 二面

Wed, 20 Aug 2025 14:54:45 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

面试时间： 60分钟

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 讲一下你在官网开发中的主要职责，开发的模块以及你觉的比较亮点的地方

题目要点

如果是面试官问到“官网开发中的主要职责、开发的模块以及比较亮点的地方”，一般可以从以下几个角度来回答，既展示你的全局把控能力，又体现你在某些点上有深度。

参考答案

下面是一个参考思路：

1. 主要职责

官网整体架构搭建：根据业务和设计稿，使用 React/Vue + Vite/Next.js/Nuxt.js 等技术栈完成整体框架搭建，包括路由、状态管理、多语言支持等。
公共模块封装：抽象公共组件（如导航栏、页脚、轮播、富文本渲染、内容卡片等），提高复用率，减少重复开发。
性能优化：处理首屏加载速度、资源拆分、图片懒加载、SSR/SSG、SEO 优化。
协作沟通：与产品、UI、后端保持沟通，保证页面上线节奏和质量。

2. 负责的模块（可根据实际情况举例）

首页：承担品牌形象展示，涉及 banner 动效、动态数据展示、视频播放等。
产品/解决方案页：结合后端接口，展示不同产品模块，支持筛选、搜索、动态路由。
活动/新闻动态页：接入 CMS（如 Strapi、Sanity、WordPress 等），支持运营人员通过后台直接发布。
多语言切换模块：基于 i18n 实现官网多语言，支持自动识别浏览器语言，静态资源跟随切换。
SEO 优化模块：处理 meta 信息、OG 标签、站点地图、robots.txt，提升搜索引擎收录效果。

3. 亮点/难点突破

性能优化亮点
- 利用 SSR/SSG（Next.js/Nuxt.js）提升首屏渲染速度，Lighthouse 分数提升到 90+。
- 使用图片 CDN + WebP 格式，首页加载时间缩短 30%。
- 按需加载组件、拆分 bundle，减少首次请求体积。
可配置化思路
- 引入 CMS 系统，实现官网内容可配置，避免频繁改代码上线，运营可直接维护。
- 封装通用“模块化组件”，如 Banner、富文本、图文组合，做到拖拽/配置式渲染。
前端体验优化
- 首页/产品页引入动效（基于 Lottie 或 GSAP），提升视觉冲击力。
- 交互细节（滚动吸附、视差动画、过渡效果）增强用户沉浸感。
工程化实践

百度-APP产品研发-秋招 · 第 1 轮 · 一面

Tue, 19 Aug 2025 14:47:24 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 前端实现动画有哪些方式？

题库原题：前端实现动画有哪些方式？

题目要点

前端开发中，实现动画的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些常见的实现方式：

CSS 动画：
- 使用 @keyframes 和 animation 属性定义动画。
- 优点：易于实现，性能好，易于维护。
- 缺点：功能相对简单，难以实现复杂的交互动画。
CSS 过渡（Transitions）：
- 使用 transition 属性在状态变化时实现平滑过渡。
- 优点：简单易用，性能优秀。
- 缺点：只能用于状态变化的过渡，不适合复杂动画。
JavaScript 动画：
- 使用 JavaScript 直接操作 DOM 元素的样式属性实现动画。
- 优点：灵活性高，可以控制动画的每一个细节。
- 缺点：可能影响性能，需要更多的代码实现。
Web Animations API：
- 使用 Element.animate() 方法实现动画。
- 优点：提供更丰富的动画控制和更一致的跨浏览器支持。
- 缺点：兼容性不如 CSS 动画。
SVG 动画：
- 使用 SVG 元素和 SMIL（Synchronized Multimedia Integration Language）或 CSS 动画实现动画。
- 优点：适合矢量图形动画，易于集成。
- 缺点：浏览器支持和性能可能不如 CSS 动画。
Canvas：
- 使用 HTML <canvas> 元素和 JavaScript 绘制动画。
- 优点：适合复杂的图形和游戏动画。
- 缺点：实现复杂，需要手动管理每一帧的绘制。
CSS 3D 变换：

美团-零售-秋招 · 第 1 轮 · 一面

Mon, 04 Aug 2025 07:49:59 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端基础知识，包括数据结构、网络协议、操作系统、JavaScript、CSS、React以及算法等方面。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 数组和链表的区别，读取和删除的时间复杂度

题目要点

数据结构基础：考察对数组和链表这两种基本数据结构概念的理解，包括它们的存储方式和特点。
时间复杂度分析：评估数据结构在不同操作下的性能表现，这是衡量算法效率的关键指标。

参考答案

1.1 原理说明

数组：数组是一种将元素存储在连续内存空间中的数据结构。它通过索引来直接访问任意元素，因为所有元素的大小相同且物理地址连续，可以通过首地址和索引计算出元素的确切位置。
链表：链表是一种将元素存储在非连续内存空间中的数据结构。每个元素（称为节点）包含数据本身以及指向下一个元素的指针（或引用）。节点之间通过这些指针逻辑上连接起来，但不要求物理上连续。
联系与区别：数组和链表都是线性数据结构，用于有序地存储和组织数据。它们的主要区别在于内存的物理存储方式和由此带来的对元素访问、插入、删除操作的效率差异。数组支持随机访问，而链表只能顺序访问。
为什么会出现这个技术需求或问题：不同的数据存储和操作场景对数据结构有不同的性能要求。当需要快速随机访问数据时，数组由于其连续存储特性表现更优；而当需要频繁地进行插入和删除操作时，链表由于其灵活的指针连接方式，避免了大量元素移动，因此效率更高。

1.2 核心用法 + 示例代码

读取操作：

数组：通过索引直接访问元素，时间复杂度为 O(1)。无论数组大小，访问任何元素所需时间都是恒定的。

const arr = [10, 20, 30, 40, 50];
console.log(arr[2]); // 输出 30，直接访问，时间复杂度 O(1)

链表：必须从链表的头部节点开始，沿着指针逐个遍历，直到找到目标元素。因此，时间复杂度为 O(n)，其中 n 是链表的长度。在最坏情况下，需要遍历整个链表。

class Node {
 constructor(val) {
 this.val = val;
 this.next = null;
 }
}
const head = new Node(10);
head.next = new Node(20);
head.next.next = new Node(30);

let current = head;
while (current && current.val !== 30) {
 current = current.next;
}
console.log(current ? current.val : 'Not found'); // 输出 30，需要遍历，时间复杂度 O(n)

删除操作：

数组：删除数组中的某个元素后，为了保持内存的连续性，其后的所有元素都需要向前移动以填补空缺。这个移动操作的时间复杂度为 O(n)。

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 删除索引为2的元素（即3），后续元素（4, 5）前移，时间复杂度 O(n)
console.log(arr); // 输出 [1, 2, 4, 5]

链表：如果已知要删除节点的前一个节点，删除操作只需要修改前一个节点的指针，使其指向被删除节点的下一个节点。这个操作的时间复杂度为 O(1)。如果需要先查找再删除，则总时间复杂度为 O(n)（查找的开销）。

// 假设我们有一个链表 1 -> 2 -> 3，我们要删除值为 2 的节点
// 模拟找到值为 1 的节点 (prevNode) 和值为 2 的节点 (nodeToDelete)
let headDelete = new Node(1);
let node2 = new Node(2);
let node3 = new Node(3);
headDelete.next = node2;
node2.next = node3;

let prevNode = headDelete; // 值为 1 的节点
let nodeToDelete = node2; // 值为 2 的节点

prevNode.next = nodeToDelete.next; // 将 1 的 next 指向 3，时间复杂度 O(1)
// 现在链表变为 1 -> 3

优势总结：

美团-打车-校招 · 第 1 轮 · 一面

Mon, 04 Aug 2025 07:21:50 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端基础、框架原理以及性能优化等方面的知识。

本轮共 26 道题。答案默认折叠，便于先自行作答。

1. 1. 项目的难点与亮点是什么？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先简述项目背景，接着阐述难点（遇到的问题、如何解决、技术选型考量），再说明亮点（创新点、技术深度、业务价值），最后进行总结和反思。

参考答案

我们团队在开发 XXX 项目时，有一个核心模块是 YYYY。这个模块的主要难点在于需要处理高并发的数据同步和复杂的权限控制逻辑。具体来说，我们面临的挑战包括：

高并发数据同步：在某个特定场景下，用户操作会导致大量数据实时更新，并且这些更新需要快速同步到多个客户端。初期方案在压力测试时出现了明显的延迟和数据不一致问题。
- 解决思路：我们分析了瓶颈，发现是由于频繁的数据库写入和全量数据推送导致的。经过讨论，我们最终选择了基于 WebSocket 实现增量数据推送，并引入了消息队列（Kafka）来削峰填谷，后端对数据进行聚合后再批量写入。在前端，我们设计了一个轻量级的数据缓存层，只在接收到增量更新时局部刷新UI，大大减少了DOM操作。
- 技术权衡：我们对比过轮询、长轮询等方案，但它们在实时性和资源消耗上都不如 WebSocket 配合增量更新。虽然引入消息队列和 WebSocket 增加了系统复杂度，但在百万级并发场景下，它提供了更优的性能和更低的资源占用。
复杂的权限控制：系统需要支持多维度、细粒度的用户权限，包括不同角色对数据和功能的访问权限，并且权限配置是动态可变的。
- 解决思路：我们设计了一套基于 RBAC（Role-Based Access Control）的权限模型，但在前端实现时，为了避免每次操作都去后端校验权限，我们引入了前端权限路由守卫和组件级权限指令。在用户登录时，后端会返回一个精简的权限列表，前端根据这个列表动态生成菜单、路由，并控制组件的可见性及交互。
- 技术权衡：这种前后端结合的权限控制方式，兼顾了安全性和用户体验。虽然前端增加了权限逻辑处理，但减少了不必要的后端请求，提升了页面响应速度。我们还考虑过将权限完全放到后端控制，但那样会导致频繁的网络请求，用户体验会下降。

项目的亮点主要体现在两个方面：

技术深度与创新：我们引入的 WebSocket + Kafka 的实时数据同步方案，有效地支撑了高并发场景下的数据一致性和实时性要求，这是项目在技术上的一大突破。此外，我们还自主研发了一套可视化配置工具，让业务人员可以灵活配置数据同步规则，极大地提高了运营效率。
业务价值与用户体验提升：通过解决上述难点，我们成功将核心页面的数据实时同步延迟从平均 5 秒降低到 500 毫秒以内，用户在操作时的卡顿感几乎消除，大幅提升了用户满意度。同时，权限系统的灵活配置也让业务扩展变得更加便捷，支持了新业务的快速上线。

在整个过程中，我们团队通过深入分析、多方案对比和持续优化，不仅攻克了技术难点，也为业务带来了实际的价值。这次经历让我对高并发系统设计和复杂权限管理有了更深刻的理解，也锻炼了我在权衡技术方案和解决实际问题方面的能力。

2. 2. 解决难点时，是否对比过多种方案？最终选择的方案有何权衡？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者解决问题的思路、方案对比能力、技术选型和权衡能力，以及对项目实际情况的理解。
答题结构建议：首先选择一个具体的项目难点，围绕该难点，阐述曾考虑的多种解决方案，对比它们的优劣（技术、成本、风险等），最终说明选择当前方案的理由及权衡过程，并可提及后续优化方向。

参考答案

在我的前端项目中，曾遇到一个挑战，就是如何高效地管理和渲染大规模的动态表单。传统的方案是直接通过 JSON 配置动态生成表单项，但这在表单项过多、层级嵌套复杂时，会导致渲染性能下降，并且表单校验逻辑难以统一管理。

当时我们主要对比了以下几种方案：

方案一：纯粹的 JSON Schema 驱动，一次性渲染
- 优点：配置简单直观，后端可以方便地控制表单结构。
- 缺点：对于包含上百个字段甚至更多字段的复杂表单，一次性渲染会导致首次加载时间过长，页面卡顿。当表单数据频繁变化时，DOM 更新开销大，用户体验差。
- 权衡：虽然开发成本低，但性能瓶颈明显，不适用于我们目标中的大型复杂表单。
方案二：基于组件化和局部更新

腾讯-CSIG一校招 · 第 1 轮 · 第一轮

Mon, 28 Jul 2025 14:52:54 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮概述： 一面主要考察前端基础，难度不大。

面试时间： 90分钟

本轮要点： 基础概念理解深入，能够解释原理和应用场景

代码实现思路清晰，考虑边界情况和性能优化

对前端技术栈有系统性认知，了解技术发展趋势

具备解决实际问题的能力和工程化思维

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 为什么选择前端

题目要点

作为校招生，回答"为什么选择前端"时要避免空喊"热爱"或跟风，建议用具体经历+能力匹配+行业洞察的三段式结构，既体现思考深度又展示成长潜力。

参考答案

以下是分场景的高分回答模板：

版本一：技术驱动型（适合有项目经历的同学）

“选择前端源于两次关键经历：

大一用Vue重构学院官网时，发现通过组件化开发能将设计稿像素级还原，这种’所见即所得’的即时反馈让我着迷；

在实习中做低代码平台时，用React+D3.js实现拖拽生成图表，体会到前端不仅是实现UI，更是连接用户与数据的桥梁。
前端技术迭代快（如WebAssembly、微前端）的特点，恰好匹配我热衷通过技术解决实际问题的性格。贵司的XX业务（如电商/数据可视化）对交互体验要求极高，我的XX项目经验（举例）能快速落地。”

版本二：用户导向型（适合非科班转行的同学）

“虽然我是工业设计专业，但大三时用Figma做APP原型时，发现静态设计无法验证用户真实体验。于是自学Three.js做了3D产品展示页，通过A/B测试发现3D交互使用户停留时长提升40%。这让我意识到：前端是设计落地的’最后一公里’。
前端独有的**‘技术+设计+心理学’交叉属性**（如用Framer-motion设计微交互引导用户操作），让我能用代码延续设计价值。贵司注重用户体验（如引用官网案例），我的设计背景+代码能力能提供差异化视角。”

版本三：行业趋势型（适合技术视野广的同学）

“选择前端是因为它是最接近技术变革一线的领域：

云原生时代：前端从浏览器扩展到全端（如Electron桌面应用、小程序）；

AI赋能：WebGL+TF.js让前端直接运行AI模型（如实时人脸检测）；

IoT场景：前端技术控制智能家居（如用WebSerial协议与硬件通信）。
我在开源项目参与过WebRTC实时互动功能开发，体会到前端工程师正在定义下一代人机交互标准。贵司的XX业务（如智能硬件/元宇宙）正处于这些趋势的交汇点，我的XX技能（如WebGL/跨端开发）能直接贡献。”

避坑提示

不要只说"喜欢 visible 的结果"：改为**“享受从像素级还原到性能优化的全链路挑战”**（体现技术深度）。
避免"前端简单"的刻板印象：改为**“前端是工程复杂度最高的领域之一，需同时处理兼容性、状态管理、性能优化多端适配”**（展示认知）。
关联公司业务：提前研究官网/技术博客，比如：“注意到贵司用Next.js重构了主站，我对其中SSG/ISR的SEO优化策略很感兴趣”（体现调研）。

最后，用成长型结尾强化潜力：“作为校招生，我清楚自己缺乏高并发场景经验，但已系统学习Chrome DevTools性能分析，并模拟过百万级PV的SSR优化（举例），期待在贵司的实际业务中深化这些能力。”

2. 框架理解 - Nest.js设计思想

题目要点

分层架构、功能增强、多种设计模式应用

参考答案

Nest.js基于Express或Fastify进行封装，采用分层架构设计。底层HTTP服务器提供基础的请求处理能力，Nest.js在此基础上添加了依赖注入、装饰器、模块化等企业级特性。这确实类似装饰器模式，每一层都在不改变核心功能的前提下增强框架能力。

除了装饰器模式，还了解观察者模式（发布-订阅），常用于事件系统和状态管理；工厂模式，用于创建不同类型的对象实例；单例模式，确保全局唯一实例等。

3. 闭包概念和产生原因

题目要点

词法作用域、变量访问权限、执行环境保持

参考答案

闭包是指函数能够访问其外部作用域变量的特性。产生闭包的原因是JavaScript的词法作用域机制，函数在定义时就确定了可访问的变量范围，即使在其他执行环境中调用也能保持这种访问能力。

function createCounter() {
 let count = 0;
 return function() {
 return ++count;
 };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4. 闭包内存问题及解决方案

题目要点

引用保持、垃圾回收阻塞、手动清理、变量提取

腾讯-CSIG一校招 · 第 1 轮 · 第二轮

Mon, 28 Jul 2025 14:52:54 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 第二轮对技术深度有一定的考察。对构建工具有深入理解，能够分析技术选型原因掌握React核心概念和性能优化技巧具备网络协议和安全知识代码实现能力强，能够设计合理的算法和架构理解设计模式在实际场景中的应用

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. Node中间件的作用和使用

题目要点

请求拦截处理、横切关注点、链式执行、功能解耦

参考答案

中间件是在请求和响应之间执行的函数，用于处理横切关注点。在Express/Nest.js中，中间件按顺序执行，每个中间件可以修改请求对象、响应对象，或者终止请求-响应循环。

常用的中间件包括：

身份验证中间件：验证用户token
日志中间件：记录请求信息
错误处理中间件：统一处理异常
CORS中间件：处理跨域请求
参数验证中间件：验证请求参数格式

2. 大模型的理解和应用

题目要点

语言模型、涌现能力、开发辅助、安全考虑

参考答案

大模型是基于Transformer架构的深度学习模型，通过大规模数据训练获得强大的语言理解和生成能力。主要特点是参数量巨大、涌现能力强、通用性好。

在开发中的应用：

代码生成和补全：提高开发效率
文档生成：自动生成API文档和注释
代码审查：发现潜在问题和优化建议
需求分析：辅助理解业务逻辑

使用时需要注意数据安全、结果准确性验证、成本控制等问题。

3. Webpack vs Vite 的理解和区别

题目要点

构建原理差异、性能表现、生态成熟度、配置复杂度

参考答案

Webpack是基于模块打包的构建工具，通过入口文件分析依赖关系，将所有资源打包成bundle。Vite是基于ES模块的构建工具，开发时利用浏览器原生ES模块支持，生产时使用Rollup打包。

主要区别：

启动速度：Vite利用ES模块按需加载，启动更快；Webpack需要预先打包
热更新：Vite基于ES模块的HMR更精确；Webpack需要重新打包相关模块
生态系统：Webpack生态更成熟，插件丰富；Vite相对较新但发展迅速
配置复杂度：Vite开箱即用，配置简单；Webpack配置相对复杂

4. 项目选择构建工具的考虑

题目要点

开发体验优先、项目延续性、团队熟悉度、稳定性考虑

参考答案

个人项目选择Vite主要考虑开发体验，启动快、热更新迅速，配置简单，适合快速原型开发。实习项目使用Webpack主要因为：

历史项目延续性，已有完整的配置和工作流
团队熟悉度高，维护成本低
生态系统成熟，特殊需求的插件支持更好
大型项目的稳定性考虑

5. Vite 开发环境与生产环境差异

题目要点

按需加载vs完整打包、开发体验vs生产优化、不同构建工具

参考答案

开发环境：

京东-零售-实习 · 第 1 轮 · 第一轮

Mon, 28 Jul 2025 14:15:34 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

4. 当前项目还有哪些可以优化的地方

题目要点

从性能、体验、质量三个维度分析优化空间，体现对项目全局的思考和持续改进意识。

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

Mon, 28 Jul 2025 13:18:04 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

略

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

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

Mon, 28 Jul 2025 13:14:50 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

一、考察点

理解性能优化的投入与收益关系
掌握定量和定性评估性能优化效果的方法
了解业务指标与性能指标的关联性
能结合项目实际情况合理规划和衡量优化价值

二、参考答案

2.1 ROI 的定义与核心思想

ROI（Return on Investment）即“投资回报率”，衡量投入资源与产出收益的比率
性能优化的 ROI 评估即衡量优化投入（时间、人力、成本）与带来的业务或技术收益是否成正比
目标是确保资源有效利用，避免盲目优化

2.2 性能优化投入的量化

开发成本：开发和测试性能优化方案所需的人力、时间
基础设施成本：可能新增的硬件资源或第三方服务开销
维护成本：优化方案上线后的维护和升级投入

2.3 性能优化收益的量化

业务指标提升：如转化率、用户留存率、页面访问量、用户满意度等
技术指标改善：首屏时间（FCP）、最大内容渲染时间（LCP）、交互响应时间、错误率降低等
运营成本降低：服务器压力减轻、带宽节省、用户投诉减少等

2.4 关联业务价值与性能指标

通过数据分析建立性能指标与业务指标的映射关系，比如：
- 首屏加载时间缩短 1 秒，转化率提升 5%
- 页面响应延迟减少，用户流失率降低
结合历史数据或行业调研，预估性能改进带来的经济效益

2.5 评估流程示例

明确优化目标：确定需优化的性能瓶颈和预期改进幅度
估算投入成本：评估开发时间、人力、资源等投入
预估收益：基于数据和业务指标推算收益大小
计算 ROI：收益 / 投入，判断是否值得投资
持续监控：优化上线后跟踪实际效果，调整策略

2.6 风险与非量化因素考虑

用户体验提升虽难量化，但对品牌和用户粘性极重要
竞争压力、市场趋势等外部因素可能影响 ROI
技术债务减少，长期维护成本降低也是重要收益

三、常见误区或面试陷阱

❌ 只关注技术指标优化，忽视业务价值转化
❌ 低估开发和维护成本，导致投入超出预期
❌ 盲目追求极致性能，忽略边际效益递减
❌ 缺乏数据支持，ROI 评估主观臆断

4. 项目风险遇到过哪些，怎么解决的

题目要点

略

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

Mon, 28 Jul 2025 13:12:16 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

参考答案

一、考察点

理解 SSR 的基本概念和优势
掌握常见 SSR 实现方案及其原理
理解 SSR 与客户端渲染（CSR）的区别和协同方式
了解 SSR 在项目中的具体落地方法和技术选型

二、参考答案

2.1 SSR 的基本概念

SSR（Server-Side Rendering）是指在服务器端完成页面的 HTML 渲染，再将完整的 HTML 返回给客户端
相比纯客户端渲染，SSR 提升了首屏渲染速度和 SEO 友好性
用户拿到的是已渲染好的页面，浏览器可以更快显示内容

2.2 SSR 的优势和适用场景

首屏速度快：浏览器无需等待大量 JS 执行即可显示页面
SEO 优化：搜索引擎能抓取到完整的内容，提升排名
社交分享友好：分享链接时可显示完整预览
适合内容型或公共站点，电商、新闻、博客等场景

2.3 常见 SSR 实现方案

Next.js（React）：提供开箱即用的 SSR 支持和静态生成
Nuxt.js（Vue）：Vue 生态的 SSR 框架，支持服务端渲染和静态导出
自研 SSR：使用 Node.js 搭配 ReactDOMServer 或 Vue SSR API 手动实现
传统模板引擎：如 EJS、Handlebars 等，服务器渲染 HTML

2.4 我们项目中 SSR 的实现方式

使用了 [Next.js / Nuxt.js / 自研 SSR] 作为 SSR 框架
服务器通过 Node.js 环境调用 ReactDOMServer.renderToString 或 Vue SSR 的 renderToString，生成完整 HTML
结合路由系统，实现根据请求 URL 渲染对应页面
页面返回时携带初始数据（通过服务端数据预取），客户端接管 Hydration，实现页面交互
结合缓存策略，优化性能和响应速度
配合 Webpack 和 Babel，保证服务端代码和客户端代码一致性

2.5 实现过程中需注意的问题

服务端和客户端代码共享及差异处理（避免浏览器 API 直接调用）
初始数据的获取与注入，保证页面完整性和交互
处理样式加载，避免闪烁（FOUC）
性能优化，如页面缓存、资源压缩和异步加载
服务器负载和扩展性考虑

三、常见误区或面试陷阱

❌ 认为 SSR 只是在服务器渲染静态 HTML，忽略客户端 Hydration
❌ 忽视服务端渲染的性能开销和状态同步难题
❌ 直接复用客户端代码，未处理服务端无 DOM 的环境差异
❌ 忽略 SEO 以外的性能和用户体验提升点

8. 项目中使用了哪些状态管理工具？为什么选择这些工具

题目要点

状态管理工具选择基于项目规模、团队经验和性能需求
Redux 适合大型复杂应用，MobX 适合响应式需求
Context 适合轻量局部状态管理
结合工具生态和中间件支持，提升开发效率和维护性
合理划分全局与局部状态，避免状态管理复杂化

参考答案

一、考察点

理解不同状态管理工具的特点及适用场景
掌握项目中选择状态管理工具的决策逻辑
能清晰阐述所选工具带来的优势和解决的问题
了解状态管理的基本概念和复杂度控制方法

二、参考答案

2.1 项目中使用的状态管理工具

Redux
- 适用于大型复杂应用，状态集中管理
- 具备时间旅行调试、可预测状态变更、丰富中间件生态
MobX
- 响应式状态管理，自动追踪依赖，适合数据驱动视图更新
- 代码简洁，学习曲线较低
React Context + useReducer/useState
- 轻量级状态共享方案，适合中小型或局部状态管理
Recoil / Zustand / Valtio 等轻量方案
- 现代灵活的状态管理，适合部分场景需求
Vuex（Vue 项目）
- Vue 官方状态管理库，集中管理全局状态，支持插件扩展

2.2 选择这些工具的理由

项目规模与复杂度

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

Mon, 28 Jul 2025 12:42:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

一、考察点

探查候选人对 Vue 核心原理、语法机制的理解深度
判断是否具备实战经验、组件开发能力、性能优化能力
涵盖响应式系统、组件通信、生命周期、指令系统、虚拟 DOM、Diff 等关键技术点
Vue 生态栈是否熟悉，如 Vue Router、Vuex / Pinia、Composition API、Vue 3 升级等

二、参考答案

2.1 Vue 框架的整体认知

Vue 是一个 轻量、渐进式的前端框架，核心关注 View 层，易学易用，适合快速开发中大型应用
支持响应式绑定、组件化开发、指令系统、虚拟 DOM、跨平台（如 H5、小程序）

Vue 的核心组成包括：

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

Mon, 28 Jul 2025 12:38:24 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： react hooks、高阶组件、列表和key、react 渲染机制、react 组件设计模式、前端模块化、Webpack与Vite

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 讲一下你对Hooks 了解

题目要点

Hooks 是函数组件状态和副作用管理的新方案
常用 Hooks 有 useState、useEffect、useMemo、useCallback 等
Hook 调用必须遵循规则，保证顺序稳定
自定义 Hooks 用于逻辑复用，提高代码可维护性
理解 Hook 设计原理，有助于写出高质量 React 代码

参考答案

一、考察点

理解 React Hooks 的设计初衷与核心概念
掌握常用 Hooks（如 useState、useEffect、useMemo、useCallback 等）的作用与使用场景
理解 Hooks 规则及其背后的原理机制
认识 Hooks 对函数组件状态管理和生命周期的改进
了解自定义 Hooks 的设计思路及复用价值

二、参考答案

2.1 Hooks 的定义与设计初衷

定义：Hooks 是 React 16.8 引入的函数组件状态和副作用管理的特性
设计目标：
- 解决类组件中状态逻辑难以复用和组件嵌套过深的问题
- 让函数组件拥有类似类组件的状态和生命周期能力
- 简化组件逻辑，提升代码可读性和复用性

2.2 常用 Hooks 及其作用

Hooks	功能描述	典型使用场景
`useState`	在函数组件中声明状态变量	组件内部状态管理
`useEffect`	处理副作用（订阅、异步请求、DOM操作等）	替代类组件的生命周期钩子
`useContext`	订阅 React Context，实现跨组件数据传递	共享全局状态、主题、语言等
`useMemo`	记忆计算结果，避免不必要的重复计算	性能优化，避免昂贵计算重复执行
`useCallback`	记忆函数实例，避免子组件重复渲染	优化子组件性能，防止无意义的 props 变化
`useRef`	保存可变值，不触发组件重新渲染	访问 DOM 节点或保存不变引用

2.3 Hooks 的规则与原理

规则：
- 只能在函数组件或自定义 Hooks 中调用
- 只能顶层调用，不能在循环、条件或嵌套函数中调用，保证 Hook 调用顺序稳定
原理：React 通过维护一个 Hook 链表和调用顺序，关联 Hook 状态与对应组件实例，实现状态的持久化和更新

2.4 自定义 Hooks

将组件中可复用的状态逻辑抽象成函数
函数内部调用其他 Hooks，实现逻辑复用与拆分
提高代码复用性和可维护性

三、常见误区或面试陷阱

误用 Hook 规则，导致调用顺序不稳定
过度使用 useEffect，产生复杂副作用链和性能问题
误解 useMemo 和 useCallback 的使用时机和作用
忽略依赖项数组，导致副作用不正确执行
不了解自定义 Hooks 是普通函数，不能在其中调用 Hook 规则外的逻辑

2. 对比 Class 组件的 Mixin 模式，Hooks 如何解决逻辑复用问题？Mixin 的主要缺陷是什么

题目要点

Mixin 依赖多继承，存在命名冲突、状态污染、难维护等问题
Hooks 通过函数组合和自定义 Hook 实现逻辑复用，避免冲突和复杂继承
Hooks 提升代码可读性、维护性、测试性和类型支持
React 官方推荐使用 Hooks 替代 Mixin 模式

参考答案

一、考察点

理解 Class 组件中 Mixin 的工作方式及缺陷
掌握 Hooks 解决组件逻辑复用的机制和优势
比较两种方案在代码组织、维护性和复用性上的差异
理解现代 React 设计理念和组件开发最佳实践

二、参考答案

2.1 Mixin 模式及其缺陷

Mixin 定义：通过多个类混入（mixin）共享方法和状态，Class 组件通过继承或组合多个 mixin 实现代码复用

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

Mon, 28 Jul 2025 12:26:34 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react 事件机制、React 生命周期、state 与 props

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现全屏水平垂直居中、宽高为屏幕宽度一半的正方形

题目要点

利用 vw 单位定义宽高，保证正方形且相对视口大小
Flexbox 和绝对定位 + transform 是常用居中方案
重置默认 margin 和设置容器高度保证布局准确
任选方案均可，Flexbox 代码简洁，绝对定位兼容性好

参考答案

一、考察点

掌握 CSS 布局基础知识
熟悉视口单位（vw、vh）的使用
理解水平垂直居中多种实现方式
了解盒模型和尺寸计算

二、参考答案

2.1 需求分析

元素宽度和高度为屏幕宽度的 50%（即 50vw）
元素是正方形，宽高相等
水平和垂直方向均居中显示
兼容主流现代浏览器

2.2 代码实现示例

方法一：使用 Flexbox

<div class="container">
 <div class="square"></div>
</div>

<style>
 html, body, .container {
 margin: 0;
 height: 100vh;
 display: flex;
 justify-content: center; /* 水平居中 */
 align-items: center; /* 垂直居中 */
 }
 .square {
 width: 50vw;
 height: 50vw; /* 保证正方形 */
 background-color: #4CAF50;
 }
</style>

方法二：使用绝对定位 + transform

<div class="square"></div>

<style>
 .square {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 50vw;
 height: 50vw;
 background-color: #2196F3;
 transform: translate(-50%, -50%);
 }
 html, body {
 margin: 0;
 height: 100vh;
 }
</style>

2.3 说明

50vw 表示视口宽度的一半
Flexbox 方案利用容器的弹性布局实现简单居中
绝对定位方案通过 top:50%, left:50% 定位中心点，再用 transform 修正偏移
两种方案均保证元素在视口中央且尺寸为屏幕宽度一半的正方形

三、常见误区或面试陷阱

忽略 viewport 单位，使用百分比 % 宽高导致高度受父元素限制
使用 margin: auto 只实现水平居中，未垂直居中
transform 偏移值写错方向或单位
未重置 html, body 的 margin 和高度，导致布局异常

2. 如何通过 padding-bottom 实现自适应正方形

题目要点

百分比 padding-bottom 是相对于元素宽度计算的
设置宽度，padding-bottom 等于宽度比例即可实现宽高比
纯 CSS 实现响应式正方形，无需 JS 计算
配合 position 及 transform 可实现内部内容居中

参考答案

一、考察点

理解 CSS 盒模型及百分比 padding 的计算规则
熟悉通过内边距（padding）比例实现自适应高度的布局技巧
掌握纯 CSS 无需固定高度实现宽高比控制的方法
了解响应式设计及视口适配相关概念

二、参考答案

2.1 核心原理说明

百分比 padding 的高度计算基于元素的宽度
例如，padding-bottom: 100% 表示内边距底部高度是元素自身宽度的 100%
利用这一特性，设置一个元素的宽度，然后用 padding-bottom 来控制高度，从而实现固定宽高比（正方形为 1:1）
这种方式不依赖固定高度或 JS，纯 CSS 实现响应式正方形

2.2 具体实现方式

<div class="square"></div>

<style>
 .square {
 width: 50vw; /* 宽度为视口宽度的一半 */
 padding-bottom: 50vw; /* 内边距底部为宽度的 100%，实现高度与宽度相等 */
 background-color: #f60;
 position: relative; /* 便于放置绝对定位内容（如文字） */
 }
 /* 如果需要内部内容绝对居中，可添加： */
 .square > .content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
</style>

2.3 使用场景

自适应正方形容器
图片或视频占位框
响应式卡片、图标区域布局

三、常见误区或面试陷阱

误以为 padding 百分比是基于高度计算（实际上是基于宽度）
忽略内容本身不占高度，需要通过 position: relative 和绝对定位解决内容布局
没有设置元素的 width，导致 padding 计算无意义
使用固定 height 反而破坏响应式效果

3. 若要求正方形内嵌图片保持比例且不拉伸，如何实现

题目要点

容器用 padding-bottom 创建自适应正方形
图片使用 object-fit: contain 保持比例且不拉伸
绝对定位图片居中显示，宽高100%填充容器
设置 overflow: hidden 避免溢出

参考答案

一、考察点

理解图片的默认渲染行为及尺寸适配
掌握 CSS 中图片等媒体对象的缩放控制属性（object-fit）
熟悉容器布局，确保图片在固定宽高正方形内自适应显示
了解响应式设计和兼容性考虑

二、参考答案

2.1 核心概念说明

图片默认行为：图片按原始宽高比显示，若强制设置宽高可能导致变形
object-fit 属性：用于控制替换元素（如 img、video）内容的填充方式
object-fit: contain 保持图片比例，完整显示，可能留空白
object-fit: cover 保持比例，填满容器，超出部分裁剪
结合容器尺寸和 object-fit 可灵活控制图片展示效果

2.2 具体实现示例

<div class="square">
 <img src="your-image.jpg" alt="示例图片" />
</div>

<style>
 .square {
 width: 50vw;
 padding-bottom: 50vw; /* 自适应正方形 */
 position: relative;
 overflow: hidden; /* 防止图片溢出 */
 }
 .square img {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 100%;
 object-fit: contain; /* 保持比例且不拉伸 */
 transform: translate(-50%, -50%);
 }
</style>

2.3 说明

使用 padding-bottom 创建正方形容器
position: relative + position: absolute 定位图片，方便居中
图片宽高设为 100%，配合 object-fit: contain 保持原始比例且不被拉伸
overflow: hidden 防止图片超出容器边界显示
可根据需求改为 object-fit: cover 实现填充并裁剪效果

三、常见误区或面试陷阱

不设置 object-fit，直接用 width 和 height 100%，图片可能被拉伸变形
忽略容器定位，导致图片无法居中或布局错乱
未设置 overflow: hidden，图片溢出影响页面布局
误用 background-image 和 background-size，与 img 标签区别不清

4. 怎么理解回流跟重绘？什么场景下会触发？

题库原题：怎么理解回流跟重绘？什么场景下会触发？

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

Mon, 28 Jul 2025 12:14:53 +0000

← 第 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。

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

Mon, 28 Jul 2025 12:07:25 +0000

← 已是第一轮 · 返回本次面经 · 第 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 的键可以是任意值，包括基本类型和对象类型

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

Mon, 28 Jul 2025 11:54:27 +0000

← 第 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 首屏加载的概念与性能指标

首屏加载：用户打开页面到看到页面主要内容（首屏内容）完整渲染的时间

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

Mon, 28 Jul 2025 11:47:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

一、考察点

是否理解 Plugin 在 Webpack 中的作用和工作机制
- Plugin 是 Webpack 最核心的扩展机制之一
是否掌握编写 Plugin 的基本方法和生命周期
- 了解 compiler、compilation、钩子（hooks）等概念
能否结合实际项目场景说明使用插件的案例和目的

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

Mon, 28 Jul 2025 06:07:53 +0000

← 第 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
配合工具检测和团队规范防范

参考答案

一、考察点

理解循环依赖的概念及危害

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

Mon, 28 Jul 2025 06:01:19 +0000

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

三、深拷贝

深拷贝开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

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

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

← 第 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 轮 →

参考答案

考察点

理解模块化和组件化的概念及其在前端开发中的重要性
熟悉常见的模块化规范（如 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）遮挡

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

Mon, 28 Jul 2025 02:44:46 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要聚焦于前端中高级技术深度和实际项目经验的考察。重点涵盖了前端工程化与性能优化（如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）等多个终端运行，并且希望尽可能复用代码，降低开发和维护成本。技术栈选择是一个复杂的决策过程，需要综合考虑项目的业务需求、性能要求、开发效率、团队技术栈、维护成本以及社区生态等多方面因素。

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

Mon, 28 Jul 2025 02:28:18 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

考察点

面试官希望了解你是否具备工程化思维
是否熟悉当前项目所用的脚手架工具及其底层实现原理
是否理解脚手架在项目初始化、规范约定、自动化等方面的作用
是否具备定制或维护脚手架的能力

参考答案

一、常用脚手架工具及我们团队的选择

我们项目主要使用的是：

Vue 项目：使用 @vue/cli、vite 或公司自研的内部模板系统
React 项目：早期使用 create-react-app，后续迁移为 Vite + 自定义模板
自研脚手架：基于 Plop.js、Yeoman、Commander 或 create-* 实现，通过 Node.js 实现项目初始化、目录结构生成、依赖安装、git 初始化等功能

二、脚手架的核心功能

初始化项目结构（生成项目目录和基础文件）
注入标准化配置（eslint、prettier、commitlint、husky、tsconfig等）
自动安装依赖（npm/yarn/pnpm install）
选择模板和功能模块（用户选择功能特性，动态生成对应模块）
自定义交互式命令行（CLI）（使用 inquirer 等库实现配置选择）
生成代码片段/组件（如 plop generate component）

三、脚手架的实现原理

脚手架本质上是基于 Node.js 脚本，通过命令行交互完成初始化和代码生成，主要原理包括：

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

Mon, 28 Jul 2025 02:20:14 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 生命周期、Vue3 API、响应式原理、v-for、事件循环

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 为什么使用
而非

题目要点

<header>是HTML5语义化标签，明确头部区域含义
语义化标签有助于SEO和辅助技术识别
提高代码可读性和维护性，减少依赖类名赋予语义
推荐优先使用语义标签代替无语义的<div>+类名组合

参考答案

考察点

理解HTML语义化标签的重要性及作用
掌握语义化标签对SEO和无障碍的影响
了解语义化标签在开发协作和维护中的优势

参考答案

一、语义化标签的核心概念

HTML5引入了如 <header>、<nav>、<article>、<footer> 等语义化标签，明确表达页面结构和内容含义
语义化标签比普通 <div> 搭配类名更具意义，利于浏览器、搜索引擎、辅助设备等理解页面

二、使用 `<header>` 的优势

明确语义
- <header>表示页面或区块的头部区域，包含标题、导航等信息
- 比 <div class="header"> 直接通过类名赋予语义更标准、易识别
提升可访问性
- 语义化标签被屏幕阅读器等辅助技术识别，帮助视障用户理解页面结构
- <header>使辅助设备快速定位页眉内容，提升用户体验
SEO友好
- 搜索引擎利用语义标签准确抓取页面结构和重点内容
- 语义标签利于内容分类和权重判断，可能提高搜索排名
代码规范与维护
- 语义化标签增强代码自解释性，方便团队协作和代码维护
- 减少对类名、ID等非结构性属性的依赖，代码更简洁清晰

三、使用场景对比

<header>适合定义页面或区块的头部区域
<div class="header">仅作为普通容器，没有内置语义
两者均可通过CSS样式控制外观，但语义化标签具备结构语义

2. SEO和可访问性有何影响

题目要点

语义化标签提升SEO抓取效率和内容权重分配
结构化页面内容，增强搜索引擎对重点信息的识别能力
语义标签是辅助技术识别页面结构的关键，提升可访问性
有助于残障用户快速导航和理解页面
符合无障碍标准，降低法律和合规风险

参考答案

考察点

理解SEO（搜索引擎优化）对网页结构和内容的重要性
掌握语义化标签对搜索引擎抓取的正面影响
了解可访问性（Accessibility）概念及辅助技术如何利用语义标签
能说明如何通过结构优化提升用户体验及业务价值

参考答案

一、SEO影响

语义化标签助力搜索引擎理解页面结构

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

Mon, 28 Jul 2025 02:03:06 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 介绍一下实习项目的业务背景（这块说了蛮久）

题目要点

略

参考答案

略

2. 假如你是一个项目的负责人，面对一个新需求你会如何判断以及决策

题目要点

业务价值与需求背景明确 / 技术可行性与风险评估 / 资源与时间合理估算
多方案设计与优劣比较 / 风险预判及缓解措施
结合团队和业务做权衡决策 / 明确执行计划与责任 / 持续跟进与复盘优化
沟通协调能力和风险管理能力是关键
决策既考虑短期交付，也兼顾长期维护和团队承受能力

参考答案

考察点

评估候选人对需求分析和项目管理流程的理解
探查其在技术可行性、资源评估、风险管理等方面的判断能力
了解候选人如何在多方利益、时间与质量之间做权衡决策
关注其沟通协调和方案落地的思路

参考答案

一、需求理解与评估

明确需求背景和目标
- 充分沟通业务方，理解需求的业务价值、核心目标和痛点
- 判断该需求是新增功能、优化还是技术债清理
技术可行性分析
- 评估现有系统架构、技术栈对该需求的支持程度
- 识别技术难点和潜在风险，如性能、安全、兼容性等问题
资源与时间评估
- 估算开发、测试、上线所需的人力、时间和成本
- 考虑团队现有工作负载，排期合理性

二、方案设计与风险控制

设计多套实现方案
- 比较不同方案的优劣，如技术复杂度、扩展性、维护成本
- 结合业务优先级和技术条件选择最优方案
风险预判与缓解
- 识别潜在风险点，设计应对措施（如技术预研、灰度发布）
- 规划阶段性验收，快速反馈，减少偏差

三、决策与执行

结合业务战略和团队实际作出决策
- 权衡需求价值与资源限制，明确是否优先推动或延期
- 与产品、设计、测试等多方协作，达成共识
推动方案落地
- 制定详细开发计划，分解任务，明确负责人和时间节点
- 跟踪进展，快速解决过程中出现的问题
复盘与优化
- 需求完成后组织复盘，总结经验，优化流程

3. 功能上线后如何判断这个功能上线前后的影响和优化有多少呢

题目要点

明确功能目标和关键评估指标 / 多渠道数据采集与监控
功能上线前后指标对比 / A/B测试验证功能效果
用户反馈与定性分析辅助判断
定位影响原因，制定优化方案
持续监控、复盘和迭代形成闭环
兼顾数据驱动与用户体验

参考答案

考察点

理解功能上线后效果评估的重要性及方法
掌握多维度数据监控和指标分析手段
能结合业务目标设计合理的评估方案
理解A/B测试、用户行为分析、性能监控等工具的应用
关注持续优化与反馈闭环

参考答案

一、明确评估目标和关键指标（KPI）

结合业务目标确定功能上线的核心衡量指标，如用户活跃度、转化率、留存率、错误率等
设计具体可量化的指标体系，保证评估具备科学性和针对性

二、数据采集与监控

利用埋点、日志采集用户行为数据，覆盖点击、浏览、交互等关键操作
结合前端性能监控（如首屏时间、接口响应时间）与错误监控（JS报错、接口失败）
设置告警机制，实时监测异常情况

三、功能上线前后的对比分析

历史对比：将上线前后的关键指标进行趋势对比，分析变化幅度和方向
同类用户对比：如果可行，采用A/B测试，控制组与实验组对比，确保因果关系明确
用户反馈收集：结合用户调查、客服反馈等定性信息辅助判断

四、分析影响及优化空间

识别指标波动背后的具体原因，如性能瓶颈、交互体验问题等
结合用户反馈发现潜在需求或痛点
制定针对性优化方案，优先解决影响最大的瓶颈

五、持续迭代与复盘

将监控和分析形成常态化流程，确保功能优化闭环
定期复盘评估结果，总结经验教训
结合业务目标调整优化策略，持续提升功能效果

4. 有去了解过用户反馈最多的问题或者诉求最强的问题是什么吗

题目要点

略

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

Mon, 28 Jul 2025 01:53:33 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 浏览器渲染过程

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 简单介绍一下你上一段实习中觉得做的比较好的项目

题目要点

略

参考答案

略

2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手

题目要点

理解项目结构和流程是高效开发的基础
先从入口和路由入手，理清全局数据和功能模块
注重调试和测试，减少开发盲点
合理利用团队协作工具提升开发效率
持续学习和总结，快速适应项目迭代

参考答案

考察点

理解典型前端项目的整体结构及模块划分
掌握从项目启动到开发流程的系统思路
能清晰描述如何快速定位入口及关键代码区域
展示合理的开发习惯与代码管理思路
体现对团队协作和版本控制的认知

参考答案

一、典型前端项目结构说明

目录结构
- src/：项目源码，包含页面（Page）、组件（Component）、样式（Styles）、工具函数（Utils）、状态管理（Store）等
- public/ 或 static/：静态资源，如图片、字体、favicon 等
- build/ 或 scripts/：构建相关脚本和配置
- config/：环境配置文件，如开发、测试、生产环境参数
- tests/：单元测试和集成测试代码
- 配置文件如 package.json, .babelrc, webpack.config.js 或 vite.config.js
关键文件
- 入口文件（如 src/main.js、src/index.js）负责挂载应用
- 路由配置文件定义页面导航
- 状态管理文件（如 Vuex、Redux）管理全局状态
- 公共组件库及工具函数模块
- API 接口封装层，统一管理后端请求

二、开发时的切入点及流程

理解业务和需求
- 先明确当前任务目标和业务逻辑
- 查阅需求文档、设计稿和接口文档
定位项目入口
- 从入口文件入手，理清项目启动流程
- 理解路由配置，确定目标页面
代码结构梳理
- 理解页面层与组件层的关系
- 查找关键组件和功能模块的实现
查看状态管理和数据流

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

Mon, 28 Jul 2025 01:45:16 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 响应式原理、Webpack与Vite、https、浏览器渲染过程、浏览器的缓存机制

本轮共 19 道题。答案默认折叠，便于先自行作答。

1. 介绍一下简历中的组件库项目

题目要点

略

参考答案

略

2. 聊聊 vite 和 webpack 的区别

题库原题：聊聊 vite 和 webpack 的区别

题目要点

Webpack：成熟的模块打包工具，功能强大但配置复杂，适合需要高度定制和复杂构建需求的项目。
Vite：现代化的开发工具，提供快速的开发体验和优化的生产构建，适合追求开发效率和现代化特性的项目。

选择 Vite 还是 Webpack 取决于项目的需求和开发团队的偏好。如果重点是开发体验和快速反馈，Vite 是一个很好的选择。如果需要高度定制化和广泛的插件支持，Webpack 可能更适合。

参考答案

Vite 和 Webpack 都是前端打包工具，它们的作用类似，但实现方式和使用方法有所不同。以下是它们之间的一些区别：

构建速度：Vite 的构建速度比 Webpack 更快，因为 Vite 在开发环境下使用了浏览器原生的 ES 模块加载，而不是像 Webpack 一样使用打包后的文件进行模块加载。在 Vite 中，每个模块都可以独立地进行编译和缓存，这意味着它只需要重新编译修改过的模块，而不是整个应用程序。这使得 Vite 开发起来更加高效。
配置复杂度：Vite 的配置相对更简单，因为它无需进行大量的配置，只需指定一些基本的选项就可以开始开发。Webpack 的配置更加复杂，需要针对具体项目进行不同的配置，且需要理解各种插件、Loader 等概念。
生态环境：Webpack 的生态环境更加成熟，在社区中拥有广泛的支持和丰富的插件库。而 Vite 尚处于发展阶段，尽管其已经获得了很多关注，但其生态系统仍然不太完善。
功能特性：Webpack 是一个功能更加全面的打包工具，支持各种 Loader 和插件，可以处理多种类型的文件和资源。而 Vite 的设计初衷是专注于开发环境下的快速构建，因此其对一些高级特性的支持相对较少。

综上所述，Vite 更适合用于开发环境下的快速构建，而 Webpack 则更适合用于生产环境下的复杂应用程序的打包处理。选择使用哪种工具需要根据具体项目需求进行评估。

京东-物流-秋招 · 第 1 轮 · 第一轮

Sun, 27 Jul 2025 15:38:59 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

参考答案

这两个都是HTML5提供的Web存储API，在项目中都有使用过。

最主要的区别是生命周期不同：sessionStorage只在当前浏览器标签页的会话期间有效，关闭标签页后数据就会被清除；而localStorage的数据会持久保存在用户设备上，除非主动删除或者达到存储限制。

作用域方面也不同，sessionStorage的数据只能在当前标签页内访问，不同标签页之间是隔离的；localStorage则可以在同一域名下的所有页面间共享数据。

在实际使用中，sessionStorage适合存储临时的会话相关数据，比如表单的临时保存；localStorage更适合存储用户偏好设置、购物车内容等需要跨会话保持的信息。

8. 除了它们的存储大小区别外，还有哪些不同？

题目要点

事件机制、安全特性、使用场景和数据共享能力等方面存在差异。

参考答案

除了生命周期差异，还有一些其他区别。数据共享机制上，localStorage支持storage事件，当其他页面修改localStorage数据时，当前页面可以监听到这个变化，这在多标签页应用中很有用；而sessionStorage不支持这种跨页面的事件通知。安全性方面，sessionStorage由于其会话特性，数据泄露的风险相对较小。在浏览器兼容性上，两者的支持程度基本一致，都是HTML5的特性。使用场景也有明显区别：sessionStorage常用于单页面应用的状态管理、表单数据的临时保存等；localStorage则用于用户设置、主题偏好、离线数据缓存等需要持久化的场景。在移动端开发中，还需要考虑存储空间限制和清理策略。

字节-社招-6年（3-1） · 第 1 轮 · 交叉面

Sun, 27 Jul 2025 12:21:05 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 3 道题。答案默认折叠，便于先自行作答。

1. 如何理解业务与技术的关系，如何将业务需求转化为技术方案

题目要点

解释业务与技术的相互依赖和促进关系
梳理需求理解到方案设计的完整流程
强调沟通、验证和持续优化的重要性
结合案例体现实际落地思路
警示脱节风险，体现系统思考

参考答案

考察点

● 理解业务与技术的相辅相成关系

● 掌握业务需求分析和技术方案设计流程

● 能将抽象业务目标拆解为具体技术实现路径

● 体现跨部门沟通和协作能力

参考答案

一、业务与技术的关系理解

相辅相成：业务是技术的驱动力，技术是业务落地的支撑。
业务需求为核心：技术方案应围绕业务目标服务，解决实际问题，促进业务增长。
技术赋能业务创新：通过技术提升效率、优化体验、开拓新业务模式。
动态迭代：业务变化带来技术调整，技术创新反哺业务拓展，形成良性循环。

二、将业务需求转化为技术方案的步骤

1. 需求理解与梳理

深入沟通，明确业务背景、目标及关键痛点。
梳理业务流程，明确输入输出及核心功能点。
识别非功能性需求，如性能、安全、可扩展性。

2. 方案调研与评估

研究现有技术栈及解决方案的适用性。
评估技术选型的可行性、成本、风险与团队能力。
结合业务优先级确定技术方案核心方向。

3. 技术方案设计

架构设计：整体技术架构、模块划分、接口设计。
技术细节：选用框架、数据库设计、接口协议、安全机制等。
性能与安全：设计性能优化点和安全防护方案。

4. 方案验证与沟通

原型或PoC验证方案可行性。
向业务团队和相关部门说明方案，获取反馈和支持。
根据反馈调整方案，确保与业务需求匹配。

5. 实施与持续优化

制定详细的开发计划和质量保障措施。
迭代交付，及时根据业务变化调整技术方案。
建立监控和反馈机制，确保方案持续满足业务目标。

三、实际案例示范

针对用户增长业务需求，设计可扩展的用户行为分析系统。
技术团队结合业务需求选用微服务架构，支持快速迭代和多渠道接入。
通过技术方案提升数据处理效率，助力业务决策精准化。

四、常见误区与面试陷阱

❌ 技术方案脱离业务需求，造成资源浪费和低效。
❌ 业务需求不明确，导致方案反复修改或失焦。
❌ 缺少跨团队沟通，信息孤岛影响方案落地。
❌ 忽视非功能性需求，如安全和性能，影响用户体验。

五、总结观点

业务和技术密不可分，技术方案的设计必须紧扣业务目标，基于深入理解的业务需求进行科学规划和实施。通过有效沟通与验证，确保技术方案既满足当前业务，又具备扩展能力，实现技术对业务的最大赋能。

字节-社招-6年（3-1） · 第 1 轮 · 三面&交叉面

Sun, 27 Jul 2025 12:18:23 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 介绍一下主导的业务系统以及相关工作

题目要点

略

参考答案

略

2. 系统如何量化提升业务指标

题目要点

说明指标分类和目标设定方法
描述数据采集和监控流程
强调数据分析和问题洞察能力
介绍方案设计、执行及量化评估手段
提出技术与业务结合的具体措施

参考答案

考察点

● 理解业务指标的定义与分类

● 掌握数据采集、分析和量化的方法

● 熟悉目标设定、方案设计与效果评估流程

● 结合技术手段和产品思维推动业务增长

参考答案

一、业务指标的定义与分类

核心业务指标（KPI）：反映业务目标的关键数据，如用户留存率、转化率、活跃度等。
辅助指标：支持分析业务表现的相关数据，如页面加载速度、点击率、错误率。
指标分层：宏观指标（整体业务）+ 微观指标（细分功能或用户行为）。

二、量化提升业务指标的流程

1. 明确目标指标

根据公司战略和产品定位确定重点指标。
指标需具体、可衡量且可执行（SMART原则）。

2. 数据采集与监控

集成数据埋点和埋点管理工具（如 Google Analytics、自研埋点系统）。
监控关键路径数据，实时获取指标动态。

3. 数据分析与洞察

使用数据分析工具（如 SQL、BI平台）深入挖掘用户行为和业务趋势。
找出指标波动的原因，定位痛点和机会。

4. 方案设计与执行

结合业务和技术设计改进方案，如性能优化、功能迭代、用户体验提升。
制定具体执行计划，分阶段推动落地。

5. 量化评估与反馈

通过A/B测试等手段验证方案效果，避免主观判断。
持续监控指标变化，调整优化策略。

三、技术手段支持

前端性能优化：减少首屏加载时间，提高用户体验，促进留存和转化。
埋点与事件追踪：精准采集用户操作数据，支持业务决策。
监控与告警：及时发现业务异常，保证系统稳定性。
自动化测试和持续集成：保证新功能质量，降低回归风险。

四、案例示例

通过页面性能优化，将首屏时间从5秒降到1秒，用户跳出率下降20%。
利用细粒度埋点监控用户点击路径，发现某环节转化低，优化流程后转化率提升15%。
采用A/B测试验证新推荐算法效果，点击率提升10%。

五、常见误区与挑战

❌ 盲目追求指标数字增长，忽视用户体验和长期价值。
❌ 缺少科学的数据采集和分析，导致数据不准确。
❌ 忽视持续监控和迭代，方案实施后无后续跟进。
❌ 目标不明确或过于宽泛，难以量化和评估。

六、总结观点

系统性量化提升业务指标需要结合明确目标、科学数据采集与分析、合理方案设计、严谨效果评估和持续优化。技术与产品紧密配合，才能驱动业务稳定增长和用户价值提升。

字节-社招-6年（3-1） · 第 1 轮 · 二面

Sun, 27 Jul 2025 12:12:49 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. 讲一下D2C（Design to Code）这个项目

题目要点

阐述 D2C 的概念和目标
说明设计稿到代码的转换流程和关键技术
分析项目架构及技术栈组成
指出面临的挑战与解决方案
强调项目对团队效率和产品质量的提升价值

参考答案

考察点

● 理解 D2C 项目的定位及价值

● 掌握设计稿自动转化为代码的核心技术与流程

● 了解项目中遇到的技术挑战及解决方案

● 能阐述项目架构、自动化程度及实际应用场景

参考答案

一、项目背景与定义

D2C（Design to Code） 是一个致力于将设计稿（如 Figma、Sketch、Adobe XD）自动或半自动转换为前端代码（如 React、Vue、Flutter 等）的技术项目。
目的是大幅提升设计与开发的协作效率，缩短从设计到上线的周期，减少手工编码错误和重复劳动。

二、核心原理与技术流程

1. 设计稿解析

利用设计工具开放的 API 或导出格式（如 JSON、SVG、图层数据）提取设计元素信息。
包括图层结构、样式属性（颜色、字体、布局）、交互定义等。

2. 结构映射与组件识别

将设计图层结构映射为前端组件树，分析布局关系（如 Flexbox/Grid），抽象为对应的代码组件。
识别常用设计元素（按钮、输入框、列表等），映射成对应 UI 组件库元素，便于复用。

3. 代码生成

根据映射关系自动生成对应框架的代码（JSX、Vue SFC、Flutter Widget 等）。
自动写入样式代码（CSS-in-JS、Less、Sass），保证样式还原度。
支持动态交互事件和路由跳转逻辑的基本嵌入。

4. 优化与可维护性保障

生成代码结构清晰、易于阅读和二次开发。
支持设计稿变更自动更新代码，保障设计-开发同步。

三、项目架构与技术栈

前端：基于 React/Vue 实现可视化设计解析和代码展示。
后端：负责设计稿文件解析、复杂转换逻辑和代码模板管理。
辅助工具：利用 AST 解析和模板引擎生成高质量代码。
集成：支持与设计工具插件无缝对接，实现一键转码。

四、技术挑战及解决方案

1. 设计与代码结构差异

设计稿与前端布局模型（盒模型、Flex/Grid）存在差异，需智能转换布局方案。
通过规则引擎和机器学习辅助识别设计意图，提升转换准确率。

2. 样式还原与响应式支持

设计稿静态像素为主，需转换成动态响应式样式。
采用抽象布局单元、断点处理等方法，实现多端适配。

3. 动态交互与状态管理自动化

静态设计向动态代码过渡，自动注入事件处理和状态逻辑，增强可用性。

4. 性能与可维护性平衡

生成代码需避免臃肿冗余，保证性能和后续维护成本。
通过代码模板优化和分层设计解决。

五、项目应用场景与价值体现

提高开发效率：设计师和开发者快速交付，高效协作。
降低人力成本：减少重复手工编码，避免低级错误。
提升设计一致性：保持设计与实现的高度一致，减少偏差。
支持多平台快速迭代：针对 Web、移动端统一输出，便于多端覆盖。

六、常见误区及面试陷阱

❌ 认为 D2C 能完全替代人工编码，实际还需开发者做细节调整。
❌ 忽视设计工具多样性和格式兼容性带来的技术复杂度。
❌ 忽略代码生成后的维护和二次开发难度。
❌ 过度依赖自动化，导致生成代码性能或质量下降。

七、总结观点

D2C 项目是设计与开发深度融合的技术创新，通过自动解析设计稿并生成高质量前端代码，极大提升开发效率和设计一致性。该项目涉及设计解析、智能映射、代码生成和性能优化多个技术环节，虽存在一定技术挑战，但未来有广阔应用前景。

字节-社招-6年（3-1） · 第 1 轮 · 一面

Sun, 27 Jul 2025 12:05:14 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react 渲染机制、react hooks、Webpack与Vite

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 请选择一个最有技术挑战的项目，说明你解决的核心问题、技术选型依据及后续优化空间

题目要点

STAR法则

参考答案

根据自己项目经历，提前挖掘亮点、准备项目

2. 作为前端负责人，在前端基础设施层做了哪些体系化建设

题目要点

从规范、工具链、组件库、监控和协作多维度展开
结合具体措施与实际效果进行阐述
展现管理、技术与团队文化的融合能力
体现对挑战的预判和解决方案

参考答案

考察点

● 考察候选人对前端基础设施的整体认知和架构设计能力

● 了解候选人在团队管理与技术规范制定上的实践经验

● 关注候选人如何通过基础设施提升团队开发效率和产品质量

● 体现对可维护性、可扩展性和技术创新的把控

参考答案

一、前端基础设施体系化建设的核心内容

1. 统一的技术规范与编码标准

制定并推广团队统一的代码规范（如 ESLint、Prettier 规则）
统一命名、目录结构、组件设计规范，确保代码可读性和维护性
定期组织代码评审，强化规范执行和技术交流

2. 构建和自动化工具链搭建

设计统一的构建流程，选用并维护基于 Webpack、Vite 等的构建工具
实现自动化构建、测试、打包、发布流程（CI/CD）
集成自动化测试框架（单元测试、集成测试、端到端测试）

3. 组件库与设计系统建设

搭建和维护通用组件库，提升复用率与一致性
结合设计系统规范，确保视觉与交互体验统一
推动组件库文档化、版本管理和持续迭代

4. 性能监控与质量保障体系

建立前端性能监控（如首屏时间、资源加载、交互响应）
引入错误收集与上报系统，实现线上问题快速定位
建立质量门禁（代码覆盖率、性能阈值、代码扫描）

5. 多端统一与跨团队协作支持

设计跨平台技术方案（Web、移动端、小程序）
制定接口规范和Mock数据方案，保障前后端高效协作
推动微前端或模块化方案，支持多团队并行开发

二、实施效果与价值体现

提升团队开发效率，减少重复工作和沟通成本
保证代码质量和产品稳定性，降低线上故障率
加速产品交付，缩短上线周期
促进团队技术能力成长，构建良好技术文化
支持业务快速扩展，适应多端多业务场景需求

三、可能遇到的挑战与应对策略

团队接受度和习惯调整：通过培训、逐步推行和示范项目降低阻力
工具链维护复杂性：设立专人负责基础设施维护和升级，保障稳定性
组件库与设计系统演进的平衡：定期收集反馈，兼顾灵活性与规范性
性能与稳定性监控数据的解读和应用：建立专门分析流程，结合业务需求制定优化方案

四、总结观点

作为前端负责人，基础设施层的体系化建设是提升团队整体效率和产品质量的关键。通过规范标准、自动化工具、组件库、监控体系及跨团队协作支持，构建稳定且高效的前端研发环境，为业务快速发展提供坚实技术保障。同时，注重团队文化和技术传承，推动持续改进和创新。

字节-抖音短视频-社招-5年 · 第 1 轮 · HR面

Sun, 27 Jul 2025 11:49:10 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 为什么选择前端，你是怎么学前端的，自学前端觉得比较困难的点

题目要点

真实表达学习动机和行业认知
清晰描述学习路径与方法，体现自驱力
主动总结自学难点及解决方案，展示解决问题能力
表现对未来成长的规划和期待

参考答案

考察点

● 面试官希望了解候选人的学习动机和成长路径

● 关注候选人对前端行业的认知及自学能力

● 探索自学过程中的困难及解决方案，反映抗压和问题解决能力

参考答案

一、选择前端的原因

技术的即时反馈与可视化强：前端开发可以快速看到效果，工作成果直观，满足感强。
行业发展迅速，应用广泛：随着互联网和移动端普及，前端技术需求旺盛，职业前景广阔。
结合设计与开发的跨界魅力：前端融合设计、用户体验和工程实现，工作内容丰富多样。
学习曲线友好，入门门槛相对较低：相比后端复杂环境，前端技术栈更容易起步。

二、学习前端的路径与方法

基础知识打牢：从HTML、CSS、JavaScript开始，系统学习语言和浏览器原理。
项目驱动实践：通过小项目练习知识点，逐步积累实战经验。
系统化学习框架和工具：深入学习 Vue、React、Webpack 等主流框架和构建工具。
参与开源和社区：通过阅读源码、提问和答疑，加深理解和扩展视野。
持续跟进新技术：保持学习态度，关注生态变化和新兴技术趋势。

三、自学过程中的困难及应对

1. 知识点多且零散

前端涉及面广（浏览器机制、网络、安全、UI等），容易迷失方向。
解决方法：制定阶段性学习计划，系统化梳理知识体系。

2. 理论与实践脱节

单纯看文档和教程，缺少动手操作，难以消化。
解决方法：边学边做项目，遇到问题及时查阅和总结。

3. 框架与工具更新快

框架迭代频繁，工具链复杂，学习压力大。
解决方法：关注核心原理，不盲目追新，重点掌握主流稳定技术。

4. 调试与性能优化难度高

浏览器兼容、异步机制、性能调优等问题复杂。
解决方法：借助调试工具，多阅读源码和案例，积累经验。

字节-抖音短视频-社招-5年 · 第 1 轮 · 三面

Sun, 27 Jul 2025 11:46:08 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 自我介绍（注意与一、二面的差异化）

题目要点

略

参考答案

略

2. 请重点介绍一个你主导或深度参与的技术项目（非业务需求），如何从0到1推动落地

题目要点

明确项目是“自主发起”，解决了实际“工程难题”
描述了“目标-方案-过程-成果”四个完整阶段
有实际的“技术亮点”可以展开讲解（如 monorepo、适配抽象、构建工具链）
表达出清晰的“主人翁意识”与技术领导力

参考答案

考察点

● 面试官希望了解候选人是否具备“技术主导力”或“技术项目 owner”思维

● 重点考察项目选题是否合理、推进过程是否专业、技术方案是否有深度

● 了解候选人在“从问题识别、调研方案、攻克难点、团队协作、成果评估”全过程中的角色与能力

参考答案

一、项目背景与问题识别

在我负责的公司前端平台中，随着业务的扩展，多个产品线逐渐发展出自己的前端应用，形成了大量重复代码、组件风格不一致、工程维护困难等问题。尤其是在多端部署（H5、微信小程序、企业微信等）场景下，重复建设、逻辑差异、样式割裂等问题尤为突出。

于是我提出建设一套前端基础能力平台化方案，目标是实现：

通用组件与工具库的沉淀与统一
多端适配与平台差异抽象
支持微前端/模块加载的架构演进

该项目在初期并非“业务需求”推动，而是从开发痛点中主动识别问题、提出技术方向并推动落地。

二、方案设计与关键落点

✅ 技术目标拆解

组件与样式平台化
- 设计统一的 UI 规范（基于现有设计稿抽象）
- 使用 monorepo + lerna 管理组件库
- 使用 Storybook + VitePress 建立文档与调试系统
工具函数抽离
- 构建 @common/utils 包，提供统一的日期处理、加密、验证、网络库封装等工具
- 用 TypeScript + 单元测试保障稳定性
构建通用模板/脚手架
- 抽象常用项目模板：H5、小程序、纯组件库
- 提供一键初始化、CI/CD 脚本、lint规范、GitHook 校验等预设
模块注册系统设计

字节-抖音短视频-社招-5年 · 第 1 轮 · 二面

Sun, 27 Jul 2025 10:01:22 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： CSRF攻击、https、浏览器的同源策略、浏览器的缓存机制、盒子模型、全方位解读this、call、apply和bind

本轮共 23 道题。答案默认折叠，便于先自行作答。

1. 自我介绍与项目介绍

题目要点

略

参考答案

略

2. 你在项目中如何优化首屏加载时间

题目要点

清晰解释首屏加载构成和评估指标
梳理优化方向：资源优化、加载顺序、渲染提前
结合实际项目列举优化措施及效果
提醒常见误区，展示对细节的把控能力

参考答案

考察点

● 首屏加载性能优化的全链路能力

考察对加载过程、资源调度、渲染流程等多维度的理解与掌握。

● 实际优化手段的选型和落地能力

考察对首屏加载优化策略在项目中的实际应用和效果反馈。

参考答案

一、首屏加载时间的定义与构成

首屏加载时间指的是从用户发起访问请求到页面关键内容（尤其是首屏可视区域）可交互的时间。
它包括以下几个阶段：

DNS 解析、TCP/TLS 连接
HTML 下载与解析
CSS/JS 加载、阻塞与执行
首屏组件渲染、资源加载与图片显示
浏览器首次 Paint 与可交互（First Contentful Paint / TTI）

二、常见优化策略与实战举例

1. 资源加载优化

Gzip / Brotli 压缩：减少资源体积
使用 HTTP/2 / QUIC：提升多资源并发加载能力
开启 CDN 加速：靠近用户，提高请求速度
精简依赖包：如 tree-shaking、移除未用依赖（如 moment → dayjs）

2. 首屏关键资源优先加载

Critical CSS 提取与内联：减少 CSS 阻塞渲染
示例：使用 webpack 的 critical-css 插件提取首屏样式并内联到 HTML

预加载首屏图片和组件

<link rel="preload" href="/assets/banner.jpg" as="image">


* **合理使用 `async` / `defer` 加载 JS**：避免阻塞 HTML 解析

#### 3. **首屏代码最小化（关键代码提取）**

* **路由懒加载**：非首屏模块按需加载

 ```js
 const About = React.lazy(() => import('./About'));
 ```
* **组件级拆分（如 webpack 的 SplitChunks）**：减少主包体积
* **SSR / SSG / 静态渲染**：预渲染首屏内容，降低白屏时间

#### 4. **骨架屏 + 占位图**

* 使用骨架屏组件在主内容加载前展示占位 UI

 ```html
 <div class="skeleton-loader">...</div>
 ```
* 提高用户感知速度，避免白屏

#### 5. **缓存策略**

* 使用强缓存（Cache-Control）与协商缓存（ETag）
* 使用 Service Worker 做离线缓存，提升重复访问性能

#### 6. **图片优化**

* 使用 WebP、AVIF 等新格式
* 小图 base64 内嵌、大图懒加载
* 多倍图压缩（如用 tinypng 等工具）控制首屏图体积 <200KB

---

### 三、项目实战效果举例（性能指标前后对比）

| 优化项 | 优化前 | 优化后 |
| ------------ | ----- | ----- |
| 首屏加载时间（TTFB） | 1.8s | 0.9s |
| JS包大小 | 1.2MB | 450KB |
| 首屏渲染（FCP） | 3.5s | 1.2s |
| 可交互时间（TTI） | 5.2s | 1.9s |

---

### 四、常见误区与陷阱

* **盲目使用懒加载**：过度懒加载会导致首屏核心内容延迟
* **未合理拆分 vendor 包**：导致主包过大
* **骨架屏布局不一致或闪烁**：影响用户体验

---

### 五、总结

* 首屏优化是系统性工程，涵盖网络传输、资源管理、组件拆分、渲染路径等多环节。
* 应结合业务场景按阶段优化，配合 Lighthouse/Chrome DevTools 实时评估效果。
* 目标是压缩关键资源、减少阻塞、加快首屏渲染并保障体验一致性。

</details>

## 3. 如何识别首屏关键资源 {#question-subjective-9bbab0275c1b}

### 题目要点

* 明确首屏关键资源的定义与分类
* 能列出识别方法：Performance、Lighthouse、Network、Coverage
* 能结合项目给出识别+优化的实际策略
* 有资源优先级调度、渲染阻塞等知识支撑

<details>
<summary>参考答案</summary>

### 考察点

#### ● 识别影响首屏渲染的关键资源<br>
考察候选人对渲染链路和性能瓶颈的理解。

#### ● 熟悉浏览器加载机制与资源优先级调度<br>
考察对 Chrome DevTools、Performance 面板等性能工具的使用能力。

---

### 参考答案

### 一、首屏关键资源的定义

> **首屏关键资源**是指那些**必须在首屏渲染前加载完成**，否则会**阻塞页面首屏展示**的资源。常见类型包括：

- **HTML 入口文件**：解析整个页面结构的根文档
- **CSS 样式表**：CSS 是阻塞渲染的，必须加载后才能绘制页面
- **首屏 JS 脚本**：用于首屏交互或组件逻辑初始化的 JS（例如 React/Vue 渲染逻辑）
- **首屏图片**：Banner、大图等占据首屏核心位置的可见资源
- **字体文件（可选）**：若首屏需展示特殊字体（注意 FOUT 问题）

---

### 二、识别关键资源的方法

#### 1. 使用 Chrome DevTools → Performance 面板

1. 打开页面，F12 → Performance → 开始录制
2. 观察：
 - **Loading 阶段的资源瀑布图**（Network Timing）
 - **Longest Frame Before First Paint**
 - 标出首屏时间点前加载完成的资源，即为关键资源

#### 2. 使用 Chrome DevTools → Coverage 面板

- 识别“实际使用的 CSS/JS”
- 可以看出哪些资源在首屏期间被真正用到，哪些是冗余代码

#### 3. 使用 Lighthouse 报告

- Lighthouse 中的“Diagnostics”项会指出：
 - 阻塞渲染的资源（Render Blocking Resources）
 - Critical Request Chains
 - Unused JS/CSS 提示，帮助精简非关键资源

#### 4. 查看 Chrome DevTools → Network 面板排序

- 按时间排序，查看首屏渲染前加载的资源
- 关注 `Initiator` 列，了解加载来源（HTML、JS 引入、CSS @import）

---

### 三、首屏关键资源识别的原则

| 资源类型 | 是否为关键资源 | 原因说明 |
|--------------|----------------|-----------|
| `index.html` | ✅ | HTML 是渲染入口 |
| `main.css` | ✅ | 阻塞渲染，必须先加载 |
| `main.js` | ✅ | 驱动页面逻辑，渲染主视图 |
| 首页大图 | ✅ | 首屏可见，未加载即白屏 |
| lazy.js | ❌ | 延迟加载，非首屏资源 |
| 用户点击后加载的组件 | ❌ | 用户交互后才需要，不影响首屏 |

---

### 四、如何标记与优化首屏资源加载

#### ✅ 使用 `&lt;link rel="preload"&gt;` 预加载关键资源

```html
<link rel="preload" href="/styles/main.css" as="style">
<link rel="preload" href="/scripts/main.js" as="script">

✅ 合理设置优先级（优先样式、关键 JS）

样式应优先加载，JS 使用 defer 避免阻塞渲染
图片使用 priority 或手动 preload，避免首屏懒加载

✅ 拆分资源、按需加载，非关键资源延后

使用 webpack 拆包、code splitting
配合路由懒加载、图片懒加载，剥离非首屏资源

五、总结

首屏关键资源识别关键在于时机和影响：只看首屏时间前对渲染有影响的资源
工具使用（DevTools Performance / Coverage / Lighthouse）是识别的重要手段
识别后需通过优先加载、资源压缩、预加载、懒加载等手段进行优化

4. 具体通过哪些手段减少关键资源体积

题目要点

清晰分类 JS / CSS / 图片 / 字体 / HTML 各自的体积优化方式
能结合具体工具（Webpack、插件、工具链）给出实操方案
表达对“精简资源体积 = 提升性能体验”逻辑的理解
给出优化前后定量结果更有说服力

参考答案

考察点

● 资源优化能力（代码压缩、依赖精简、图片优化等）

考察候选人对性能优化的掌握是否落到实处。

字节-抖音短视频-社招-5年 · 第 1 轮 · 一面

Sun, 27 Jul 2025 09:47:52 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

考察点

● 理解技术选型的核心因素及其权衡原则

考察对项目需求、团队能力与技术趋势的综合分析能力。

● 掌握技术选型中性能、开发效率、维护性等多维度考虑

考察系统架构设计和项目管理思维。

参考答案

一、技术选型的衡量维度

1. 业务需求匹配度

技术是否满足项目的功能需求、性能要求和扩展性。
是否支持项目特有的场景或复杂逻辑。

2. 团队技术栈和能力

团队是否熟悉该技术，学习成本及培训投入。
技术社区活跃度，文档完善程度，易用性。

3. 性能表现

技术的响应速度、负载能力、资源消耗。
是否支持性能优化方案（如 SSR、缓存策略等）。

4. 生态和兼容性

技术生态是否丰富，有无成熟的第三方库和工具支持。
与现有系统和平台的兼容性。

5. 维护成本与长期可持续性

技术的稳定性和升级频率。
社区支持和企业采用情况，避免技术孤岛。

6. 开发效率

开发周期和上线速度。
工具链和开发体验是否高效。

7. 安全性和合规性

技术在安全防护、隐私保护方面的能力。
是否满足行业合规标准。

二、技术选型的评估流程

需求调研：明确项目功能和非功能需求。
方案调研：收集备选技术方案及案例。
技术预研和验证：通过小型原型测试技术可行性。
成本评估：综合考量开发、维护、培训等成本。
风险分析：识别潜在风险，如社区活跃度、技术稳定性。
决策和方案确定：结合以上评估，选择最优技术方案。

三、总结

技术选型是一个多维度权衡过程，既要满足业务需求，也需考虑团队与生态。
注重长期维护和性能表现，避免盲目追新或仅凭个人偏好。
通过科学的评估流程和数据支撑，做出理性选择。

4. 项目中的性能监控和错误上报讲一下

题目要点

列举关键性能指标及监控方法
说明错误类型、捕获机制和上报流程
强调数据分析与持续优化的重要性
结合实际项目实践进行阐述

参考答案

考察点

● 理解前端性能监控的关键指标和监控手段

考察对用户体验优化和实时监控的认知。

字节-商业化-社招-4年 · 第 1 轮 · 二面

Sun, 27 Jul 2025 09:29:18 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

考察点

● 理解浏览器渲染的全流程

考察从用户输入到最终视觉呈现的各个环节。

● 掌握事件处理、样式计算、布局、绘制和合成机制

考察对浏览器渲染流水线各阶段的深入理解。

● 理解性能瓶颈和优化点

参考答案

一、浏览器绘制一帧的整体流程概览

从用户输入事件触发，到最终屏幕显示，浏览器大致执行以下步骤：

事件处理（Input Handling）
JavaScript 执行（JS Execution）
样式计算（Style Recalculation）
布局计算（Layout / Reflow）
绘制（Painting）
合成（Compositing）
像素呈现（Rasterization & Display）

二、详细流程解析

1. 用户输入事件处理

浏览器捕获用户的输入事件（如点击、滚动、键盘等），将事件放入事件队列。
主线程从事件队列中取出事件，执行对应的事件处理程序（如回调函数）。

2. JavaScript 执行

事件处理回调可能修改 DOM 或样式。
JavaScript 运行在浏览器主线程，操作 DOM 会影响后续渲染。

3. 样式计算（Style Recalculation）

浏览器根据最新的 DOM 结构和 CSS 规则，计算每个元素的最终样式。
可能触发样式树（style tree）的重建或更新。

4. 布局计算（Layout / Reflow）

计算元素的几何信息（大小、位置等），生成布局树（layout tree）。
重新计算会影响元素相对或绝对位置。
这是性能较昂贵的过程，尤其是节点多或频繁触发。

5. 绘制（Painting）

将布局树转换为绘制指令（绘制图层的内容），如颜色、文字、边框等。
生成绘制层（paint layers），具体绘制到图层画布（layer canvas）。

6. 合成（Compositing）

多个绘制层按照层级关系组合（合成）成最终页面。
使用 GPU 加速合成，将图层合并为一张完整的图像。
合成阶段可以通过硬件加速提升性能，避免全部重绘。

7. 像素呈现（Rasterization & Display）

将合成后的图像转换成屏幕像素。
GPU 或显示设备将最终像素渲染到屏幕，完成一帧的视觉呈现。

三、流程图示意


用户输入 → 事件处理 → JS 执行 → 样式计算 → 布局 → 绘制 → 合成 → 屏幕显示

四、优化与注意点

避免频繁触发布局和绘制，减少重排和重绘次数。
使用 CSS3 硬件加速属性（transform、opacity）优化合成性能。
将复杂动画放入合成层，减少主线程压力。
合理分层减少合成开销，避免过度分层。
减少 JavaScript 执行时间，避免阻塞主线程。

9. 追问：requestAnimationFrame（RAF）在哪个阶段执行？为什么它比setTimeout更适合动画

题目要点

明确 RAF 在浏览器渲染流程中“绘制前”执行。
解释 RAF 与浏览器刷新同步，自动节流的机制。
对比 setTimeout，突出 RAF 动画性能和体验优势。
强调实际开发中推荐使用 RAF 实现动画更新。

参考答案

一、requestAnimationFrame 执行阶段

requestAnimationFrame 回调函数执行时机：
RAF 的回调函数会在浏览器开始下一次渲染帧之前执行，即在 浏览器渲染管线中的“绘制（Painting）”之前或合成前的空隙期。
具体来说，RAF 的回调是在浏览器完成一帧的布局（Layout）和样式计算（Style Recalculation）之后，紧接着准备绘制和合成之前触发，保证动画逻辑与渲染同步。

二、为什么 RAF 比 setTimeout 更适合动画

1. 与浏览器刷新频率同步

RAF 会按照屏幕刷新频率（通常是 60fps，即约 16.7ms 一帧）自动调用回调，保证动画平滑且不卡顿。
setTimeout 不与渲染同步，回调可能在任意时刻执行，导致动画帧率不稳定甚至丢帧。

2. 自动节流和性能优化

浏览器在后台标签页会自动暂停 RAF 调用，节省资源；而 setTimeout 仍然会尝试执行，浪费性能。
RAF 允许浏览器合并多次绘制请求，提升性能。

3. 减少视觉撕裂

由于 RAF 在绘制之前触发，能保证动画状态在绘制前更新，减少视觉撕裂和跳帧现象。
setTimeout 可能导致更新与渲染不同步，画面不连贯。

三、总结

特点	requestAnimationFrame	setTimeout
执行时机	渲染帧开始前（绘制前）	指定时间后，非渲染同步
帧率同步	与显示器刷新率同步，平滑动画	不保证同步，可能导致跳帧
性能优化	后台标签页自动暂停，节约资源	即使后台也运行，浪费性能
视觉效果	减少撕裂，动画更流畅	易出现撕裂和卡顿

10. 在布局（Layout）和绘制（Paint）阶段，浏览器如何避免不必要的重排（Reflow）和重绘（Repaint）

题目要点

明确重排与重绘的区别和性能影响
介绍浏览器批量更新、延迟计算和图层合成机制
结合实例说明如何避免强制同步布局
总结开发中避免不必要重排重绘的具体技巧和建议

参考答案

考察点

● 理解重排和重绘的区别及性能影响

考察对浏览器渲染优化关键环节的掌握。

字节-商业化-社招-4年 · 第 1 轮 · 一面

Sun, 27 Jul 2025 09:13:11 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 全方位解读this、作用域链与闭包、事件循环、call、apply和bind、前端存储、react hooks、react 渲染机制、React函数组件更新

本轮共 25 道题。答案默认折叠，便于先自行作答。

1. 讲一下你平常使用的React Hooks

题目要点

熟练掌握常用 Hook（useState/useEffect/useRef/useMemo/useCallback/useContext）
能结合实际项目说明每个 Hook 的使用动机和实现效果
理解 Hook 的核心机制（闭包陷阱、依赖数组规则、执行时机等）

参考答案

考察点

● 理解 React Hooks 的基本使用场景及原理

面试官关注候选人是否掌握了常用 Hook 的使用规范与时机。

● 能否结合项目实际表达 Hooks 的应用能力

考察是否具备将 React 函数组件与 Hooks 结合的实际经验与思维能力。

参考答案

一、常用 React Hooks 介绍

1. `useState` —— 管理组件内部状态

功能：定义响应式的本地状态。
典型使用场景：表单输入值、按钮开关、局部 UI 状态等。
示例：

const [count, setCount] = useState(0);

2. `useEffect` —— 副作用逻辑处理

功能：用于处理副作用逻辑，如数据请求、DOM 操作、订阅事件等。
依赖数组决定副作用执行时机。
常见场景：
- 页面初始化请求数据（空依赖数组）
- 监听某个状态变化触发逻辑（依赖项更新）
- 组件卸载时清理订阅（返回 cleanup 函数）

useEffect(() => {
 const id = setInterval(() => {
 console.log('tick');
 }, 1000);
 return () => clearInterval(id);
}, []);

3. `useRef` —— 获取 DOM 或存储跨渲染变量

功能：可以持久保存可变值而不触发组件重新渲染；或获取 DOM 元素引用。

字节-社招-1年 · 第 1 轮 · 一面

Fri, 25 Jul 2025 08:13:19 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 事件冒泡、事件捕获、事件委托、浏览器的缓存机制、组件通信、异步组件

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 实现数组里的拍平数组本身的拍平

题目要点

递归遍历数组并合并结果。
判断元素类型是否为数组。
结合ES6 flat方法提升效率。

参考答案

考察点

● 理解递归与数组操作

考察候选人对递归处理嵌套数据结构的能力。

● 掌握ES6及新特性（如flat）

能结合不同方案解决扁平化问题。

参考答案

/**
 * 递归实现数组拍平
 * @param {Array} arr - 待拍平数组，可能嵌套多层
 * @returns {Array} - 扁平后的数组
 */
function flatten(arr) {
 let result = [];
 for (const item of arr) {
 if (Array.isArray(item)) {
 result = result.concat(flatten(item));
 } else {
 result.push(item);
 }
 }
 return result;
}

或者使用ES6内置方法（只拍平一层）：

const flatOnce = arr => arr.flat();

ES2019+ 支持深度拍平：

腾讯-CDG-暑期实习 · 第 1 轮 · 一面

Fri, 25 Jul 2025 07:46:26 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 22 道题。答案默认折叠，便于先自行作答。

1. 编写一个函数解析URL，提取其中的协议、域名、路径和查询参数

题目要点

URL 结构 / URL API 使用 / 查询参数处理 / 错误处理

参考答案

考察点

● 理解 URL 结构及其组成部分

面试官关注候选人是否熟悉 URL 的协议（scheme）、域名（host）、路径（path）、查询参数（query）等基本组成。

● 掌握字符串处理和正则表达式技巧

是否能用合适的方法提取各部分信息。

● 能写出健壮且兼容性好的解析函数

考虑边界条件和异常输入。

参考答案

原理说明

URL 由以下几部分构成（简化版）：


协议://域名\[:端口]/路径\[?查询参数]\[#锚点]

协议（scheme）：如 http、https、ftp 等；
域名（host）：主机名或 IP 地址；
路径（path）：服务器资源路径；
查询参数（query）：key=value 形式，多个参数用 & 分隔。

解析时重点提取协议、域名、路径和查询参数。

核心代码示例（JavaScript）

function parseURL(url) {
 try {
 const urlObj = new URL(url);

 // 提取协议，去掉末尾冒号
 const protocol = urlObj.protocol.replace(':', '');

 // 域名（包含端口，如果有）
 const host = urlObj.host;

 // 路径
 const path = urlObj.pathname;

 // 查询参数转成对象
 const queryParams = {};
 urlObj.searchParams.forEach((value, key) => {
 queryParams[key] = value;
 });

 return {
 protocol,
 host,
 path,
 queryParams,
 };
 } catch (error) {
 throw new Error('Invalid URL');
 }
}

使用示例

const url = 'https://www.example.com:8080/path/to/page?name=alice&age=25';
const result = parseURL(url);
console.log(result);

/*
{
 protocol: "https",
 host: "www.example.com:8080",
 path: "/path/to/page",
 queryParams: {
 name: "alice",
 age: "25"
 }
}
*/

常见误区或面试陷阱

误区一：使用正则解析复杂 URL

正则难以覆盖各种边界情况，不建议复杂场景使用；
推荐使用浏览器内置的 URL 类。

误区二：忽略端口号

域名部分可能包含端口，直接取 hostname 会缺失端口。

误区三：查询参数未统一处理

查询参数可能重复，需根据需求选择保存方式（这里简单取最后一个值）。

总结回顾

解析 URL 推荐使用原生 URL API，简洁且兼容性好。重点提取协议、域名（含端口）、路径和查询参数，并把查询参数转换为对象方便后续使用。

腾讯-音乐 · 第 1 轮 · 二面

Fri, 25 Jul 2025 07:26:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. 讲一下“智慧医疗系统”项目背景、目标以及你主要负责的模块

题目要点

结合自己简历上的一个亮点项目准备

参考答案

结合自己简历上的一个亮点项目准备

2. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

题库原题：什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

题目要点

响应式设计（Responsive Design）是一种网页设计方法，旨在使网页在各种设备和屏幕尺寸上都能提供良好的用户体验。响应式设计通过使用流式布局、弹性网格和媒体查询，使得网页能够根据不同的设备特性（如屏幕大小、分辨率、方向等）自动调整其布局和内容。

响应式设计的基本原理

流式布局（Fluid Layouts）：
- 使用相对单位（如百分比、vw、vh）而不是绝对单位（如像素），使得网页布局能够根据容器的宽度自动调整。例如，使用百分比设置宽度，可以让列宽度随着屏幕尺寸的变化而变化。
弹性网格（Flexible Grid Systems）：
- 利用网格系统设计布局，将页面划分为多个灵活的区域。这些区域能够根据屏幕尺寸调整大小，从而实现不同设备上的适配。
媒体查询（Media Queries）：
- 使用 CSS 媒体查询，根据设备的特性（如宽度、高度、分辨率等）应用不同的样式规则。媒体查询可以针对不同的屏幕尺寸、方向（横向或纵向）等条件设置样式。

如何实现响应式设计

使用流式布局：
- 在 CSS 中使用相对单位（如 %, em, rem, vh, vw）设置宽度和高度。例如：
```
.container {
 width: 80%; /* 宽度为容器的 80% */
}
```

利用弹性网格系统：

创建一个弹性网格布局，可以使用 CSS Grid 或 Flexbox。例如，使用 Flexbox：

.container {
 display: flex;
 flex-wrap: wrap; /* 自动换行 */
}
.item {
 flex: 1 1 300px; /* 自动调整宽度，最小宽度为 300px */
 margin: 10px;
}

编写媒体查询：

腾讯-音乐 · 第 1 轮 · 一面

Fri, 25 Jul 2025 07:17:59 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

参考答案

考察点

● CSS 动画相关属性与原理掌握

面试官希望了解候选人是否掌握 CSS 动画的基本实现方式，包括 transition、animation、关键帧、补间函数等。

● 能结合项目场景举例说明

不仅要懂 API，更重要的是知道什么时候使用、为什么使用，是否有性能考量和交互体验意识。

● 对动画效果的性能与体验理解

是否清楚哪些动画对性能影响大，哪些动画适合用 CSS 实现，如何避免卡顿或丢帧。

参考答案

原理说明

一、CSS 动画的实现方式

CSS 提供了两类动画机制：

1. 过渡动画（transition）

通过 transition 属性定义在样式变更时自动补间的动画：

.button {
 transition: all 0.3s ease-in-out;
}

特点：

腾讯云-实习 · 第 1 轮 · 二面

Fri, 25 Jul 2025 05:48:41 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 二面，以实际场景、设计架构出发，考察候选人的综合知识和深度

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 描述一个你解决的复杂性能优化案例（指标提升与具体手段）

题目要点

按照START法则来讲解

参考答案

结合自身项目经历来说

2. React/Vue框架设计思想对比（如数据绑定、虚拟DOM）

题目要点

React/Vue/设计思想/双向绑定/单向数据流/虚拟DOM/Fiber/Proxy/模板编译

参考答案

一、考察点

是否理解 React 和 Vue 的设计理念与核心架构区别
是否能准确比较两者在数据绑定、组件化、更新机制上的异同
是否理解虚拟 DOM 的实现方式及两者的优化策略
是否能结合实际项目场景，选择合适的框架思路

二、参考答案

1.1 核心设计思想对比

✅ 一、框架理念对比

维度	Vue	React
核心理念	渐进式框架，关注视图层	函数式 + 声明式 UI，构建 UI 的库
学习曲线	简洁、直观、HTML+JS 分离	更偏工程化，需要理解 JSX、Hooks
模板机制	模板语法（HTML-like） + 指令（v-xxx）	使用 JSX 全部由 JS 描述 UI

✅ 二、数据绑定机制

🔹 Vue

使用响应式系统（Vue2 的 Object.defineProperty，Vue3 的 Proxy）；
支持 双向绑定（如 v-model）；
模板中变量变化会自动更新视图，开发体验友好。

🔹 React

数据是不可变状态（immutable state）；
单向数据流（父 → 子）；
利用 setState() 或 useState() 触发重新渲染；
更强调“以状态驱动视图”，需要手动绑定与更新。

✅ 三、虚拟 DOM 实现与 Diff 策略

Vue

自主构建 Virtual DOM（与模板语法结合）；
Vue2 使用双端比较 diff 算法；
Vue3 引入 静态提升 + Block Tree + 最长递增子序列（LIS），减少不必要 patch；
编译优化层更强，template 更容易静态分析。

React

以函数式组件为主，使用 JSX 构建虚拟 DOM；
使用 Fiber 架构重构更新机制，实现异步可中断渲染；
更新优先级调度（如 startTransition）是核心优势之一；
Diff 算法基于同层比较 + key 优化，机制稳定。

✅ 四、组件设计与状态管理

对比项	Vue	React
状态管理	Vuex（Vue2） / Pinia（Vue3）	Redux / Context API / Zustand 等
生命周期	Options API（Vue2）/ Composition API（Vue3）	类组件生命周期 / 函数组件 Hooks
组件通信	props / emit / provide/inject	props / context / props drilling

3. React Hooks闭包陷阱的产生原因？

题目要点

React Hooks/闭包陷阱/useEffect/useRef/setInterval/函数式更新/stale closure

腾讯云-实习 · 第 1 轮 · 一面

Fri, 25 Jul 2025 02:54:17 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 一面，更多考察的是八股文的基础知识

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 什么是 HTML 语义化？

题库原题：什么是 HTML 语义化？

题目要点

先看下什么是HTML：

参考答案

先看下什么是HTML：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

那么如何理解 Web 语义化？

通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。

单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等。

但是为什么我们只写HTML在浏览器中不同的标签也是有不同的样式呢？

那是因为各个浏览器都自带的有相应标签的默认样式，为了方便在没有设定样式的情况下友好的展示页面。

良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。

为什么要使用语义化标签？

有伙伴会认为，我用DIV+CSS也能做出来一样的效果，虽然单纯看实现效果，两者并没有什么区别。

但是页面不止是给人看的，机器也要看爬虫也要看，网页结构更清晰方便开发维护。

特别是在网络或其他原因页面样式文件丢失的时候，良好语义结构组成的页面，肯定比全是div的页面对用户更友好。

总结下语义化的优点：

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
有利于构建清晰的机构，有利于团队的开发、维护

2. CSS盒模型、Flex布局与Grid布局的区别及适用场景

题目要点

CSS盒模型/box-sizing/Flex布局/Grid布局/一维 vs 二维/布局适用场景/页面结构设计

参考答案

一、考察点

是否掌握 CSS 中盒模型的基本概念及布局行为
Flex 与 Grid 的本质区别及使用场景是否清晰
能否结合实际 UI 场景选择最合适的布局方式
是否理解布局系统与页面结构解耦的设计思想

二、参考答案

1.1 原理说明

✅ 一、CSS 盒模型（Box Model）

定义：所有 HTML 元素都可以看作一个矩形盒子，由以下四层组成：

百度-百度云-校招 · 第 1 轮 · 一面

Thu, 24 Jul 2025 15:06:51 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试注重基础知识的掌握与表达，涵盖了前端语言、框架原理、计算机基础、网络协议、数据库设计、加密安全等内容，兼顾技术深度与广度。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 面向对象和面向程序设计的主要区别

题目要点

面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；

参考答案

面向过程以过程为中心，强调顺序执行逻辑，适合小型程序；
面向对象以对象和行为抽象为中心，强调封装、继承、多态，适合复杂系统的可维护性与复用性设计。

2. 面向对象的三大特性

题目要点

封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。

参考答案

封装隐藏内部实现、继承提高复用性、多态通过统一接口实现行为差异，三者是构建大型系统的基础。

3. 开发的过程中你用到过哪些设计模式？

题库原题：开发的过程中你用到过哪些设计模式？

题目要点

设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。

参考答案

设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。

以下是一些常用的设计模式：

单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点来获取该实例。
工厂模式（Factory）：通过工厂方法创建对象，而不是直接使用new操作符。这样可以隐藏具体实现，并根据需要创建所需类型的对象。
观察者模式（Observer）：定义了一种一对多的依赖关系，当一个对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。
装饰器模式（Decorator）：动态地将责任附加到对象上。通过将对象包装在装饰器对象中，可以在运行时为对象添加新的行为。
策略模式（Strategy）：定义了一系列算法，将每个算法封装起来并使它们可以相互替换。策略模式可以让算法独立于客户端而变化。
适配器模式（Adapter）：将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不匹配而无法一起工作的类可以协同工作。

每个设计模式都有其特定的应用场景和优缺点，可以根据具体情况来选择使用。设计模式可以提高代码结构的灵活性、可维护性和可扩展性，并促进重用和解耦。然而，需要根据实际需求慎重选择和应用设计模式，避免过度设计或不必要的复杂性。

4. JavaScript 中引用数据类型和基本数据类型

题目要点

基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。

参考答案

基本类型包括 Number、String 等，按值传递；引用类型如 Object、Array 按地址传递，赋值为浅拷贝。

5. 谈谈对Vue中双向绑定的理解

题库原题：谈谈对Vue中双向绑定的理解

题目要点

Vue中的双向绑定是其核心特性之一，它极大地简化了数据在视图（View）和模型（Model）之间的同步过程。双向绑定意味着当数据发生变化时，视图会自动更新以反映这些变化，反之亦然，用户在视图上的操作（如输入）也会自动更新到数据中。

实现原理

Vue的双向绑定主要依赖于其响应式系统（Reactivity System）和模板引擎（Template Engine）。

响应式系统：Vue使用Object.defineProperty（在Vue 3中使用了Proxy）来劫持（或说“代理”）对象的getter和setter。当组件的data中的属性被访问或修改时，Vue会拦截这些操作，并执行相应的依赖更新逻辑。这样，Vue就能追踪到数据的变化，并在需要时更新视图。
模板引擎：Vue的模板引擎使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据上。当数据变化时，Vue的模板引擎会重新渲染模板，生成新的虚拟DOM树，并通过高效的DOM diff算法更新真实的DOM，以反映数据的最新状态。

参考答案

一、什么是双向绑定

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子

百度-百度云-校招 · 第 1 轮 · 三面

Thu, 24 Jul 2025 15:06:51 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 三面偏重项目经历、思维深度与工程解决方案，兼顾产品理解与算法能力。

本轮共 6 道题。答案默认折叠，便于先自行作答。

1. 讲一下之前的实习经历，主要负责什么工作，你们团队是做什么的？

题目要点

在回答实习经历时，可以遵循： “团队是做什么的 → 自己负责了什么 → 过程中遇到的挑战 → 最终的结果和成长”。这样既能让面试官清楚地看到候选人的贡献，也能体现出对团队目标的理解和自身成长路径的清晰度。

要不要我帮你准备几个可直接套用的实习经历表述范例，比如业务团队和前端基础设施团队两个版本？

参考答案

这个问题本质上考察的是候选人能否清晰表达实习经历的价值，以及是否能将个人的工作与团队目标联系起来。回答时既要避免流水账式的叙述，也要避免过度拔高，而是重点体现做过什么、为什么做、产生了什么影响。

回答思路

1. 团队定位与职责

先交代团队是做什么的，比如：

是否负责某条具体业务线（例如地图、金融、电商、内容平台）；
是否是基础架构团队（组件库、工程化平台、性能优化、监控体系）；
团队的核心目标是什么（提升用户体验、提升研发效率、支撑业务增长）。

这样能让面试官快速理解环境。

2. 个人负责的工作

描述时可以抓住几个关键词：

核心任务：负责开发某个功能模块、参与前端组件封装、接入监控埋点、优化性能等；
协作方式：是否需要和后端、测试、设计配合，是否参与需求评审或接口联调；
挑战与亮点：是否遇到过性能瓶颈、复杂交互、数据量大等问题，是否提出了改进方案。

避免简单说“写页面、改 bug”，而是强调“通过实现某个功能/优化某处性能，解决了某类问题”。

3. 收获与成长

最后点出在实习期间的成长：

是否熟悉了前端项目的完整研发流程（需求 → 开发 → 测试 → 上线 → 复盘）；
是否积累了在团队协作、代码规范、工程化工具上的经验；
是否提升了技术能力，比如掌握了某些框架或优化手段。

2. 在工作中遇到过什么问题，是怎么解决的？

题目要点

这个问题的最佳回答路径是： “提出一个具体问题 → 说明如何分析定位 → 阐述解决过程和思考 → 总结结果和反思”。重点不是问题有多难，而是展现出遇事冷静分析、推动落地并能沉淀经验的能力。

要不要我帮你列几个可以直接在面试里使用的典型案例场景，比如“性能优化”、“构建优化”、“协作问题”三类？

参考答案

这个问题考察的是候选人的问题意识、分析能力、解决路径和复盘能力。面试官关注的不是问题本身多么“高大上”，而是能否体现出逻辑清晰、方案合理、结果正向。

百度-百度云-校招 · 第 1 轮 · 二面

Thu, 24 Jul 2025 15:06:51 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

参考答案

输出 [0, 2, 4, 6, 8]。构造一个长度为 5 的数组，并通过索引乘以 2 填充。

美团-优选-校招 · 第 1 轮 · 一面

Tue, 22 Jul 2025 09:24:00 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识、项目经验以及问题解决能力。

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 介绍一下你参与过的一个重要项目，包括项目背景、目标、技术栈以及你的角色和主要职责。

题目要点

该题是主观型问题，没有唯一标准答案。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
建议答题结构：首先概括项目，然后详细阐述项目背景、目标、技术栈，最后具体说明个人角色、职责与贡献。

参考答案

我的一个重要项目是"企业级智能客服系统前端优化与重构"。这个项目主要目标是提升现有客服系统的用户体验和性能，解决老旧技术栈带来的开发维护效率低下问题，并支持后续功能迭代。

项目背景是，公司原有的客服系统基于jQuery和少量原生JS开发，代码耦合度高，组件复用性差，加载速度慢，且难以适应移动端多渠道接入的需求。用户反馈系统卡顿、响应慢，客服人员操作效率受影响。因此，我们团队决定对前端进行一次彻底的优化与重构，旨在将其升级为一套现代化、高性能、易于扩展的Web应用。

我在这个项目中担任核心前端开发，主要职责包括：参与技术选型与架构设计讨论；负责核心模块（如聊天窗口、工单管理、智能问答）的组件化开发和性能优化；协调前后端接口联调；编写单元测试和端到端测试；以及进行线上问题的快速响应和修复。在技术栈上，我们选择了React作为主框架，配合TypeScript进行类型管理，使用Redux进行状态管理，Webpack进行模块打包，并引入Ant Design作为UI组件库，以加速开发效率并保证UI一致性。

具体来说，我主导了聊天模块的重构，将其从原来复杂的DOM操作和回调函数地狱，改造为基于React组件和Hooks的声明式UI。通过引入虚拟列表技术，解决了海量消息导致页面卡顿的问题，使得聊天记录即使达到上万条也能保持流畅滚动。此外，我还优化了消息发送机制，利用WebSocket实现了实时消息推送，减少了轮询开销。在性能方面，通过代码分割、图片懒加载等手段，将首屏加载时间从原来的8秒优化到2秒以内。整个重构过程不仅提升了系统的稳定性和用户满意度，也大大降低了后续功能开发的门槛和时间成本，为团队技术栈升级和业务发展奠定了坚实基础。

2. 在项目中，有没有遇到过什么技术难题？你是如何解决的？

题目要点

该题是主观型问题，没有唯一标准答案。
面试官主要考察答题者的技术深度、问题解决能力、逻辑思维和学习能力。
建议答题结构：首先描述一个具体的技术难题，然后阐述你分析问题、寻找解决方案的过程，最后说明解决方案的细节、效果和你的思考。

参考答案

在之前负责的"企业级智能客服系统前端优化与重构"项目中，我们遇到了一个比较棘手的技术难题，就是前端内存占用过高导致页面卡顿和崩溃的问题。

这个系统有一个核心功能是聊天记录展示，用户可能会长时间使用，导致累积大量消息。最初的版本，每条消息都是一个独立的DOM节点，当消息数量达到几千甚至上万条时，DOM节点数量急剧增加，导致浏览器内存占用飙升，页面滚动变得非常卡顿，甚至在一些配置较低的设备上直接崩溃。用户反馈非常强烈，严重影响了客服人员的工作效率。

为了解决这个问题，我首先进行了性能分析，通过Chrome开发者工具的Performance和Memory面板，确认了是DOM节点过多和重复渲染导致的内存泄漏和性能瓶颈。随后，我开始研究前端长列表的优化方案，主要考察了**虚拟列表（Virtual List）**技术。虚拟列表的核心思想是只渲染可视区域内的DOM元素，非可视区域的元素进行回收复用，从而大大减少DOM数量。

具体实施时，我引入了一个成熟的虚拟列表库，并根据项目需求对其进行了定制化开发。首先，需要计算每个列表项的动态高度，因为消息内容可能长短不一，包含图片、表情等不同元素。我采用了一种策略：在首次渲染时估算高度，并在图片加载完成后或内容变化时动态调整。其次，我设计了"缓冲区域"，即在可视区域上下各多渲染一定数量的元素，以保证用户快速滚动时的流畅体验，避免出现白屏。最后，我优化了数据加载逻辑，当用户滚动到列表底部时，只加载下一页数据并追加到虚拟列表的数据源中，而不是重新渲染整个列表。

通过实施虚拟列表，我们将聊天窗口的DOM节点数量从数万个降低到稳定在几十个到一百个之间，极大地减少了内存占用。实际测试显示，即使加载十万条消息，页面也能保持流畅滚动，响应速度显著提升。这个方案不仅解决了当前的性能痛点，也为系统后续的消息富文本支持、历史记录加载等复杂功能提供了坚实的基础，避免了未来可能出现的类似问题。整个过程中，我学到了如何深入分析前端性能瓶颈，以及如何选择和应用合适的优化技术来解决实际问题。

3. 如果项目中的 token 被窃取了，你会采取哪些措施来应对？

题目要点

该题是主观型问题，没有唯一标准答案。
面试官主要考察答题者对安全问题的认知、应急响应能力和系统性思考。
建议答题结构：首先说明 token 被窃取的危害，然后从"发现-应对-预防"三个层面阐述具体措施，最后强调持续安全防护的重要性。

参考答案

当项目中的 token 被窃取，这无疑是一个严重的安全事件，因为它可能导致用户身份被冒用，数据泄露，甚至对系统造成进一步的破坏。我的应对措施会从紧急响应、事后恢复和长期预防三个层面展开。

首先是紧急响应和止损。 一旦发现 token 存在被窃取的风险或已确认被窃取，最核心的措施是立即强制所有用户的 token 失效或重置。这可以通过后端来实现，比如在数据库中将相关 token 标记为无效，或者更新用户会话状态，迫使其重新登录。同时，我会立即通知受影响的用户（如果可以定位到），告知他们 token 失效并要求重新登录，并建议他们检查个人信息是否有异常。在此期间，还需要暂停或限制可疑IP地址或异常行为的访问，以阻止攻击的进一步扩散。例如，如果发现某个账号在短时间内有大量异常登录尝试或数据请求，应立即锁定该账号并通知用户。

其次是事后恢复与溯源。 在完成紧急止损后，需要立即展开详细的调查和分析，以确定 token 是如何被窃取的，攻击的范围有多大，以及是否有数据泄露或系统被篡改的证据。这包括：

日志分析：仔细检查服务器访问日志、应用日志和安全日志，查找异常的登录行为、API调用、IP地址或用户代理信息。重点关注 token 签发、刷新和验证的日志。
代码审计：对可能存在安全漏洞的代码进行审查，例如是否存在XSS漏洞导致前端窃取，或者后端存储、传输 token 的方式是否安全。
用户影响评估：评估有多少用户受到影响，以及可能泄露了哪些数据。根据评估结果，制定更详细的恢复计划，例如是否需要回滚某些操作，或者向受影响用户提供进一步的帮助。

最后是长期预防措施。 针对这次事件暴露出的问题，我们需要采取一系列措施来增强系统的整体安全性，防止类似事件再次发生：

美团-优选-校招 · 第 1 轮 · 二面

Tue, 22 Jul 2025 09:24:00 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 为什么大二就开始实习呢？当时是怎么考虑的？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先说明实习的初衷和驱动力，然后结合个人成长和职业规划阐述实习带来的收获和影响，最后可以适当提及对未来发展的思考。

参考答案

其实，我选择在大二就开始实习，主要是出于对前端开发浓厚的热情和对实践经验的渴望。当时在学校学习理论知识时，我逐渐意识到，真正的项目开发与课堂学习存在很大差异。我非常希望能够尽早接触到真实的项目环境，了解企业级开发的流程、规范以及团队协作的方式。

我的考虑是多方面的。首先，我想通过实习来验证自己所学知识的实用性，并在实际工作中发现自身的不足，从而有针对性地提升技能。其次，我相信尽早融入职场能够帮助我更好地理解行业需求，明确未来的职业发展方向。例如，在第一个实习项目中，我参与了一个电商后台管理系统的开发，亲身体验了从需求分析到功能上线的全过程，这让我对前端开发的整体链路有了更深刻的理解，也意识到代码质量、模块化和组件化在大型项目中的重要性。这段经历不仅提升了我的编码能力，也让我学会了如何与产品、设计、后端团队高效沟通协作。可以说，大二的实习对我而言是一个非常重要的转折点，它让我更早地将理论与实践结合，为后续的学习和职业发展打下了坚实的基础。

2. 在实习过程中，有没有发现自己对前端的理解和之前在学校学习时有什么不同？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：从理论与实践、个人能力成长、团队协作与项目流程、以及对行业理解等几个方面进行对比和阐述。

参考答案

在实习过程中，我对前端的理解确实发生了很大的转变，与之前在学校学习时有了显著的不同。在学校，我们更多地关注理论知识、算法和数据结构，以及一些基础框架的用法，代码往往是为了实现某个功能点而存在，相对独立且注重单一技术点的掌握。比如，我们可能会花很多时间去学习React的生命周期、Redux的状态管理原理，但很少有机会将其应用到真实的、复杂的业务场景中。

然而，实习让我意识到，前端开发远不止写代码那么简单。首先，理论与实践的差异：在实际项目中，需要考虑的不仅仅是技术实现，更要关注业务需求、用户体验、性能优化、代码可维护性等多个维度。我学到，一个"好"的解决方案，不仅要能跑，还要易于维护、易于扩展。例如，在学校里写组件可能只关注功能实现，但在实习中我学会了如何设计可复用、可配置的通用组件，并考虑其在不同业务场景下的兼容性。其次，团队协作与项目流程的重要性远超我的预期。在学校，我们更多是独立完成作业，而在公司，一个项目是多人协作的成果，需要频繁地与产品经理沟通需求，与设计师确认交互，与后端工程师对接接口。我学会了如何通过Code Review、Git工作流来保证团队代码质量和开发效率。

最后，我对前端的广度和深度有了更全面的认知。之前可能觉得前端就是"写页面"，现在才发现它涉及性能优化、跨端开发、工程化、自动化测试、前端安全等诸多领域。实习让我从一个"代码实现者"逐渐向一个"问题解决者"转变，开始更系统地思考如何构建一个高质量、高效率、可持续迭代的前端应用。这让我更加明确了未来学习和发展的方向，也激发了我对前端技术更深层次探索的兴趣。

3. 为什么选择前端开发这个方向？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：可以从个人兴趣、行业前景、技术特性、以及早期学习或项目经历等方面切入，阐述选择前端的理由。

参考答案

我选择前端开发这个方向，主要是基于多方面的考虑和个人兴趣的驱动。最初接触编程时，我被前端所能实现的直观、可见的用户界面深深吸引。相对于后端更偏向逻辑和数据处理，前端能够将代码立即转化为用户可以直接交互和感知的视觉呈现，这种即时反馈的成就感对我来说非常重要。我喜欢通过自己的代码，让用户能够流畅、舒适地使用产品，并从中获得良好的体验。

其次，前端技术栈的快速发展和广阔的行业前景也是吸引我的重要因素。Web技术日新月异，不断有新的框架、工具和解决方案涌现，这让我觉得前端是一个充满活力和挑战的领域，能够持续学习和成长。从最早的jQuery到现在的React、Vue，再到小程序、跨端框架，前端的应用场景越来越丰富，这让我看到了前端工程师在未来技术发展中的巨大潜力。

此外，在校期间的一些项目经历也进一步坚定了我选择前端的决心。我曾参与开发过一个校园二手交易平台，从零开始搭建前端界面，设计用户交互流程，并解决了一系列兼容性、性能优化等问题。在这个过程中，我不仅提升了技术能力，更重要的是，我从中找到了解决问题的乐趣和创造的成就感。我喜欢与设计师、产品经理沟通，将抽象的需求转化为具体、友好的用户界面，这种跨领域的协作也让我觉得前端工作充满了挑战性和趣味性。综合这些因素，我坚信前端开发是一个既能发挥我兴趣特长，又能持续学习和成长的理想方向。

4. 学前端大概有多久了？之前是否有接触过其他编程语言？

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：首先说明学习前端的时长，然后提及之前接触过的其他编程语言及其对前端学习的帮助，最后可以突出自己持续学习的能力。

参考答案

我接触前端开发大约有三年时间了。从大二开始，我就对前端产生了浓厚的兴趣，并系统地投入到学习中。这三年里，我从基础的HTML、CSS、JavaScript开始，逐步深入学习了React、Vue等主流前端框架，以及Webpack、Vite等构建工具，并参与了一些实际项目开发。

在学习前端之前，我在大学一年级接触过C++和Java等编程语言。C++的学习让我对底层逻辑、数据结构和算法有了初步的认识，培养了我的编程思维和解决问题的能力。而Java的学习则让我对面向对象编程、软件工程的思想有了更深的理解，尤其是在后端开发实践中，我了解了前后端分离、API接口设计等概念，这对于我理解前端与后端的数据交互和系统架构非常有帮助。这些早期的编程语言学习经历，为我后续学习JavaScript和前端框架打下了坚实的基础，让我能够更快地理解前端技术的原理和实现机制，例如，对数据结构和算法的理解，让我能够更好地优化前端应用的性能，提升用户体验。

总的来说，虽然前端是我主要深耕的方向，但其他编程语言的学习经历拓宽了我的技术视野，也让我能够从更全面的角度去思考和解决前端开发中的问题。我始终保持着对新技术的学习热情，并乐于将不同领域的知识融会贯通，应用到实际项目中。

5. 你提到的两个项目，分别是什么？简单介绍一下它们的背景和功能。

题目要点

说明该题是主观型问题，不考"唯一标准答案"。
面试官主要考察答题者的表达能力、思路系统性、技术理解和复盘能力。
答题结构建议：分别介绍项目的背景、你的角色、主要负责的功能、以及项目中使用到的关键技术栈。强调项目亮点和你的贡献。

参考答案

好的，我很乐意介绍我参与的两个主要项目。

第一个项目是一个在线教育平台的前端重构项目。背景是公司原有的教育平台技术栈老旧，用户体验不佳，且维护成本高昂。我作为前端开发实习生，主要负责其中"课程详情页"和"直播互动模块"的重构工作。课程详情页的核心功能是展示课程内容、教师信息、课程大纲和用户评论，并支持课程购买和加入学习。直播互动模块则需要实现实时弹幕、点赞、提问和答疑等功能，确保高并发下的数据同步和流畅交互。

在这个项目中，我主要负责：

课程详情页： 使用 React + Redux 技术栈，重构了页面组件，优化了数据请求和渲染逻辑，显著提升了页面加载速度和用户交互体验。特别是在图片懒加载和评论区无限滚动方面进行了性能优化，将首屏加载时间缩短了约30%。
直播互动模块： 参与了WebSocket通信的实现，确保弹幕消息的实时推送和展示。同时，为了保证在高并发场景下的性能，我们采用了虚拟列表技术来渲染大量弹幕，避免了DOM节点的过度渲染导致的页面卡顿。我还负责了前端的输入校验和敏感词过滤，确保互动内容的合规性。

第二个项目是一个企业内部的"项目管理系统"。这个系统的背景是公司内部各部门的项目信息分散，缺乏统一的管理和协作平台，导致沟通效率低下。我主要负责其"任务看板"和"数据可视化报表"模块的开发。任务看板旨在提供一个直观的Kanban视图，展示项目的任务状态（待办、进行中、已完成），并支持拖拽排序、任务分配、截止日期设置等功能。数据可视化报表则需要将项目进度、成员工作量、缺陷趋势等数据通过图表形式清晰地呈现。

在这个项目中，我主要负责：

任务看板： 采用了Vue 3 + Vuex + Element UIPlus 技术栈，实现了任务的增删改查和拖拽功能。为了提升用户体验，我利用Vue的响应式特性和虚拟DOM，确保了大量任务卡片操作时的流畅性。同时，设计并实现了自定义拖拽指令，提升了组件的通用性和可维护性。
数据可视化报表： 集成了ECharts图表库，根据后端提供的API数据，实现了项目概览、成员工作负荷、Bug趋势等多种报表的动态渲染。我负责了数据的前端处理和格式化，确保图表能够准确、清晰地展示数据，并通过组件化封装，使得报表可以灵活配置和复用。在实现过程中，也针对数据量较大时的图表渲染性能做了优化，例如按需加载图表组件和数据预处理。

通过这两个项目，我不仅巩固了前端基础和框架应用能力，更重要的是，学习了如何在实际复杂项目中进行需求分析、技术选型、性能优化以及团队协作。这些经验让我对前端工程化和项目管理有了更深入的理解。

百度-文库-校招 · 第 1 轮 · 一面

Sat, 19 Jul 2025 07:40:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试侧重于考察候选人的JavaScript基础知识、CSS布局能力、对浏览器工作原理的理解以及实际编码能力。重点在于事件循环、异步编程、闭包、原型链等核心概念，同时也涵盖了跨域、缓存等常见Web问题。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 实现一个三栏布局，左右侧固定200px，中间自适应，写出至少两种方案。追问：Grid布局中fr单位的作用？如何解决Flex布局的浏览器兼容问题？

题目要点

CSS布局能力：面试官想确认你是否熟练掌握现代CSS布局技术，如Flexbox和Grid，以及是否了解传统的布局方法。
布局方案的优劣对比：能否分析不同方案的适用场景和优缺点，体现出技术选型的思考能力。
CSS单位的理解：对fr这类现代布局单位的深入理解，表明你不是只会“复制粘贴”代码。
兼容性处理经验：在实际项目中如何处理浏览器兼容性问题，这是衡量工程师经验的重要指标。

参考答案

1.1 原理说明

三栏布局是前端开发中的经典布局问题，旨在实现一个两侧宽度固定、中间区域宽度自适应的页面结构。核心是处理中间区域如何填满剩余空间。

Flexbox（弹性盒子布局）：是一种一维布局模型，它让容器内的项目（item）能够灵活地分配空间。通过设置父容器display: flex，并为子项设置flex-grow（放大比例）、flex-shrink（缩小比例）和flex-basis（基准大小），可以轻松实现空间的自适应分配。对于三栏布局，可以将中间栏的flex-grow设为1，使其占据所有剩余空间。
Grid（网格布局）：是一种二维布局模型，可以将页面划分为行和列，并在这些行列构成的单元格中放置内容。通过grid-template-columns属性，可以精确定义每一列的宽度，使用fr单位可以非常方便地实现自适应。
fr 单位：fr是 “fractional unit”（分数单位）的缩写，用于Grid布局中。它代表了可用空间的一等份。例如，grid-template-columns: 200px 1fr 200px;意味着第一个和第三个元素宽度为200px，中间的元素占据所有剩余的可用空间。如果是1fr 2fr，则表示两者按1:2的比例分配可用空间。

1.2 核心用法 + 示例代码

方案一：Flexbox 布局这是目前最常用和推荐的方案，代码简洁且语义化。

使用场景：适用于绝大部分现代浏览器项目，尤其是一维方向（行或列）的布局。
注意点：需要注意旧版本浏览器的兼容性问题。

<div class="container-flex">
 <div class="left">左侧固定</div>
 <div class="main">中间自适应</div>
 <div class="right">右侧固定</div>
</div>

<style>
 .container-flex {
 display: flex;
 height: 100vh;
 }
 .left, .right {
 width: 200px;
 background-color: #f0f0f0;
 }
 .main {
 flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
 background-color: #e0e0e0;
 }
</style>

方案二：Grid 布局Grid布局在处理二维对齐时更具优势，实现三栏布局同样非常简单。

百度-文库-校招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 07:40:07 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 二面深入考察了前端核心知识的应用和原理理解。重点包括CSS优先级、闭包与内存管理、JavaScript继承的多种实现方式、原型链的深层理解、虚拟DOM的性能优化原理以及Vue框架的高级特性。题目更侧重于“为什么”和“如何实现”，要求候选人不仅知其然，更要知其所以然。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 自我介绍，没有实习过。

题目要点

沟通表达能力：能否清晰、自信地介绍自己。
潜力与热情：在没有实习经历的情况下，如何通过个人项目、技术博客、开源贡献等来证明自己的技术热情和学习能力。
求职动机：为什么选择这个岗位和公司。

参考答案

此题为个人经验总结，请根据自身情况作答。核心是突出自己的优势、学习能力和对前端的热情，用项目经验或学习成果来弥补实习经历的不足。

2. 最终颜色是什么？为什么？

<div class="box" id="content" style="color:red"></div>

.box { color: blue }
#content { color: green }

题目要点

CSS优先级（Specificity）：这是CSS核心概念之一，考察对不同选择器权重的理解和计算能力。
CSS规则来源：是否了解行内样式、内部样式表、外部样式表的优先级关系。

参考答案

1.1 原理说明

CSS的优先级（Specificity），也常被称为特殊性或权重，是浏览器用来决定当多个规则应用到同一个元素上时，哪一条规则生效的计算方法。

优先级的计算规则可以总结为一个四元组 (a, b, c, d)：

a: 行内样式（Inline styles）：如 style="color: red;"。如果存在，a为1，否则为0。
b: ID选择器：如 #content。b为ID选择器的数量。
c: 类选择器、属性选择器、伪类选择器：如 .box, [type="text"], :hover。c为这些选择器的总数量。
d: 标签选择器、伪元素选择器：如 div, ::before。d为这些选择器的总数量。

比较规则：从a开始，逐位比较。a大的胜出；如果a相同，则比较b，b大的胜出；以此类推。只有在优先级完全相同时，才会根据样式在代码中出现的顺序来决定，“后来者居上”。

另外，!important声明拥有最高优先级，它会覆盖任何其他声明，但应避免滥用。

1.2 核心用法 + 示例代码

我们来分析题目中的三个样式规则：

行内样式：style="color:red"
- 优先级计算：a=1, b=0, c=0, d=0 -> (1, 0, 0, 0)
ID选择器：#content { color: green }
- 优先级计算：a=0, b=1, c=0, d=0 -> (0, 1, 0, 0)
类选择器：.box { color: blue }
- 优先级计算：a=0, b=0, c=1, d=0 -> (0, 0, 1, 0)

比较结果：

百度-地图-秋招 · 第 1 轮 · 三面

Sat, 19 Jul 2025 06:27:27 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 7 道题。答案默认折叠，便于先自行作答。

1. 讲一个你觉得最有成就感的项目？

题目要点

这个问题的回答重点不在于项目多复杂，而在于是否能通过一个真实的项目，清晰地表达出在关键阶段的判断力、推动力和技术价值。能讲出一个对业务和团队产生正向影响的案例，并体现出“为什么重要”、“怎么做的”、“结果如何”以及“有哪些沉淀”，才是打动面试官的关键。

参考答案

这个问题考察的是候选人在复杂项目中的角色、思维方式以及实际落地能力。回答时不必拘泥于“成功上线”或“技术高大上”的标准，更重要的是能体现出技术价值、业务洞察和综合影响力。

可以从以下几个方向展开：

1. 项目背景与挑战

项目是否处于关键节点（如业务转型、架构重构、性能瓶颈期），是否需要协调多个团队或跨端协作。重点在于说明“项目为什么重要”以及“初始面临的困难”，而不仅仅是“做了一个新功能”。

2. 所承担的角色与关键决策

可以适当展示一些深度思考，比如为什么选用了某项技术、重构的策略、组件化拆分方式、数据模型设计等。还可以强调在混乱或模糊中推动落地、制定标准、推动流程优化等能力。

3. 结果与影响

不仅仅是“功能上线”，更重要的是对业务、团队或系统带来了什么实质性的改进，比如性能提升、迭代效率变高、可维护性提升、用户体验改善、业务增长支持等。

4. 成长与反思

有价值的项目往往伴随着“认知升级”，比如原来低估了技术债的影响，或者通过实际落地理解了“领域驱动设计”的意义。这个部分体现出个人复盘能力。

2. 平时用哪个地图软件，你觉得百度地图和高德地图有什么区别？

题目要点

这个问题背后考察的是候选人是否能够从日常使用中提炼出产品与技术的理解。如果能结合体验差异、技术架构、场景适配和生态思考给出分析，而不是停留在“哪个好用”这类主观评价层面，将更容易体现出产品敏感度和技术视野。

参考答案

这个问题虽然看似轻松，其实背后是面试官在考察候选人是否具备产品意识、用户视角以及对技术背后的生态和体验差异的敏感度。

回答可以从以下几个方向展开：

1. 使用习惯和使用场景

地图类产品往往不止于“导航”，不同场景下用户会对产品有不同诉求，例如：

日常通勤更关注路线精准、避堵能力；
出行规划更看重 POI（兴趣点）搜索能力；
步行、骑行、公交路线推荐的体验也会有所差异。

可以结合真实使用感受，说明更倾向哪一个地图工具，并说明选择背后的产品逻辑。

2. 产品体验差异

从前端视角，可以提到一些常见的 UI/UX 差异，例如：

高德地图整体交互更轻量，响应更快，视觉上偏简洁；
百度地图在信息展示上更丰富，比如搜索结果信息量较大，适合城市探索或综合决策；
两者在加载速度、动效、地图渲染逻辑、图层处理等方面也有细节差异。

3. 数据能力与技术架构差异

可适当提及：

百度地图在自然语言搜索、智能推荐、AI 语义处理方面表现更突出；
高德地图更注重实时交通、路线规划和精准避堵，背后依赖阿里生态中调度算法与实时数据的融合；
技术开发角度，百度地图在 web 开发中更注重全家桶式工具链，而高德的 SDK 则更强调灵活性和接入效率。

4. 生态与平台联动

从更高层次看，还可以提及两者在生态整合上的不同：

高德地图与支付宝、饿了么、飞猪等联动，强调生活服务整合；
百度地图则依托百度搜索、百度 AI、大模型、自动驾驶等形成了更 AI 驱动的生态闭环。

3. 在多人协作开发中，若遇到接口定义不一致或代码冲突，你会如何推动问题解决？

题目要点

这个问题的核心在于是否具备跨人、跨团队推动协作问题闭环的能力。能够主动定位问题源头、推动规范和工具落地、在冲突中引导沟通达成共识，是一个成熟前端在协作场景中的重要价值体现。回答不应仅限于“怎么解决”，更要体现出“如何避免”和“如何沉淀机制”。

百度-地图-秋招 · 第 1 轮 · 二面

Sat, 19 Jul 2025 06:27:27 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试考察了前端基础能力、网络协议、Vue响应式原理、构建工具底层实现，以及手写能力与业务建模能力，重点在于深入理解底层原理和综合解决问题的能力。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的前端模块化的理解

题目要点

模块化发展历程、ES Module 和 CommonJS 区别、模块加载机制、Tree-shaking原理。

参考答案

原理说明

模块化的目的：为了提高代码的可维护性、复用性和依赖管理能力，将代码组织为独立模块。
发展历程：
- 无模块化（全局变量）
- IIFE 模式（立即执行函数）
- CommonJS（Node.js 标准，同步加载）
- AMD / CMD（异步模块定义）
- ES Module（ES6 标准模块系统，浏览器原生支持）
CommonJS vs ES Module：
- CommonJS 是同步加载，适用于服务端；ES Module 是静态分析+异步加载，适用于浏览器。
- ES Module 支持 Tree-shaking，CommonJS 不支持。

核心用法 + 示例代码

// ES Module
export const add = (a, b) => a + b;
import { add } from './utils.js';

常见误区

将 ES Module 和 CommonJS 混用，导致打包失败。
忽视 ES Module 是静态结构，不能在运行时动态导入变量名模块（需使用 import()）。

2. HTTP/2 解决 HTTP/1.1什么问题？

题目要点

HTTP/2 优化点、HTTP/1.1 的瓶颈、性能原理

腾讯-视频-校招 · 第 1 轮 · 一面

Thu, 17 Jul 2025 14:02:21 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： - 考点覆盖：网络协议（HTTP/HTTPS、OSI、WebSocket、QUIC、CORS）、安全（XSS、缓存投毒）、性能优化（缓存、懒加载/预加载）、工程化（版本更新、路由）、Vue框架细节。

难易度：中等偏上。前6题基础网络必会，7-10题需理解协议差异与实战场景，11-16题偏重安全与缓存的落地策略，17-20题考察框架原理与工程思维，梯度合理但深度要求高。

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 统计出现次数最多的字符以及出现的次数

题目描述：

编写一个函数，接收一个字符串作为输入，统计并返回出现次数最多的字符及其出现的次数。如果有多个字符出现次数相同且最多，则返回所有这些字符及其出现次数。
输入输出要求：

输入：一个字符串（只包含字母和数字）。
输出：一个对象，包含出现次数最多的字符及其出现次数。示例：

const input = "aabbccddde";
const result = mostFrequentChar(input);
console.log(result); // 输出：{ a: 2, b: 2, c: 2, d: 3, e: 1 }

题目要点

时间复杂度：O(n)，需要遍历字符串两次
空间复杂度：O(k)，k为不同字符的数量
关键点：正确理解题意，返回所有出现次数最多的字符
优化：可以在统计过程中同时记录最大值，减少遍历次数

参考答案

这道题需要统计字符串中每个字符的出现次数，然后找出出现次数最多的字符。需要注意的是，题目要求如果有多个字符出现次数相同且最多，要返回所有这些字符。

解题思路：

遍历字符串，使用Map或对象统计每个字符的出现次数
找出最大出现次数
筛选出所有达到最大出现次数的字符
返回结果对象

代码实现：

function mostFrequentChar(str) {
 // 边界情况处理
 if (!str || str.length === 0) {
 return {};
 }

 // 统计每个字符的出现次数
 const charCount = {};
 for (let char of str) {
 charCount[char] = (charCount[char] || 0) + 1;
 }

 // 找出最大出现次数
 const maxCount = Math.max(...Object.values(charCount));

 // 筛选出所有达到最大出现次数的字符
 const result = {};
 for (let [char, count] of Object.entries(charCount)) {
 if (count === maxCount) {
 result[char] = count;
 }
 }

 return result;
}

// 优化版本：使用Map，一次遍历完成
function mostFrequentCharOptimized(str) {
 if (!str || str.length === 0) {
 return {};
 }

 const charCount = new Map();
 let maxCount = 0;

 // 统计字符出现次数，同时记录最大值
 for (let char of str) {
 const count = (charCount.get(char) || 0) + 1;
 charCount.set(char, count);
 maxCount = Math.max(maxCount, count);
 }

 // 构建结果对象
 const result = {};
 for (let [char, count] of charCount) {
 if (count === maxCount) {
 result[char] = count;
 }
 }

 return result;
}

测试用例：

美团-酒旅-前端面经 · 第 1 轮 · 一面

Thu, 17 Jul 2025 08:18:40 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 简历提到你熟悉Git，请问如何处理代码合并时的冲突？

题目要点

面试官出这道题主要想确认哪些知识维度？
- Git基础操作：考察候选人对Git版本控制工具的熟悉程度，尤其是合并（merge）和解决冲突（conflict resolution）等核心操作。
- 问题解决能力：在实际开发中遇到代码冲突时，候选人如何分析问题、定位冲突并有效解决。
- 协作开发经验：在团队协作中，如何避免冲突，以及在发生冲突后如何与其他团队成员协作解决。
该题所考知识点中有哪些高频实际应用点？
- 日常代码合并：开发者在日常工作中频繁进行分支合并，冲突处理是不可避免的环节。
- 版本回溯与管理：理解冲突解决机制有助于更好地进行版本管理和历史回溯。
- 团队协作效率：高效解决冲突能够提高团队的开发效率和代码质量。

参考答案

1.1 原理说明

Git冲突是指在合并（merge）或变基（rebase）分支时，不同分支对同一个文件的相同部分进行了修改，或者一个分支修改了文件而另一个分支删除了该文件，导致Git无法自动判断保留哪个修改时发生的情况。Git会暂停合并操作，并将冲突部分标记出来，等待用户手动解决。

冲突的产生： 当两个或多个开发者对同一个文件的同一行或同一区域进行修改，并将各自的修改推送到远程仓库，在合并这些修改时，Git会提示冲突。

冲突的类型：

内容冲突：最常见，发生在同一个文件的相同行或相邻行被不同分支修改。
文件冲突：一个分支修改了文件，另一个分支删除了该文件；或者两个分支都创建了同名文件但内容不同。

1.2 核心用法 + 示例代码

处理Git合并冲突的主要步骤如下：

更新本地仓库：在进行合并操作前，通常需要先拉取远程最新代码，确保本地分支是最新的，减少潜在冲突。
```
git pull origin <your-branch>
```
执行合并操作：当你尝试将一个分支合并到另一个分支时，如果存在冲突，Git会提示并停止合并。
```
git merge <other-branch>
```
或者使用rebase：
```
git rebase <other-branch>
```
识别冲突标记：Git会在冲突文件中插入特殊标记，通常是：
```
<<<<<<&lt; HEAD
// 当前分支的修改
=======
// 待合并分支的修改
>>>>>>> <commit-id-or-branch-name>
```
- <<<<<<< HEAD：表示当前分支（HEAD指向）的代码。
- =======：分隔符，表示冲突的开始和结束。
- >>>>>>> <commit-id-or-branch-name>：表示待合并分支的代码。
手动解决冲突：
- 编辑冲突文件：根据业务需求，手动修改冲突文件，决定保留哪些代码，删除哪些代码。你可以选择保留其中一个分支的修改，或者结合两者的修改，甚至编写全新的代码。
- 删除冲突标记：在解决冲突后，务必删除<<<<<<<、=======和>>>>>>>这些Git自动添加的标记。
将解决后的文件标记为已解决：
```
git add <conflicted-file-name>
```
提交合并结果：在所有冲突文件都标记为已解决后，提交合并。

百度-地图-秋招 · 第 1 轮 · 一面

Thu, 10 Jul 2025 14:52:42 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 基础知识面不少，进一步考察实际工程和性能优化能力

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. BFC的作用及触发条件，使用场景讲一下

题目要点

CSS 样式中 BFC 的概念、特性和触发条件
BFC 应用场景：避免多列排版间隔折行问题、清除浮动、各区域形成隔离

参考答案

1.1 原理说明

BFC (Block Formatting Context)，即块级格式化上下文。它是 W3C CSS2.1 中的一类属性，是一个独立的布局环境，在该环境里，按照特定规则进行元素排列和布局。

主要特性：

BFC 内部的元素不会和外部的元素受 margin 折行的影响
BFC 可以包裹内部浮动元素，解决父容器高度不拉伸问题
BFC 不会被浮动元素拉动

触发 BFC 的条件：

样式中定义此元素为 float (non-none)
正文模型 overflow 为 hidden, scroll, auto
display 为 inline-block, table-cell, flex, grid, flow-root
position 为 absolute 或 fixed

1.2 核心用法 + 示例代码

场景1：清除浮动 常用 BFC 包裹元素，使父元素的高度得以支撑

360集团-24年-校招 · 第 1 轮 · 一面

Wed, 09 Jul 2025 08:05:48 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的前端基础内容和项目经验。

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 前端学习路径

题目要点

本题为主观题，没有标准答案，主要考察候选人的学习能力、知识体系构建能力以及持续学习的动力。
面试官希望了解候选人获取新知识、解决问题的途径和习惯，以及对前端知识的理解是否系统、全面。
建议回答结构：我的前端启蒙与基础学习阶段 → 深入学习特定框架/技术 → 通过项目实践巩固与提升 → 持续学习与关注前沿技术。

参考答案

我的前端学习路径可以分为几个阶段。最初，我对互联网技术充满好奇，通过[提及学习方式，例如：慕课网上的入门课程和MDN文档]开始了前端的启蒙。在这个阶段，我扎实掌握了HTML、CSS和JavaScript这"三驾马车"的基础知识，理解了DOM操作、盒模型、BFC等核心概念。为了更好地实践，我还搭建了一些简单的静态页面和交互功能，这让我对前端有了初步的认识。

随着学习的深入，我意识到框架在大型项目开发中的重要性。我选择了[提及选择的框架，例如：React作为第一个深入学习的框架]，因为它在业界应用广泛且社区活跃。我通过[提及学习方式，例如：阅读官方文档、跟随开源项目教程，以及阅读《React设计模式与最佳实践》等书籍]，系统学习了React的组件化思想、生命周期、Hooks、状态管理（如Redux或Context API）等。为了融会贯通，我模仿并实现了一些[提及实践项目，例如：电商网站的商品详情页、用户管理后台界面]，并在其中积极实践了组件复用和性能优化。

在掌握React后，我又学习了Vue，主要是为了拓宽技术栈，了解不同框架的设计哲学。通过对比学习，我能更好地理解它们在数据响应式、模板语法、生态系统等方面的差异，这让我在技术选型时能有更全面的考量。项目实践是检验学习成果的最佳方式，我总是尝试将所学知识应用到实际项目中，例如[提及具体项目中的实践，例如：在一个数据可视化项目中，我负责了图表组件的封装和数据渲染优化，并解决了跨域请求等问题]，通过解决实际问题来加深理解和提升能力。

此外，我始终保持持续学习的习惯。我关注前端技术社区，如GitHub Trending、掘金、知乎专栏等，定期阅读技术博客和行业报告，了解最新的前端趋势和技术发展，比如[提及关注的新技术，例如：WebAssembly、微前端、Serverless等]。我认为前端技术发展迅速，只有不断学习和实践，才能保持竞争力。当遇到新的技术挑战时，我通常会先查阅官方文档，然后搜索相关的技术文章和社区讨论，如果依然无法解决，会向有经验的同事或社区前辈请教。这个过程不仅帮助我解决了问题，也锻炼了我独立思考和解决问题的能力。

2. 你提到对React和Vue都了解，对比两者的差异？在项目中如何选择？

题目要点

框架基础掌握：确认候选人对React和Vue两大主流前端框架的核心概念、工作原理有深入理解。
异同点辨析：考察候选人能否准确对比两者在数据管理、模板语法、生态系统等方面的差异。
项目选型能力：评估候选人是否具备根据项目需求、团队情况等因素，合理选择技术栈的决策能力。

参考答案

1.1 原理说明

React和Vue都是目前主流的前端UI框架，用于构建用户界面。它们都采用了组件化的开发思想和虚拟DOM技术来提高开发效率和性能。

React： React是一个由Facebook开发的用于构建用户界面的JavaScript库。它强调"一次学习，随处编写"，以其声明式视图、组件化、以及单向数据流而闻名。React的核心是JSX（JavaScript XML），一种允许在JavaScript中编写类似HTML结构的语法，这使得UI的逻辑和视图紧密结合。React的更新机制是基于状态的变化，当组件状态更新时，React会创建一个新的虚拟DOM树，然后与旧的虚拟DOM树进行对比（diff算法），最后只更新真实DOM中发生变化的部分。
Vue： Vue是一个渐进式JavaScript框架，用于构建用户界面。它被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，同时也方便与其他库或现有项目整合。Vue的主要特点包括双向数据绑定、基于HTML的模板语法（也可以使用JSX）、组件化以及响应式系统。Vue的响应式系统基于Object.defineProperty（Vue 2.x）或Proxy（Vue 3.x），能够追踪数据的变化并自动更新视图。

相关概念之间的联系和区别：

共同点：
- 组件化： 两者都提倡组件化开发，将UI拆分为独立的、可复用的组件。
- 虚拟DOM： 都使用虚拟DOM来提高性能，减少直接操作真实DOM的开销。
- 响应式： 都提供了响应式的数据绑定机制，数据变化时视图自动更新。
- 生态系统： 都拥有庞大且活跃的社区，提供丰富的工具、库和插件。
区别：
- 数据流： React推崇单向数据流（从父组件到子组件），而Vue支持双向数据绑定（v-model），使得表单处理等场景更为便捷。
- 模板语法： React倾向于使用JSX，将HTML和JS逻辑写在一起；Vue默认使用基于HTML的模板语法，通过指令（如v-if, v-for）增强HTML功能，也可以选择使用JSX或渲染函数。
- 状态管理： React通常结合Redux或Context API进行状态管理；Vue有官方的Vuex。两者都有各自的解决方案来管理复杂应用的状态。
- 学习曲线： 通常认为Vue的学习曲线相对平缓，对前端新手更友好；React由于其JSX和函数式编程的理念，可能需要一定的学习成本。
- 性能优化： Vue的响应式系统在很多情况下能自动进行细粒度的更新，减少开发者手动优化的工作；React的性能优化则更多依赖于shouldComponentUpdate、React.memo等手动优化手段。

1.2 核心用法 + 示例代码（如题目涉及）

由于题目是对比差异和选择，这里主要通过对比说明其在项目中的选择场景：

京东-健康-校招 · 第 1 轮 · 一面

Sun, 06 Jul 2025 14:16:57 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 中级偏上难度，适合有扎实基础和一定项目经验的应届生。既考察理论知识的深度，也注重实践能力的广度，需要候选人具备较强的学习能力和技术整合能力。

本轮要点： ### 考察范围

这轮校招面试主要考察四个维度：

个人经历和项目实战：通过学习经历、项目搭建、协作经验考察实际开发能力
移动端和多端开发：小程序开发、多端适配、移动端优化等实用技能
前端基础知识：JavaScript核心概念、Vue框架原理、浏览器工作机制等
工程化和架构思维：打包工具、插件开发、系统设计等高级能力

重点准备知识点

项目经验的系统性总结和技术亮点提炼
小程序开发框架和多端适配方案
JavaScript作用域、变量提升等核心机制
Vue组件通信、生命周期、插槽等框架特性
前端性能优化和工程化实践
实时通讯和AI集成的技术方案

本轮共 25 道题。答案默认折叠，便于先自行作答。

1. 介绍自己的学习和实习经历

题目要点

学习路径：从基础到框架的系统性学习过程
实习经验：具体项目和技术栈的实践应用
协作能力：与团队成员的配合和沟通经验
技术深度：不仅会用还要理解原理的学习态度

参考答案

在学习经历方面，计算机科学专业背景为前端开发奠定了扎实的理论基础。大学期间系统学习了数据结构、算法、计算机网络等核心课程，这些知识在后续的前端开发中发挥了重要作用。

前端技术的学习路径比较系统，从HTML、CSS、JavaScript基础开始，逐步深入到现代前端框架。先掌握了Vue.js的基本用法，然后学习了React和小程序开发。在学习过程中特别注重实践，每学习一个新技术都会通过项目来巩固理解。

实习经历主要集中在两个阶段。第一次实习主要负责公司官网的维护和功能迭代，使用Vue.js技术栈，参与了从需求分析到上线部署的完整流程。这个过程中学会了如何与产品经理、设计师协作，也了解了企业级项目的开发规范。

第二次实习参与了一个移动端项目的开发，使用uni-app框架实现多端适配。在这个项目中主要负责用户中心模块的开发，包括登录注册、个人信息管理、订单查询等功能。通过这次实习深入了解了移动端开发的特点和挑战。

在学习和实习过程中，特别注重技术深度的挖掘。不仅学会了如何使用各种技术，更重要的是理解了技术背后的原理。比如学习Vue时，会去了解响应式系统的实现机制；学习webpack时，会研究打包优化的各种策略。

2. 讲一下你的项目搭建过程，用到了哪个脚手架，有没有做其他工作？

题目要点

脚手架选择：Vue CLI vs Vite的适用场景和特点
配置定制：代码规范、构建优化、环境管理
开发规范：团队协作的标准化流程
工程化实践：组件库、测试、部署等完整流程

参考答案

项目搭建通常会根据具体需求选择合适的脚手架工具。对于Vue项目，主要使用Vue CLI和Vite两种方案。Vue CLI适合需要复杂配置的企业级项目，提供了完整的插件生态和配置选项。Vite则适合快速开发，启动速度更快，热更新体验更好。

具体的搭建流程包括几个关键步骤。首先是技术栈选择，根据项目需求确定使用的框架、UI库、状态管理方案等。然后使用脚手架创建基础项目结构，配置开发环境和构建流程。

在基础搭建完成后，会进行一系列的定制化配置。包括配置ESLint和Prettier确保代码质量，设置路由和状态管理的基础结构，配置axios拦截器处理API请求，设置环境变量管理不同环境的配置。

还会建立项目的开发规范，包括目录结构规范、组件命名规范、Git提交规范等。这些规范对于团队协作非常重要，能够保证代码的一致性和可维护性。

在构建优化方面，会配置代码分割、压缩、缓存等策略。对于生产环境，还会配置CDN、Gzip压缩、性能监控等。这些配置虽然不是核心业务逻辑，但对项目的性能和稳定性有重要影响。

除了技术层面的工作，还会考虑项目的可持续发展。比如建立组件库，提取公共组件和工具函数；配置自动化测试，保证代码质量；建立CI/CD流程，实现自动化部署。

3. 讲一下你在学校参与的协作项目

题目要点

项目背景：技术栈选择和架构设计
个人职责：具体负责的模块和功能实现
协作流程：Git管理、代码审查、敏捷开发
问题解决：接口对接、代码规范等实际挑战

参考答案

在学校期间参与了一个在线学习平台的开发项目，这是一个5人团队的协作项目，持续了一个学期。项目采用前后端分离的架构，前端使用Vue.js，后端使用Node.js。

在项目中主要负责用户管理和课程展示模块的开发。用户管理包括注册登录、个人信息维护、学习进度跟踪等功能。课程展示模块需要支持视频播放、课件下载、评论互动等复杂功能。

团队协作方面，使用Git进行版本控制，建立了完整的分支管理策略。主分支用于生产环境，开发分支用于功能集成，每个人都有自己的特性分支。通过Pull Request的方式进行代码审查，确保代码质量。

项目管理使用敏捷开发方法，每周进行一次迭代规划，每天有简短的站会同步进度。使用Trello进行任务管理，每个功能都有明确的负责人和完成时间。

腾讯-QQ浏览器-校招 · 第 1 轮 · 一面

Sun, 06 Jul 2025 13:37:36 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 中高级难度。既有基础概念的深度考察，也有复杂业务场景的解决方案设计，对于校招同学有一定的挑战。

本轮要点： ### 考察范围

这轮面试主要考察三个维度：

项目实战能力：通过虚拟列表、Token管理等具体技术方案考察解决复杂业务问题的能力
前端基础功底：涵盖浏览器原理、JavaScript核心机制、CSS布局、性能优化等核心知识
计算机基础：通过算法题考察数据结构和算法基础

重点准备知识点

虚拟列表等性能优化方案的深度理解和实践经验
HTTP协议、浏览器工作原理、缓存机制等网络基础
JavaScript事件循环、闭包、原型链等语言核心特性
Vue/React框架原理，特别是响应式系统和虚拟DOM
CSS布局方案和BFC等核心概念
前端工程化和性能优化实践
基础算法和数据结构

建议

深入理解前端核心概念，不仅知其然还要知其所以然
积累实际项目经验，特别是性能优化和复杂业务场景的解决方案
保持对新技术的敏感度，了解技术发展趋势
加强计算机基础，算法和数据结构是技术能力的重要体现
培养系统性思维，能够从多个角度分析和解决问题

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 请讲一下你项目中的的虚拟列表，包括实现原理、优化过程以及如何设置缓冲区？

题目要点

核心原理：只渲染可视区域，动态计算显示范围
关键技术：滚动监听、索引计算、位置缓存
优化重点：动态高度处理、缓冲区设置、滚动性能
实际考虑：内存占用与性能平衡

参考答案

虚拟列表是解决大数据量列表渲染性能问题的核心方案。其实现原理基于"只渲染可视区域"的思想。

具体实现上，首先需要确定容器的可视高度和每个列表项的高度。通过监听滚动事件，实时计算当前滚动位置对应的起始索引和结束索引。核心公式是：起始索引 = Math.floor(scrollTop / itemHeight)，结束索引 = 起始索引 + Math.ceil(containerHeight / itemHeight)。

在优化过程中遇到的主要挑战是处理动态高度的列表项。解决方案是维护一个位置缓存数组，记录每个列表项的实际高度和累计偏移量。当列表项高度发生变化时，需要更新缓存并重新计算后续项的位置。

缓冲区设置是性能优化的关键。通常在可视区域前后各增加5-10个列表项作为缓冲，具体数量需要根据列表项的复杂度和渲染耗时来调整。缓冲区过小会导致快速滚动时出现白屏，过大则会增加内存占用和渲染负担。

对于滚动性能优化，还需要结合防抖节流、requestAnimationFrame等技术，确保滚动的流畅性。

2. 在虚拟列表中，如何结合防抖和节流技术优化性能？

题目要点

节流应用：滚动事件实时响应，保证连续性操作的流畅度
防抖应用：计算密集操作、数据预加载等非实时场景
组合策略：根据不同操作特性选择合适的优化方案
参数调优：时间间隔需要平衡性能和用户体验

参考答案

在虚拟列表的性能优化中，防抖和节流扮演着不同但互补的角色。

对于滚动事件本身，节流是更合适的选择。因为滚动是连续性操作，用户期望得到实时反馈，而不是等待操作结束后才响应。通常设置16-33ms的节流间隔，对应60-30fps的更新频率，既保证了流畅度又避免了过度计算。

防抖则主要用于一些计算密集型的操作。比如当滚动停止后，可能需要进行数据预加载、图片懒加载等操作，这些可以使用防抖来避免频繁触发。另外，对于搜索框结合虚拟列表的场景，搜索关键词的处理也适合使用防抖。

在实际实现中，还需要考虑组合使用的场景。比如可以对滚动事件使用节流进行实时响应，同时对复杂的重新计算逻辑使用防抖进行优化。这样既保证了用户体验，又避免了不必要的性能消耗。

需要注意的是，节流和防抖的时间设置需要根据具体业务场景调整，过短可能达不到优化效果，过长则会影响用户体验。

3. 如何使用 requestAnimationFrame 优化虚拟列表的滚动性能？

题目要点

核心优势：与浏览器重绘周期同步，避免无效渲染
应用场景：DOM更新调度、动画优化、时间切片
性能提升：减少重排重绘、合并多次操作、避免掉帧
注意事项：刷新率适配、兼容性考虑

参考答案

requestAnimationFrame是浏览器提供的专门用于动画优化的API，它能够确保回调函数在浏览器下一次重绘之前执行，这对虚拟列表的滚动性能优化具有重要意义。

腾讯-暑期实习 · 第 1 轮 · 一面

Sun, 29 Jun 2025 13:39:17 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 主要几种在以下几个方向：

vue3原理
前端工程化：webpack、vite、pnpm、monorepo
前端安全
计算机网络

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. JSON数组扁平化&数据过滤

假设有一个模拟接口 fetchData()，返回 Promise 对象，数据格式为：

{
"data": [
 { "id": 1, "value": 5 },
 { "id": 2, "value": 10, "children": [
 { "id": 3, "value": 8 } ]
 }
]
}

要求：

将接口返回的嵌套数据结构扁平化为一维数组；
筛选出 value 大于等于 8 的元素；
按 id 升序排列后，渲染为 <ul> 列表。

示例输出：

<ul>
<li>id:2, value:10</li>
<li>id:3, value:8</li>
</ul>

题目要点

递归与数据结构处理：考查候选人是否理解如何处理嵌套结构。
数组操作基础：filter/sort/map 等高阶方法掌握情况。
异步处理能力：是否熟悉 Promise 的使用。
原生 DOM 操作：不用框架的情况下渲染 HTML。

参考答案

1.1 原理说明

此题本质是一个数据处理与 DOM 渲染综合题，目标包括：

字节-今日头条-校招 · 第 1 轮 · 三面

Fri, 27 Jun 2025 08:02:46 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察候选人的项目经验、技术深度与广度，以及解决实际问题的能力和算法基础。

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 介绍一下实习项目的业务背景

题目要点

● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官主要考察答题者能否清晰、有条理地阐述复杂业务，并展现其系统性思考和沟通表达能力。 ● 建议的答题结构是：首先概述项目所属行业与核心痛点，接着阐述项目目标与解决方案，最后简要提及项目成果及个人职责。

参考答案

高质量参考范文：

我之前在一家电商公司实习，主要负责一个名为"智能商品推荐系统"的项目。该项目的业务背景是，随着电商平台商品数量的激增，用户在海量商品中找到心仪商品变得越来越困难，导致用户体验下降，同时也影响了平台的转化率和GMV。为了解决这一痛点，我们团队着手开发智能推荐系统，旨在通过算法分析用户的行为数据（如浏览历史、购买记录、搜索偏好等），结合商品自身的属性，为用户提供个性化、精准的商品推荐，从而提升用户的购物效率和满意度。

在这个项目中，我的主要职责是负责推荐结果的前端展示和交互优化。具体来说，我参与了推荐模块的UI设计与实现，确保推荐流的加载流畅性，并针对不同场景（如首页推荐、详情页关联推荐、购物车推荐等）进行了布局和样式的适配。此外，我还负责埋点方案的实施，以便后续对推荐效果进行数据分析和A/B测试。通过这个项目，我们发现精准推荐能够显著提高用户的点击率和转化率，帮助平台更好地匹配用户需求与商品供给，最终促进了业务增长。

2. 假如你是一个项目的负责人，面对一个新需求你会如何判断以及决策？

题目要点

● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官主要考察答题者在项目管理、需求分析、风险评估和决策制定方面的系统性思维和实践能力。 ● 建议的答题结构是：首先明确需求分析的步骤，接着说明决策制定的考量因素，最后强调风险管理与团队协作。

参考答案

高质量参考范文：

作为项目的负责人，面对新需求时，我会采取一个结构化的判断和决策流程。首先，我会进行深入的需求分析和理解。这包括与产品经理、业务方进行充分沟通，明确需求的来源、业务目标、用户价值和预期效果，同时也会收集用户反馈和市场数据进行辅助验证，确保我们对需求有全面的认知，而不是停留在表面。我会问自己几个关键问题：这个需求解决什么问题？能带来多大的业务价值？目标用户是谁？

其次，我会进行可行性评估和方案设计。从技术角度，我会组织技术团队评估实现方案的技术难度、所需资源（人力、时间、技术栈）、潜在风险以及对现有系统的影响。同时，我也会考虑多种技术方案，并对比它们的优劣，力求选择一个既能满足需求又具备良好扩展性和维护性的方案。在这个阶段，我会与团队成员进行充分讨论，集思广益。

接着是优先级排序和决策制定。在资源有限的情况下，我会根据需求的业务价值、技术复杂度、风险高低以及与其他需求的关联性进行综合评估，制定优先级。我会与产品、运营等相关方进行协商，达成一致的优先级共识，并最终确定新需求的上线计划和资源投入。例如，我们会将需求划分为"必须有"、“应该有”、“可以有"等层级，确保核心价值的优先实现。在整个过程中，我会持续关注风险管理，提前识别潜在的技术或业务风险，并制定相应的预案，确保项目能够顺利推进。

3. 功能上线后如何判断这个功能上线前后的影响和优化有多少呢？

题目要点

● 该题是主观型问题，不设"唯一标准答案”。 ● 面试官主要考察答题者对数据分析、效果评估、用户反馈和持续优化闭环的理解与实践能力。 ● 建议的答题结构是：首先说明数据指标的定义与埋点，接着阐述A/B测试的重要性，最后强调用户反馈收集和持续迭代。

参考答案

高质量参考范文：

功能上线后，为了准确判断其影响和优化效果，我通常会从几个维度进行综合评估。首先是数据指标的监控与分析。在功能设计阶段，我们就会明确核心的业务指标（如点击率、转化率、留存率、DAU/MAU等）和技术指标（如页面加载速度、接口响应时间等）。功能上线前，我们会确保所有相关的用户行为和系统性能都有完善的埋点方案。上线后，通过数据分析平台（如GA、神策、友盟等）持续追踪这些指标的变化趋势。对比功能上线前后的数据，可以直观地量化功能带来的影响。

其次，A/B测试是评估功能影响最科学的方法之一。如果条件允许，我们会将新功能通过A/B测试的方式灰度上线，将用户分成对照组和实验组。对照组用户使用旧功能，实验组用户使用新功能。通过对比两组用户的核心指标数据，可以排除其他干扰因素，更准确地评估新功能带来的实际增益或负面影响。这能帮助我们判断新功能是否达到了预期目标，或者是否需要进一步优化。

最后，用户反馈的收集与分析也至关重要。我们会通过多种渠道收集用户对新功能的反馈，包括用户调研问卷、用户访谈、线上评论、客服反馈等。这些定性数据可以帮助我们理解用户在使用过程中遇到的具体问题、痛点以及他们的真实感受，从而发现数据指标无法揭示的深层问题。我们会定期复盘这些反馈，结合数据分析的结果，识别功能潜在的优化点，并将其纳入后续的产品迭代计划中，形成一个持续优化、不断提升用户体验的闭环。

4. 有去了解过用户反馈最多的问题或者诉求最强的问题是什么吗？

题目要点

● 该题是主观型问题，不设"唯一标准答案"。 ● 面试官出这道题主要想确认哪些知识维度？ ● 考察候选人是否关注用户、理解用户痛点，并具备从用户角度思考问题的能力。 ● 评估候选人是否具备主动发现问题并寻求解决方案的意识。 ● 该题所考知识点中有哪些高频实际应用点？ ● 用户研究与用户画像分析 ● 竞品分析与行业趋势洞察 ● 用户体验（UX）与产品优化

字节-今日头条-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 08:02:46 +0000

← 第 1 轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识、项目经验和算法能力。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 简单介绍一下你上一段实习中觉得做的比较好的项目

题目要点

● 主观型问题，无唯一标准答案。 ● 面试官主要考察你的项目理解深度、技术选型能力、问题解决能力、以及对项目成果的复盘与表达能力。 ● 建议的答题结构：首先简要介绍项目背景和你的角色；接着详细阐述你在项目中负责的具体工作、遇到的挑战及如何解决；最后总结项目成果和你的收获。

参考答案

我在XX公司实习期间，参与了一个内部运营效率工具的开发，其中我主导了"智能数据报表系统"的前端部分，这个项目我个人觉得做得比较好。项目背景是，之前的运营数据统计完全依赖人工手动导出和整理，效率低下且易出错。我们团队的目标是构建一个自动化、可视化的报表系统，让运营人员能够实时查看核心数据指标。

我主要负责报表的可视化组件开发和数据交互逻辑。在技术选型上，我没有简单地套用现有图表库，而是深入调研了业务需求，最终选择了ECharts进行定制化开发，因为它的灵活性和丰富图表类型能很好地满足我们多样化的报表展示需求。开发过程中最大的挑战是如何处理海量数据在前端的渲染性能问题。初期我们尝试直接加载全部数据，导致页面卡顿严重。我查阅资料并与后端协商，最终采用了数据分批加载和前端数据虚拟化的方案，即只加载当前视图所需数据，并对表格和图表进行局部渲染。这不仅大幅提升了页面响应速度，也降低了后端的数据传输压力。

另一个亮点是，我设计并实现了一个可配置的报表生成器。运营人员可以通过拖拽组件、配置数据源和筛选条件，自定义生成各种报表，极大地提高了他们的工作效率，也减少了开发人员的维护成本。在项目上线后，我通过用户反馈持续迭代，例如增加了数据导出功能、优化了图表联动效果，使得系统更加完善。这个项目让我深刻体会到了前端工程化和性能优化的重要性，也锻炼了我从需求分析到方案设计、再到具体实现和持续优化的全链路项目能力。

2. 想知道你们的项目大概是什么样的结构，你在开发的时候会从什么地方下手？

题目要点

● 主观型问题，无唯一标准答案。 ● 面试官主要考察你对项目整体架构的理解、系统性思维、以及实际开发流程的把控能力。 ● 建议的答题结构：首先概述项目采用的架构模式（如微前端、Monorepo、单体应用等）；接着描述核心模块的划分和技术栈；然后详细说明当你接到一个开发任务时，会从哪些方面着手分析和实现；最后可以提及一些你在开发流程中的最佳实践或思考。

参考答案

我们团队负责的XX系统，其整体架构是一个典型的微前端应用。具体来说，我们采用了基于qiankun的微前端方案，将整个系统拆分为多个独立的子应用，例如用户管理、订单中心、数据分析等。每个子应用都可以独立开发、独立部署，但在主应用中进行集成和路由管理。这样的好处是，团队成员可以专注于各自的子应用开发，降低了耦合度，也便于技术栈的演进和模块的复用。

当我接到一个开发任务时，通常会遵循以下步骤：

首先是需求分析和理解。我会仔细阅读需求文档，明确用户故事和业务目标，如果存在不清晰的地方，会主动与产品经理或设计师沟通，确保我对需求的理解是准确和全面的。这一步至关重要，它决定了后续开发的方向。

其次是技术方案设计。我会根据需求，结合当前项目的架构和技术栈，思考实现方案。这包括：是否需要新增组件或模块？数据流如何设计？接口如何定义？是否涉及到性能优化或兼容性问题？例如，如果是一个新功能模块，我会考虑其在微前端架构下的集成方式，以及与主应用之间的通信机制。如果涉及复杂的数据处理，我会优先考虑数据在前端的缓存策略，以及如何减少不必要的渲染。

接着是代码实现。我会根据设计好的方案，开始编写代码。我会严格遵循团队的代码规范和组件化原则，确保代码的可读性和可维护性。在实现过程中，我会注重模块的拆分和函数的封装，避免出现冗余代码。

在开发过程中，我非常重视自测和调试。我会编写单元测试和集成测试，确保自己实现的功能符合预期。如果遇到问题，会利用浏览器开发工具进行调试，分析问题原因并及时解决。此外，我也会关注代码的性能，例如使用Chrome DevTools进行性能分析，寻找优化点。

最后是代码评审和部署。在完成开发和自测后，我会提交代码进行代码评审，听取团队成员的建议，并对代码进行优化。通过评审后，会按照CI/CD流程进行部署，并在部署后关注线上监控，确保功能稳定运行。

这种结构化的开发流程，使得我在面对复杂任务时能够有条不紊地进行，并能及时发现和解决问题，保障了项目的开发质量和效率。

3. IntersectionObserver的事件回调是宏任务还是微任务？如何判断呢？

题目要点

● JavaScript 事件循环机制：考察对宏任务和微任务的理解，以及它们在事件循环中的执行顺序。 ● 浏览器 API 原理：考察对 IntersectionObserver 这一 Web API 的底层工作原理的掌握，特别是其回调函数的执行时机。 ● 实际应用与判断：考察如何在实际开发中判断异步操作的类型，并理解其对程序性能和行为的影响。

参考答案

1.1 原理说明

IntersectionObserver 的事件回调是微任务。

宏任务 (MacroTask)：包括 script (整体代码)、setTimeout、setInterval、setImmediate (Node.js 独有)、I/O、UI 渲染等。每次事件循环只会执行一个宏任务，执行完后会检查微任务队列。
微任务 (MicroTask)：包括 Promise.then()/.catch()/.finally()、MutationObserver、process.nextTick (Node.js 独有)、queueMicrotask。微任务在当前宏任务执行完毕后，下一个宏任务开始之前执行，且会清空所有微任务。

IntersectionObserver 的回调函数被设计为微任务，是为了保证在当前帧的 DOM 更新完成之后、但浏览器渲染之前执行。这样可以确保在回调函数中进行的 DOM 操作能够及时反映在当前帧的渲染中，避免了不必要的布局抖动或视觉闪烁。

字节-今日头条-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 08:02:45 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识和工程化实践

本轮共 19 道题。答案默认折叠，便于先自行作答。

1. 介绍一下简历中的组件库项目

题目要点

非唯一标准答案：本题是主观型问题，没有唯一的标准答案，主要考察面试者的综合能力。
考察能力：面试官主要考察您的表达能力、对项目背景和技术细节的理解、解决问题的思路系统性，以及项目复盘和总结的能力。
答题结构建议：建议从项目背景和目的、技术选型与核心功能、遇到的挑战与解决方案、个人贡献与收获等方面展开阐述，力求条理清晰、重点突出。

参考答案

高质量参考范文：

在我的简历中，我提到了一个组件库项目，这个项目是我在实习期间为了统一团队UI规范，提升开发效率而主导或参与开发的。我们的目标是构建一套覆盖常用UI组件（如按钮、输入框、弹窗、表格等）的跨框架（或特定框架如Vue/React）的组件库，以满足业务快速迭代的需求，并保证产品界面的一致性。

在技术选型上，我们选择了Vue 3 + TypeScript + Vite + Sass Modules作为核心技术栈。Vue 3 的 Composition API 帮助我们更好地组织组件逻辑，提升了组件的复用性和可维护性；TypeScript则保证了代码的类型安全，尤其是在大型项目协作中大大减少了潜在的类型错误。Vite作为构建工具，极大地提升了开发服务器的启动速度和热更新效率。在样式方面，我们采用了Sass Modules，确保了组件样式的局部作用域，避免了全局污染，同时通过Sass的变量和混入特性，提升了样式代码的可维护性。

在核心功能实现上，我们关注了组件的通用性和可配置性。例如，在实现一个Select组件时，我们不仅考虑了基本选择功能，还加入了搜索过滤、多选、自定义渲染模板、异步加载选项等高级特性。每个组件都经过了详细的API设计和文档编写，确保其他开发者能够快速上手和正确使用。我们还集成了单元测试和端到端测试，以保证组件的质量和稳定性。

在项目过程中，我们也遇到了一些挑战。例如，如何设计一套灵活的主题机制，使得组件库能够轻松适应不同业务线的品牌风格，我们最终通过CSS Variables和一套主题生成工具解决了这个问题。另一个挑战是性能优化，特别是大型组件（如虚拟列表的表格）的渲染性能，我们通过按需加载、虚拟滚动等技术手段，确保了组件在处理大量数据时依然保持流畅。

通过这个组件库项目，我不仅深入理解了前端组件化开发的最佳实践，也锻炼了我在项目规划、技术选型、问题解决和团队协作方面的能力。我觉得最大的收获是，看到自己开发的组件被其他业务方广泛使用，并有效提升了他们的开发效率时，那种成就感是非常大的。这个项目也让我对前端工程化有了更深刻的理解，认识到标准化、自动化和高质量交付对于前端开发的重要性。

2. vite 和 webpack 有什么区别？

题目要点

构建工具的理解：面试官希望了解面试者对前端构建工具的整体认知，包括它们在前端开发流程中的作用和重要性。
Vite与Webpack的核心差异：考察面试者是否能清晰阐述两者在开发模式（Dev Server）和生产模式（Build）上的根本性区别，特别是它们处理模块依赖和启动开发服务器的方式。
性能优化：面试官想确认面试者是否能从性能角度分析两者的优劣，特别是Vite如何利用ESM（ECMAScript Modules）和原生浏览器支持实现快速的开发体验。
技术趋势：考察面试者是否关注前端生态的新技术发展，并能理解新技术带来的优势和对现有工具的影响。

参考答案

1.1 原理说明

Webpack： Webpack 是一个模块打包器。在开发模式下，Webpack 会将整个应用的所有模块（JavaScript、CSS、图片等）打包成浏览器可以识别的静态资源。在启动开发服务器之前，它需要完成整个打包过程。当代码发生修改时，Webpack 会重新编译并生成新的打包文件，然后通过热模块替换（HMR）机制将更新注入到浏览器中。
Vite： Vite 是一种基于浏览器原生 ES Modules 的构建工具。在开发模式下，Vite 不会预先打包整个应用。它利用浏览器对 ES Modules 的原生支持，当浏览器请求某个模块时，Vite 会即时地对该模块进行转换（例如处理 TypeScript、Vue/React 单文件组件等），然后直接提供给浏览器。这极大地减少了开发服务器的启动时间和热更新的时间。
核心区别与联系：
- 开发模式启动速度：Webpack 需要先打包再启动服务，随着项目规模增大，打包时间会显著增加。Vite 则利用浏览器原生 ES Modules 按需加载，实现了"冷启动"的秒开。
- 热更新（HMR）机制：Webpack 的热更新通常需要重新编译被修改的模块及其依赖链。Vite 的热更新同样基于 ES Modules，当一个模块被修改时，Vite 只需要精确地替换该模块及其直接相关的部分，更新速度更快，因为不需要重新构建整个依赖图。
- 生产环境构建：尽管开发模式下两者原理不同，但在生产环境构建时，Vite 内部仍然会使用 Rollup 进行打包，类似于 Webpack 的打包输出，以获得最佳的兼容性和性能优化（例如代码分割、Tree-shaking 等）。这意味着 Vite 在生产构建阶段也进行打包，并非完全无打包。
- 底层技术：Webpack 依赖于自己的模块解析和打包机制，而 Vite 则深度依赖于浏览器原生的 ES Modules 特性。
- 为什么会出现 Vite：随着前端项目日益庞大，基于打包器的开发服务器在冷启动和热更新方面的性能瓶颈日益凸显。Vite 的出现正是为了解决这一痛点，通过利用浏览器原生能力，显著提升开发效率和体验。

1.2 核心用法 + 使用场景

Vite 的优势使用场景：
- 大型项目开发：对于拥有大量模块和复杂依赖的项目，Vite 的即时按需编译能够显著缩短开发服务器的启动时间和热更新响应时间，提升开发效率。
- 追求极致开发体验：如果你希望在开发过程中获得近乎瞬时的代码修改反馈，Vite 是一个理想的选择。
- 新建项目：对于新项目，Vite 提供了更现代、更快速的开发起点。
Webpack 的优势使用场景：
- 老旧项目或复杂构建需求：对于历史项目，或需要高度定制化构建流程（例如微前端、特殊资源处理）的项目，Webpack 成熟的生态系统和灵活的配置依然是其优势。
- 对浏览器兼容性有极高要求：Webpack 拥有更广泛的浏览器兼容性处理能力，可以通过各种 Loader 和 Plugin 支持老旧浏览器特性。
核心用法体现：无论是 Vite 还是 Webpack，它们的核心目标都是为了提供更好的开发体验和生产环境下的代码优化。Vite 通过"开发阶段无打包"的理念解决了传统打包器的性能痛点，而 Webpack 则以其强大的生态和高度可配置性，满足了各种复杂的构建需求。开发者在项目中选择使用哪种工具，通常取决于项目规模、团队熟悉度、对开发效率和生产环境性能的权衡。

1.3 常见误区或面试陷阱

误区一：Vite 在生产环境也是无打包的。 这是一个常见的误解。Vite 在开发环境利用原生 ESM 实现按需加载，确实没有预打包的步骤。但为了在生产环境中获得最佳的性能和兼容性（例如代码压缩、Tree-shaking、兼容性处理等），Vite 仍然会使用 Rollup 进行打包。面试时如果直接说 Vite 生产环境也无打包，会暴露对 Vite 工作原理理解不深。
误区二：Vite 能够完全替代 Webpack。 尽管 Vite 在许多方面表现出色，尤其是在开发体验上，但它并不能在所有场景下完全替代 Webpack。Webpack 的生态系统更加庞大和成熟，拥有更多针对特定场景的 Loader 和 Plugin，其配置灵活性也更高。例如，一些复杂的构建需求、特定的兼容性要求或集成旧技术栈时，Webpack 可能会是更稳健的选择。
误区三：只强调速度快，不深入原理。 面试官更希望听到你对 Vite 和 Webpack 底层原理的理解，而不仅仅是停留在"Vite 比 Webpack 快"的表层认知。理解它们在模块处理、HMR 实现、构建流程上的差异，并能结合实际场景分析各自的优劣，才能体现出更深入的理解。
误区四：混淆"打包"和"编译/转换"。 Vite 在开发模式下不是"打包"，而是对单个文件进行"编译/转换"以适应浏览器。而 Webpack 则是在启动服务前进行完整的"打包"过程。清晰区分这两个概念很重要。

3. vite 打包可能会有什么问题呢？需要怎么处理？

题目要点

Vite 生产环境构建的理解：考察面试者是否清楚 Vite 在开发和生产环境的不同工作机制，特别是它在生产环境如何进行打包。
常见打包问题及解决方案：面试官想了解面试者是否遇到过 Vite 打包过程中可能出现的问题，以及如何诊断和解决这些问题，体现解决实际问题的能力。
Rollup 配置的掌握：由于 Vite 生产环境依赖 Rollup，面试官会关注面试者是否了解如何通过配置 Rollup 来解决特定的打包问题。
性能优化与兼容性：考察面试者在打包层面如何考虑应用的性能和浏览器兼容性，以及如何通过打包工具进行优化。

参考答案

1.1 原理说明

尽管 Vite 在开发模式下以其"无打包"的理念提供极速体验，但在生产环境，它仍然需要对代码进行打包，以实现最佳的性能优化和兼容性。Vite 内部使用 Rollup 作为其生产环境的打包工具。Rollup 的优势在于其高效的 Tree-shaking（清除未使用的代码）和生成优化过的 ES Modules 捆绑包。因此，Vite 打包时可能遇到的问题，很多时候是与 Rollup 的打包特性、插件机制以及项目本身的特定需求相关的。

阿里-蚂蚁金服-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:05:39 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

阿里-蚂蚁金服-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:05:39 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

我参与过一个大型电商平台的前端开发，该项目的复杂度较高，主要体现在以下几个方面：

1. 技术栈丰富：项目中使用了Vue.js、Vuex、Vue Router、Vite、TypeScript等技术，结合了 Vuex 进行状态管理，Vue Router 实现了复杂的路由管理，Vite 作为构建工具提高了开发效率。
2. 性能要求高：由于平台需要支持大量的商品列表和用户并发访问，对性能的要求极高。我们通过代码分割、懒加载、图片优化等手段确保了页面的快速加载和流畅交互。
3. 功能模块复杂：涉及商品展示、购物车、订单管理、用户中心等多个功能模块，各模块之间需要紧密协作和数据共享。
4. 跨团队协作：前端团队与后端团队、设计团队紧密合作，确保项目的顺利交付。

4. 实习中的全栈部分做了什么

题目要点

全栈开发能力。

参考答案

在实习期间，我参与了多个全栈开发项目，主要负责以下工作：

1. 后端接口开发：使用Node.js和Express框架开发RESTful API接口，与前端进行数据交互。我设计并实现了用户认证、商品管理、订单处理等功能的API。
2. 数据库设计与操作：负责MySQL数据库的设计和优化，包括表结构设计、索引优化和查询性能提升。编写SQL语句进行数据的增删改查操作。
3. 前端与后端的联调：确保前后端数据格式的一致性和接口的稳定性，处理可能出现的跨域问题和数据验证问题。
4. 部署与运维：参与项目的部署工作，使用Docker容器化应用，并通过Nginx进行反向代理配置。监控应用的运行状态，及时处理线上问题。

5. Vue 和 React 都是什么时候开始接触的

题目要点

技术学习历程。

参考答案

我是在大学期间开始接触Vue和React的。具体来说：

1. Vue：在大三时，我通过一个个人项目开始学习Vue。当时，我被Vue简洁的语法和强大的组件化特性所吸引，于是深入研究了Vue的文档，并通过实践项目掌握了Vue的基本使用方法，包括组件的创建、数据绑定、事件处理等。
2. React：在大四时，我为了扩展自己的技术栈，开始学习React。我通过官方文档和在线教程了解了React的组件化思想、JSX语法以及Hooks的使用。通过一个小型的社交媒体项目，我实践了React的单向数据流和状态管理。

6. 对原生 JS 如何学习的，掌握程度怎么样

题目要点

JavaScript能力。

阿里-阿里妈妈-实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:04:12 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现第一个元素不移动后续元素与左边相隔8px（:not(:first-child）

题目要点

CSS选择器与布局。

参考答案

要实现第一个元素不移动，后续元素与左边相隔8px，可以使用CSS中的:not(:first-child)选择器来选择除第一个元素外的所有同级元素，并为其设置左边距。这在布局中非常有用，可以避免对第一个元素应用不必要的样式。以下是一个示例：

<div class="container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
 <div class="item">Item 4</div>
</div>

.container {
 display: flex;
}
.item:not(:first-child) {
 margin-left: 8px;
}

在这个示例中，.item:not(:first-child)选择器匹配了所有带有item类的元素，除了第一个元素。然后，我们通过margin-left: 8px为这些元素设置了左边距，使它们与左边的元素相隔8px。第一个元素不会受到影响，因此不会产生左边距，从而实现了题目要求的布局效果。这种技术在创建水平排列的元素时非常有用，例如导航栏或标签页，可以确保第一个元素与容器的边缘对齐，而后续元素之间保持一致的间距。

2. 写一个防抖

题库原题：实现 debounce（防抖）函数

题目要点

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

参考答案

触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

const debounce = (fn, time) => {
 let timeout = null;
 return function() {
 clearTimeout(timeout)
 timeout = setTimeout(() => {
 fn.apply(this, arguments);
 }, time);
 }
};

防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

3. 讲讲你的项目难点

题目要点

项目经验与问题解决能力。

阿里-阿里妈妈-实习 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:04:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. Flex布局中flex-grow与flex-shrink的计算规则？

题目要点

CSS布局。

参考答案

在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下：

flex-grow：
1. 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。
2. 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配；如果小于1，则先分配剩余空间。
3. 示例：如果有两个子元素，flex-grow分别为1和2，总剩余空间为300px，则第一个子元素获得100px，第二个获得200px。
flex-shrink：
1. 定义：定义项目的收缩比例，即项目在主轴方向上需要收缩时的比例。
2. 计算规则：当总项目大小超过容器可用空间时，项目按flex-shrink值的比例收缩。收缩的最小尺寸受min-width或min-height限制。
3. 示例：如果有两个子元素，flex-shrink分别为1和2，总超出行空间为100px，则第一个子元素收缩约33.33px，第二个收缩约66.66px。
完整计算步骤：
1. 计算总可用空间：容器主轴长度减去所有项目初始尺寸（flex-basis或未设置时的内容尺寸）。
2. 判断剩余空间：
  1. 若剩余空间为正，按flex-grow分配扩展空间。
  2. 若剩余空间为负，按flex-shrink分配收缩空间。
3. 计算比例：每个项目的比例为flex-grow或flex-shrink值除以所有项目对应值之和。
4. 分配空间：按比例将剩余空间分配或从项目中扣除。
flex属性：flex是flex-grow、flex-shrink和flex-basis的简写形式。例如，flex: 1 1 0表示flex-grow: 1、flex-shrink: 1、flex-basis: 0。这在等比例分配剩余空间时非常有用。

2. 讲一下js闭包

题库原题：说说你对闭包的理解，以及闭包使用场景

题目要点

什么是闭包

简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。

// 正常访问
var lan = 'zh';
function hello(){
 var name = '前端未来';
}
console.log(name)//很明显'undefined'

// 换成闭包
function hello(){
 var name = '前端未来';
 function demo(){
 console.log(name)//打印：前端未来
 }
}

闭包的应用场景

1. 数据封装和隐私

闭包可以用来封装数据和功能，创建具有私有变量和公共接口的模块。

应用

创建具有私有状态的模块或对象。

2. 函数工厂

闭包用于创建返回函数的函数，这些返回的函数可以维持状态。

阿里-国际电商-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:02:07 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 19 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的技术栈，为什么要学前端，如何学习前端的？

题目要点

技术栈、学习动机与方法。

参考答案

技术栈：
1. HTML/CSS：用于构建页面结构和样式。
2. JavaScript：包括ES6+特性，用于实现页面交互。
3. 框架：熟练使用Vue.js和React，了解其生态系统（如Vue Router、Vuex、React Router、Redux）。
4. 构建工具：使用Vite和Webpack进行项目构建和优化。
5. 状态管理：使用Vuex和Redux进行状态管理。
6. UI组件库：使用Element UI、Ant Design等。
7. 其他工具：Git、ESLint、Prettier、Jest等。
学习动机：
1. 前端开发结合了技术和创意，能够直接看到代码转化为用户界面，带来了即时满足感。
2. 前端领域技术更新快，充满挑战，提供了不断学习新知识的机会。
3. 对用户界面和交互设计的兴趣，希望创造良好的用户体验。
学习方法：
1. 在线课程：通过Coursera、Udemy、MDN Web Docs等平台学习基础知识。
2. 实践项目：通过个人项目和开源项目应用所学知识。
3. 阅读书籍：如《JavaScript高级程序设计》、《你不知道的JavaScript》。
4. 参与社区：在GitHub、Stack Overflow等社区与开发者交流，解决遇到的问题。
5. 技术博客：关注CSS-Tricks、JavaScript.info等博客，了解新技术和最佳实践。

2. 常见的H5标签有哪些，你是怎么用的

题库原题：常见的H5标签有哪些，你是怎么用的

题目要点

常见 H5 标签包括结构语义标签、文本语义标签、表单标签和媒体标签；实际使用中优先考虑语义表达和可访问性，而非样式；充分利用表单和媒体标签的原生能力以减少 JS 复杂度；canvas 与 svg 需根据场景选择；合理使用语义化标签能显著提升页面质量和长期可维护性。

参考答案

在实际工程中，H5 标签并不是“记住有哪些”，而是是否理解它们在语义、结构、可访问性和默认行为上的差异，并能在合适的场景中使用。对标签的理解，直接影响页面结构质量、SEO 以及后续的可维护性。

从结构层面看，最常用的一类是语义化结构标签。例如 header、nav、main、section、article、aside、footer。在页面搭建时，通常会用 header 承载页面或模块级头部信息，用 nav 明确标识导航区域，用 main 作为页面主体的唯一入口，再用 section 或 article 对内容进行分块。这类标签本身不改变样式，但会向浏览器、搜索引擎和辅助技术清晰表达“这块内容的角色是什么”，比单纯使用 div 更具表达力。

阿里-国际电商-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:02:07 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. React/Vue/Angular框架熟悉哪个？对比一下

题目要点

前端框架。

参考答案

我对React和Vue较为熟悉，以下是对这三大框架的对比：

React：
1. 优点：
  1. 组件化：React采用组件化开发，将复杂的用户界面拆分为多个可复用的组件，提高代码的可维护性和复用性。
  2. 虚拟DOM：使用虚拟DOM优化DOM操作，减少页面重绘和回流，提升性能。
  3. 生态丰富：拥有庞大的生态系统，如Redux、React Router等，可满足各种复杂的开发需求。
  4. 社区活跃：社区庞大，更新迅速，遇到问题时容易找到解决方案。
2. 缺点：
  1. 学习曲线：对初学者来说，需要学习JSX语法和组件化的思想，有一定学习成本。
  2. 配置繁琐：项目搭建和配置相对复杂，需要手动配置Webpack等构建工具。
Vue：
1. 优点：
  1. 易上手：语法简洁，文档清晰，容易上手，适合初学者快速入门。
  2. 渐进式框架：可以逐步引入Vue，与现有项目或其他技术结合使用，灵活性高。
  3. 模板语法：使用HTML模板，对熟悉HTML和JavaScript的开发者更友好。
  4. 性能优化：也采用虚拟DOM，性能表现良好。
2. 缺点：
  1. 生态不够丰富：相较于React，生态和社区稍小，插件和库的选择相对有限。
  2. 大型项目支持：在处理大型复杂项目时，可能不如React和Angular成熟。
Angular：
1. 优点：
  1. 全栈解决方案：提供从前端到后端的一整套解决方案，包括路由、状态管理、表单处理等。
  2. 强类型系统：基于TypeScript开发，具有强类型检查，有助于大型项目的代码维护和团队协作。
  3. 依赖注入：内置依赖注入系统，方便管理组件和服务之间的依赖关系。
  4. 适合企业级应用：在开发大型企业级应用时，提供了一套完整的架构和规范。
2. 缺点：
  1. 学习曲线陡峭：对初学者来说，需要掌握TypeScript、依赖注入、模块化等概念，学习成本较高。
  2. 灵活性较低：框架较为庞大，定制化程度不如React和Vue高，不适合小型项目快速开发。
  3. 社区相对较小：相较于React，社区活跃度和更新速度稍逊一筹。

2. React Hooks闭包陷阱的产生原因？

题库原题：说说你对 React Hook的闭包陷阱的理解，有哪些解决方案？

题目要点

React Hook 的闭包陷阱是一个常见的问题,它发生在使用 Hook 时,特别是在处理事件处理函数或异步操作时。

闭包陷阱的本质是,在 Hook 内部定义的函数会捕获 Hook 函数执行时的状态,而不是最新的状态。这可能会导致一些意想不到的行为,比如事件处理函数无法访问最新的状态,或者异步操作使用了过期的数据。

造成这个问题的原因是,React Hook 的设计使得组件函数在每次渲染时都会重新定义内部的函数,而这些函数会关闭当时的状态。

解决这个问题的主要方案有以下几种:

使用 useCallback Hook:

阿里-灵犀互娱-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:00:30 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 21 道题。答案默认折叠，便于先自行作答。

1. 先简单自我介绍

题目要点

自我认知。

参考答案

您好，我叫[你的名字]，毕业于[学校名称]的[专业名称]专业。在大学期间，我就对计算机科学产生了浓厚的兴趣，尤其是前端开发领域。在学习和实践中，我积累了扎实的编程基础，熟练掌握了HTML、CSS、JavaScript等前端开发技术，并在多个项目中担任核心开发角色。我热爱前端开发工作，喜欢通过代码创造用户友好的界面和交互体验。在业余时间，我会不断学习新技术，提升自己的专业能力。我希望能够在一个富有创新和挑战的环境中工作，与优秀的团队成员共同成长。

题库原题：什么是微前端？

题目要点

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

参考答案

各个前端应用还可以独立运行、独立开发、独立部署。

微前端不是单纯的前端框架或者工具，而是一套架构体系，

8. SPA和MPA的区别？

题库原题：SPA和MPA的区别？

题目要点

SPA 通过前端路由在单一 HTML 中完成页面切换，交互流畅但首屏和 SEO 成本较高；MPA 每次导航请求新页面，SEO 友好且隔离性强，但交互体验有限；两者本质差异在于前后端渲染与路由职责的划分；现代项目常通过 SSR、SSG 等方式在两种模式之间折中。

阿里-灵犀互娱-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 06:00:30 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

参考答案

前端和后端在技术栈、运行环境、关注点等方面有显著区别：

技术栈：
1. 前端：主要使用HTML、CSS、JavaScript及其框架（如Vue、React、Angular）进行开发。例如，使用Vue.js构建用户界面，处理用户交互逻辑。
2. 后端：使用服务器端语言（如Node.js、Java、Python、Ruby）和框架（如Express、Spring Boot、Django、Rails）开发API、处理业务逻辑和与数据库交互。例如，使用Node.js和Express框架搭建RESTful API服务器。
运行环境：
1. 前端：代码运行在客户端浏览器中，与用户直接交互。前端开发者需要考虑不同浏览器的兼容性和用户体验。
2. 后端：代码运行在服务器上，处理请求、管理数据和执行业务逻辑。后端开发者关注服务器性能、安全性和可扩展性。
关注点：
1. 前端：注重用户体验、界面设计、响应式布局和性能优化（如页面加载速度、交互流畅性）。前端开发者需要与设计师紧密合作，实现视觉效果和交互功能。
2. 后端：关注数据存储、业务逻辑实现、API设计和安全性。后端开发者需要与数据库交互，处理并发请求，并确保系统的稳定性和可靠性。
开发工具：
1. 前端：使用VS Code等编辑器，搭配浏览器开发者工具进行调试。依赖构建工具（如Vite、Webpack）进行代码打包和优化。
2. 后端：使用IntelliJ IDEA、PyCharm等IDE，搭配数据库管理工具（如pgAdmin、MySQL Workbench）进行开发。需要配置服务器环境（如Nginx、Apache）和部署工具（如Docker、Kubernetes）。
数据处理：
1. 前端：主要处理数据的展示和用户输入的收集。通过API从后端获取数据，并将其转换为用户界面。
2. 后端：负责数据的存储、查询和业务逻辑处理。与数据库（如MySQL、MongoDB）交互，执行复杂的数据操作和事务管理。
性能优化：
1. 前端：优化页面加载时间、减少重绘和回流、提升交互响应速度。例如，通过懒加载、代码分割、图片优化等技术提高性能。
2. 后端：优化服务器响应时间、数据库查询效率、减少内存泄漏和提升并发处理能力。例如，使用缓存机制（如Redis）、数据库索引优化、连接池管理等技术提高性能。

4. 最近有在看什么技术文章吗

题目要点

学习态度。

参考答案

最近我在阅读关于WebAssembly性能优化的文章，了解如何通过WebAssembly提升前端应用的运行效率。例如，我读了一篇关于使用WebAssembly进行图像处理的文章，介绍了如何将图像处理算法编译为WebAssembly模块，从而在浏览器中实现高性能的图像编辑功能。

同时，我也在关注前端框架的新特性，如Vue 3的Composition API和React的Concurrent Mode。这些新技术有助于构建更高效、响应更快的用户界面。

此外，我还阅读了一些关于前端安全的文章，特别是关于防止XSS攻击和CSRF攻击的最佳实践，这些知识对于构建安全的Web应用至关重要。

通过这些文章，我能够不断更新自己的知识体系，保持对技术前沿的敏感度，并将所学应用到实际项目中。

5. canvas 引擎有什么优化渲染性能的方案

题库原题：canvas 有什么优化渲染性能的方案

阿里-智能产品事业部-暑期实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:57:10 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 请介绍一下你在 [具体项目名称] 中主要做了哪些工作？

题目要点

项目经验。

参考答案

回答参考：

项目架构设计：参与设计项目的整体架构，选择前端技术栈。考虑到项目规模和性能需求，选择了 Vue.js 作为前端框架，Vuex 进行状态管理，Vue Router 实现单页面应用的路由管理，Vite 作为构建工具。这些技术的选择旨在提高开发效率和应用性能。
核心模块开发：负责开发用户认证模块，实现了基于 JWT（JSON Web Token）的登录、注册和权限管理功能。通过与后端 API 的紧密协作，确保了用户数据的安全传输和存储。同时，开发了数据可视化模块，利用 ECharts 库展示复杂的业务数据，帮助用户更直观地理解和分析数据。
性能优化：通过分析页面的性能瓶颈，实施了一系列优化措施。例如，采用代码分割技术将应用拆分成多个小块，实现按需加载；使用懒加载技术延迟加载非首屏资源；对图片资源进行压缩和格式优化，减少页面加载时间。这些优化显著提升了页面的加载速度，改善了用户体验。
代码审查与测试：积极参与代码审查过程，遵循项目编码规范，确保代码质量。编写了大量的单元测试和集成测试用例，使用测试框架（如 Jest）进行自动化测试，确保代码的稳定性和可靠性，减少上线后的潜在问题。

2. 在 [具体项目名称] 中，遇到了哪些技术难点？你是如何解决的？

题目要点

问题解决能力。

参考答案

回答参考：

跨浏览器兼容性：项目需要支持多个主流浏览器，包括一些旧版本的浏览器。为了解决这一问题，使用 Babel 将 ES6+ 代码转译为 ES5，确保大部分现代 JavaScript 特性能够在旧浏览器中运行。同时，引入 Polyfill 库来补充那些浏览器原生不支持的 API，例如 Promise、fetch 等。此外，使用 Autoprefixer 工具为 CSS 添加必要的浏览器前缀，确保 CSS 样式在不同浏览器中的一致性。
性能优化：随着项目规模的扩大，页面的加载时间和交互响应时间面临着挑战。通过分析，发现主要的性能瓶颈在于大量的初始 JavaScript 包和未优化的图片资源。为解决此问题，实施了代码分割策略，将应用的代码分割成多个小块，按需加载，减少了初始加载的包大小。同时，将图片资源转换为 WebP 格式，并实现了图片的懒加载，只有在用户滚动到图片位置时才加载图片，从而显著缩短了页面的初始加载时间。
后端 API 集成：在开发过程中，遇到了 API 响应数据格式不一致的问题，这给前端的数据处理带来了困难。为了解决这个问题，设计了一个统一的数据处理中间层，对后端返回的数据进行预处理和格式化，使其符合前端的要求。同时，与后端团队进行了深入沟通，推动他们优化 API 设计，以更好地满足前端的需求。

阿里-阿里云-暑期实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:49:45 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 一共三轮面试，经过整理后形成该面经。

架构兼容性：理解 Vite 插件如何复用 Rollup 钩子并扩展开发环境特有的 Server 钩子。
钩子应用场景：能够准确区分 config（配置修改）、resolveId/load（路径解析）、transform（代码改写）的应用边界。
AST 与代码转换：掌握如何通过 AST 操纵实现对代码的无损增强，并维持 SourceMap 的连续性。
环境控制：利用 configureServer 扩展中间件，以及通过 handleHotUpdate 实现精准的热更新控制。
虚拟模块技术：利用虚拟模块机制实现编译时信息的动态注入。

参考答案

Vite 插件的实现本质上是基于 Rollup 插件接口的扩展，并结合了 Vite 特有的开发服务器钩子。可以从插件系统的架构设计、生命周期钩子（Hooks）的执行时序、以及针对开发环境与生产环境的差异化处理三个维度进行回答。

阿里-盒马-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:48:59 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 聚焦前端基础深度：虚拟DOM性能边界（复杂DOM场景优劣）、响应式布局实现（媒体查询/弹性布局）、浏览器兼容性实战（Polyfill/Babel）、微信小程序架构设计理念。难点在于Rem计算优化策略和O(1)空间复杂度的字符串逆序算法设计。

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

个人背景、技能、经验、职业规划等。

参考答案

参考模版如下，一般3分钟以内即可。
面试官您好！我叫[姓名]，毕业于[毕业院校]，专业是[专业名称]。我有XX段前端开发实习经验，熟练掌握HTML、CSS、JavaScript等前端技术栈，主要的技术栈是React。在XX公司实习期间，主要参与过供应链管理系统和微信小程序开发，学习了前端相关专业技术，以及熟悉了项目的整体流程，同时积累了丰富的项目经验。

2. React 的虚拟 DOM 解决了什么问题？

题库原题：React 的虚拟 DOM 解决了什么问题？

题目要点

跨平台能力：通过对象层的抽象，实现了 UI 描述与具体渲染平台的解耦。
开发范式转换：将命令式的 DOM 操作转变为声明式的数据驱动，提升了复杂业务的可维护性。
性能兜底：通过批处理和 Diff 算法，在不增加开发者负担的情况下，减少了不必要的真实 DOM 操作开销。
研发效率：让开发者专注于业务逻辑而非底层 DOM 树的增删改查，降低了出错概率。

参考答案

在探讨 React 虚拟 DOM（Virtual DOM）所解决的问题时，不能简单地将其归结为“性能更快”，这实际上是一个常见的误区。

从长期的工程实践和框架演进来看，虚拟 DOM 核心解决了以下几个维度的挑战：

1. 解决跨平台与抽象层的问题

虚拟 DOM 最本质的贡献在于建立了一层声明式的抽象。在传统的 Web 开发中，代码直接耦合在真实的 DOM 环境中。而虚拟 DOM 将复杂的 UI 转换成了一种轻量级的 JavaScript 对象结构（即 VNode）。

这种抽象层使得 React 脱离了浏览器的物理限制。因为 VNode 只是普通的 JS 对象，它不仅可以被渲染为浏览器的 DOM，也可以被渲染为移动端的原生控件（React Native）、服务端字符串（SSR）甚至是 Canvas 绘制指令。它解决了 UI 描述与底层渲染引擎之间的强耦合问题，实现了“一次学习，随处编写”的愿景。

阿里-盒马-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 05:48:59 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 深入框架原理与工程化：小程序加载流程（缓存/渲染机制）、Vue路由动态加载（Code Splitting）、全局状态管理（Vuex模块化）、生命周期资源管理（mounted/beforeDestroy）。难点在于手势识别算法（滑动速度计算）和可控动画引擎（开始/暂停/取消）。

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. 小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。

题库原题：小程序的页面加载流程是怎样的？请简要描述从用户点击小程序图标到页面显示的整个过程。

题目要点

双线程并行：启动过程是渲染层（UI）和逻辑层（JS）同步初始化的过程。
离线包机制：通过本地缓存和分包加载策略，极大减少了网络传输对首屏的影响。
预加载优化：微信客户端通过预热环境和提前下载包来压榨启动耗时。
数据驱动渲染：首屏显示依赖于逻辑层到渲染层的初始数据传输（setData 机制的前身）。

参考答案

小程序的加载是一个多线程协作的过程，主要可以分为环境准备、代码下载、注入运行以及首屏渲染四个阶段。

1. 运行环境准备（准备阶段）

当用户点击小程序图标时，微信客户端会立即启动一个原生容器。

进程启动：微信会为小程序分配独立的进程或线程。
双线程环境初始化：微信会同时初始化两个运行环境，即逻辑层（AppService）和渲染层（WebView）。为了提速，微信通常会预先启动一个通用的空白 WebView（预加载机制），从而缩短环境搭建的时间。

2. 代码包下载与加载（资源阶段）

在环境准备的同时，微信会根据小程序的 AppID 去服务端请求最新的代码包。

增量更新与缓存：如果本地已有缓存，则直接校验版本；若无或版本过旧，则下载加密的代码包。
分包加载优化：如果开发者配置了分包，此时只会下载“主包”内容，从而减少首次下载的数据量，提升启动速度。

3. 代码注入与逻辑初始化（初始化阶段）

代码包下载完成后，微信会开始解析并执行代码。

逻辑层注入：执行 app.js 和各页面的 JS 逻辑。此时，小程序会触发 App.onLaunch 和 App.onShow 生命周期回调。
配置解析：解析 app.json 和页面配置，确定全局样式、路由关系及初始页面。

4. 渲染层视图构建与首屏渲染（渲染阶段）

这是用户肉眼感知页面出现的关键时刻。

视图层初始化：渲染层载入 WXML 转换后的模板和 WXSS 样式。
初始数据传输（First Paint）：逻辑层在实例化页面后，会将初始数据（Initial Data）通过微信底层提供的 evaluateJavascript 方式，跨线程传递给渲染层。
动态渲染：渲染层接收到数据后，结合模板生成最终的 DOM 树，并交由浏览器引擎进行绘制。

5. 交互就绪（Finish 阶段）

生命周期触发：页面初次渲染完成后，逻辑层会收到反馈，并触发页面的 onReady 回调。此时，逻辑层与渲染层已经建立了稳定的双向数据绑定，用户可以开始进行交互操作。

2. 小程序页面间有哪些传递数据的方法？

题库原题：小程序页面间有哪些传递数据的方法？

京东-技术中台-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:48:05 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试深度考察JavaScript核心原理（闭包、继承实现）、前端框架（Vue响应式机制、虚拟DOM性能、Vue vs React区别）、性能优化（高并发请求处理、HTTP/2应用）、前端安全（XSS/CSRF防御）。难点聚焦于Vue响应式系统限制的解决（如动态字段更新）、复杂布局实现（自适应流式），以及高效算法设计（O(n)去重）。

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

个人背景、能力、经验。

参考答案

我叫[姓名]，毕业于[学校]，专业是[专业]。我有[X]年的前端开发经验，熟练掌握HTML、CSS、JavaScript等前端技术，熟悉Vue.js和React框架。在项目中，我注重代码质量和用户体验，善于解决复杂的技术问题。我曾参与过多个大型项目的开发，例如[项目名称]，负责[具体工作]，通过优化代码结构和性能，提升了页面加载速度和用户体验。

2. 怎么学习javascript的？讲一下闭包，自己的使用场景

题目要点

JavaScript学习方法、闭包概念及应用。

参考答案

学习JavaScript时，我首先从基础语法入手，通过阅读经典书籍如《JavaScript高级程序设计》来系统地学习。闭包是JavaScript中的一个重要概念，它允许函数记住并访问其创建时所在的作用域链中的变量。闭包的使用场景很多，比如在事件处理中，可以使用闭包来保存事件相关的数据。例如，创建一个计数器函数，每次调用时返回当前的计数值，利用闭包可以保持计数器的状态。

3. Javascript如何实现继承？

题库原题：Javascript如何实现继承？

题目要点

1. 原型链继承

通过将一个构造函数的实例作为另一个构造函数的原型，实现属性和方法的继承。

特点

简单易实现。
缺点是父类实例的属性会被所有子类实例共享。

2. 借用构造函数（经典继承）

通过在子类构造函数中调用父类构造函数，实现属性的继承。

特点

避免了原型链继承共享属性的问题。
但无法继承父类的原型方法。

3. 组合继承（原型链+借用构造函数）

结合原型链继承和借用构造函数的方法，既调用父类构造函数，又将父类原型赋值给子类原型。

特点

可以继承实例属性和原型方法。
需要注意避免构造函数属性的多次调用。

4. 原型式继承

使用一个函数来创建一个新对象，并将这个新对象的原型指向另一个对象。

特点

适用于对象之间的属性继承，不涉及构造函数。

5. 寄生式继承

基于原型式继承，但添加了额外的包装函数，以提供更好的控制和灵活性。

特点

通过创建对象的副本来实现继承，避免修改原始对象。

6. ES6 类继承

使用class关键字和extends关键字实现继承。

特点

语法简洁，易于理解。
底层仍然是基于原型链实现。

参考答案

一、是什么

继承（inheritance）是面向对象软件技术当中的一个概念。

如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”

继承的优点

继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码

京东-技术中台-校招 · 第 1 轮 · 二面

Fri, 27 Jun 2025 05:48:05 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试聚焦CSS布局核心问题（浮动清除、BFC机制）、高频JS手写能力（防抖函数）、工程化实践（TS迁移痛点、Vue3升级策略）、深度性能优化（缓存协同更新、Tree Shaking原理）。难点在于浮动导致的布局塌陷解决方案、CDN与本地缓存协同策略设计，以及复杂框架迁移的兼容性处理。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 浮动元素导致的布局错乱应该如何解决？

题目要点

CSS浮动布局及解决方案。

参考答案

浮动元素会导致其父元素高度塌陷，从而影响布局。解决方法有：

1. 清除浮动：在浮动元素后面添加一个空的`div`，设置`clear: both`。
2. 使用伪元素清除浮动：在父元素上使用`::after`伪元素，设置`clear: both`。

.parent::after {
 content: "";
 display: block;
 clear: both;
}

1. 使用`overflow: hidden`：给父元素设置`overflow: hidden`，但可能会隐藏超出部分的内容。
2. 使用`BFC`（块级格式化上下文）：通过设置`display: flow-root`或`overflow: auto`等属性，使父元素形成一个独立的BFC，从而包含浮动元素。

2. 实现一个固定侧边栏+自适应主内容的布局

题目要点

CSS布局技巧。

参考答案

可以使用flexbox布局实现固定侧边栏和自适应主内容的布局：

<div class="container">
 <div class="sidebar">侧边栏</div>
 <div class="main">主内容</div>
</div>

.container {
 display: flex;
}
.sidebar {
 width: 200px; /* 固定宽度 */
 background-color: #f0f0f0;
}
.main {
 flex: 1; /* 自适应宽度 */
 background-color: #ffffff;
}

3. 实现 debounce（防抖）函数

题库原题：实现 debounce（防抖）函数

京东-广告数据-校招 · 第 1 轮 · 一面

Fri, 27 Jun 2025 05:46:50 +0000

← 已是第一轮 · 返回本次面经 · 已是最后一轮 →

字节-飞书-校招 · 第 1 轮 · 一面

Thu, 26 Jun 2025 08:23:26 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本次面试主要考察前端基础知识和实际应用能力。

本轮共 20 道题。答案默认折叠，便于先自行作答。

1. 实现一个宽度自适应的搜索框。

题目要点

CSS布局能力： 面试官希望确认候选人对CSS的布局方式（如Flexbox、Grid或传统布局）的掌握程度，以及如何实现元素的响应式和自适应。
响应式设计： 考察候选人是否能考虑不同屏幕尺寸下的用户体验，并运用CSS媒体查询、视口单位等技术实现宽度自适应。
HTML结构： 确认候选人是否能编写语义化且结构清晰的HTML代码。

参考答案

1.1 原理说明

宽度自适应的搜索框是指搜索框的宽度能够根据其父容器的宽度或视口宽度自动调整，以适应不同的屏幕尺寸和设备。实现这种效果通常依赖于CSS的弹性布局（Flexbox）或网格布局（Grid），结合相对单位（如百分比、vw/vh）或弹性单位（如flex属性）。其核心思想是让元素能够"伸缩自如"，而不是固定尺寸。

1.2 核心用法 + 示例代码

以下是使用Flexbox实现宽度自适应搜索框的示例：

<div class="search-container">
 <input type="text" class="search-input" placeholder="请输入搜索内容">
 <button class="search-button">搜索</button>
</div>

.search-container {
 display: flex;
 width: 100%; /* 占据父容器的全部宽度 */
 max-width: 600px; /* 设置最大宽度，防止过宽 */
 margin: 20px auto; /* 居中显示 */
 border: 1px solid #ccc;
 border-radius: 5px;
 overflow: hidden; /* 防止内容溢出 */
}

.search-input {
 flex-grow: 1; /* 占据剩余空间 */
 padding: 10px;
 border: none;
 outline: none; /* 移除聚焦时的边框 */
 font-size: 16px;
}

.search-button {
 padding: 10px 15px;
 background-color: #007bff;
 color: white;
 border: none;
 cursor: pointer;
 font-size: 16px;
}

.search-button:hover {
 background-color: #0056b3;
}

/* 媒体查询，适应小屏幕 */
@media (max-width: 768px) {
 .search-container {
 max-width: 90%;
 }
}

场景说明：

字节-飞书-校招 · 第 1 轮 · 二面

Thu, 26 Jun 2025 08:23:26 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端开发者的项目经验、技术深度、问题解决能力以及对未来发展的思考。

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 了解飞书么，讲一下你的使用感受

题目要点

● 说明该题是主观型问题，不考"唯一标准答案"

● 面试官主要考察答题者对产品的理解、用户体验的洞察以及归纳总结能力

● 答题结构建议：首先简要说明你对飞书的整体印象和使用频率，然后从几个具体的产品功能或使用场景出发，详细阐述你的感受、亮点和可以改进的地方。

参考答案

高质量参考范文：我对飞书这款产品有比较深入的了解，因为我们团队在日常工作中就是飞书的重度用户，几乎所有的协作和沟通都在上面进行。从我的使用感受来看，飞书在一体化协作方面做得非常出色，它不仅仅是一个简单的即时通讯工具，更是一个集成了文档、会议、日程、OKR、邮件等多种功能的综合性协作平台，极大地提升了团队的工作效率。

我感受最深的有以下几点：

首先是文档和表格的强大协作能力。飞书文档支持多人实时协同编辑，光标跟随、评论批注等功能都非常流畅，我们团队经常用它来共同撰写需求文档、项目周报等。表格功能也比传统Excel更灵活，支持多种视图和自动化能力，对于项目管理和数据统计非常方便，我们很多内部管理工作都迁移到了飞书表格上。这种所见即所得、实时同步的体验，比我们之前使用分离的工具效率高出很多。

其次是会议和日历的无缝整合。飞书会议的音视频质量很高，屏幕共享和标注功能也很实用。最棒的是它和日历的深度集成，我们可以在日历中直接创建会议，并关联飞书文档，会议结束后纪要也能快速生成并同步。这种从会议发起、进行到纪要归档的全流程一体化体验，减少了大量来回切换应用的麻烦。

当然，在使用过程中，我也注意到一些可以改进的地方。例如，对于一些复杂的数据可视化需求，飞书表格目前的图表功能可能还不够强大，我们有时需要导出数据到其他专业工具进行处理。另外，在面对外部协作场景时，虽然飞书支持分享外部链接，但在权限控制和安全性方面，如果能提供更多灵活的配置选项，会更便于与外部伙伴高效协同。

总的来说，飞书极大地改变了我们团队的协作模式，提升了整体工作效率。它在集成化、实时协作和移动端体验方面都有着显著优势。我相信随着产品的不断迭代，它在更多细分场景和个性化需求方面会做得更好。

2. 如果飞书的某一个页面崩溃了，你会如何处理？

题目要点

● 说明该题是主观型问题，不考"唯一标准答案"

● 面试官主要考察答题者的故障排查能力、问题分析思路、应急处理流程以及对用户体验的关注

● 答题结构建议：首先表明你会从用户角度出发，然后从前端排查、后端排查、联调分析、解决方案、预防措施等多个维度，阐述你处理问题的完整思路和步骤。

参考答案

高质量参考范文：如果飞书的某个页面崩溃了，我会立即启动一套系统的故障排查和处理流程，目标是尽快定位问题、恢复服务，并最大程度地减少对用户的影响。

我的处理思路和步骤通常如下：

初步判断与用户安抚（P0 紧急）：
- 确认问题范围： 首先，我会尝试复现问题，看是偶发性还是普遍性，是个别用户遇到还是所有用户，是特定浏览器或环境下崩溃，还是全量崩溃。这决定了问题的优先级和后续排查方向。
- 快速截图/录屏： 立即保留现场证据，包括控制台报错、网络请求、崩溃页面截图等，为后续分析提供依据。
- 安抚用户/上报： 如果是线上普遍性问题，会第一时间通过内部渠道（如即时通讯工具）向上级和相关团队（后端、产品、SRE等）同步情况，并考虑是否需要发布公告，引导用户刷新页面或使用其他临时方案，确保用户感受到问题正在被处理。
前端层面排查：
- 控制台日志分析： 检查浏览器开发者工具的Console面板，查看是否有JavaScript错误、警告或网络请求失败的提示。JavaScript报错通常是页面崩溃的直接原因，栈追踪能帮助定位代码位置。
- 网络请求分析： 检查Network面板，看是否有接口请求失败（如4XX、5XX错误），或者请求超时。特别是5XX错误，可能指示后端服务异常导致页面无法获取必要数据而崩溃。
- 内存与CPU占用： 使用Performance和Memory面板，观察页面崩溃前是否有内存飙升或CPU占用过高的情况，这可能指向内存泄漏、死循环或计算密集型操作。
- 代码回溯与版本： 确认当前页面的代码版本，检查近期是否有相关代码上线，是否有回滚的必要。使用Source面板进行断点调试，观察变量值和代码执行流程。
- 本地存储检查： 检查LocalStorage、SessionStorage和IndexedDB，看是否有脏数据或超大存储导致的问题。
后端及服务层面排查（与后端协作）：
- 接口健康状况： 如果前端排查怀疑是后端问题，我会联系后端开发或SRE团队，确认相关API接口的健康状况、服务日志、异常报警信息。
- 数据库或缓存： 后端会进一步排查数据库连接、缓存服务是否正常，是否有慢查询或数据一致性问题。
- 依赖服务： 检查该页面所依赖的微服务或其他第三方服务是否正常运行。
定位与解决方案：
- 锁定问题点： 根据排查结果，确定是前端代码Bug（如空指针、死循环、组件渲染异常）、后端接口问题、网络问题、兼容性问题，还是其他服务故障。
- 制定方案： 如果是前端Bug，立即着手修复，并进行单元测试和集成测试。如果是后端问题，协同后端团队修复。如果是数据问题，考虑数据清洗或兼容处理。
- 紧急发布/回滚： 对于严重影响线上用户的问题，优先考虑紧急发布修复补丁，或者在无法快速修复的情况下，采取回滚到上一个稳定版本的方式。
复盘与预防：

字节-本地生活-校招 · 第 1 轮 · 一面

Tue, 24 Jun 2025 14:45:10 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 本轮面试侧重考察候选人前端基础知识的系统掌握程度，包括 CSS 盒模型、选择器机制、ES6 语法、异步任务队列、响应式原理与网络协议等，同时会通过算法题考查思维能力与编码规范。

重点关注以下几个方面：

CSS布局与样式：考察对盒模型、选择器的深入理解，以及实际应用中的最佳实践
JavaScript核心：重点关注ES6特性、闭包、异步编程等基础概念的掌握程度
框架原理：主要考察Vue3响应式系统的实现原理与优化思路
工程化思维：通过HTTP、缓存、性能优化等问题考察工程实践经验
算法能力：通过字符串处理等典型题目考察基本编程功底

本轮共 17 道题。答案默认折叠，便于先自行作答。

1. 自我介绍

题目要点

这是一道主观性问题，没有标准答案。面试官主要考察：

表达能力：语言组织、逻辑清晰度
职业规划：技术深度、发展方向
项目经验：技术栈匹配度、解决问题能力
个人特质：学习能力、团队协作

参考答案

“您好，我是XXX，有5年前端开发经验。毕业于XXX大学计算机科学专业，目前在一家互联网公司担任高级前端工程师。

我擅长的技术栈是 Vue 和 React 生态，对前端工程化和性能优化有深入研究。最近两年主要负责公司的低代码平台建设，带领团队完成了从0到1的平台搭建。在这个项目中，我们解决了很多技术难题，比如大型JSON-Schema的渲染性能优化、自定义组件的实时预览等。通过这些优化，平台的页面渲染性能提升了60%，现在支持了超过100个业务团队的日常工作。

在技术深度上，我特别关注前端框架底层原理，写过几篇关于Vue3响应式系统的技术文章，并给社区贡献过几个PR。同时我也在公司内部主导了前端性能监控体系的建设，建立了从采集、分析到报警的完整链路。

选择字节跳动是因为被这里浓厚的技术氛围吸引，也认可公司在前端领域的技术实力。我希望能在更大的平台上，和优秀的团队一起解决更有挑战的问题。”

答题建议结构

基本信息与技术栈（15-20秒）
- 教育背景
- 工作年限
- 技术栈概览
核心项目经历（30-40秒）
- 1-2个最有代表性的项目
- 突出个人贡献和技术难点
技术深度展示（20-30秒）
- 专注的技术领域
- 技术产出或开源贡献
职业规划（10-15秒）
- 对岗位的理解
- 个人发展诉求

答题要点提示

时间控制在90秒左右
按照时间重要性安排内容比重
突出个人特色，避免平铺直述
适度准备，保持自然流畅
结合岗位特点，突出匹配度

2. 标准盒模型与IE盒模型的区别，如何通过CSS切换两种模型？

题目要点

考察对CSS盒模型的深入理解，包括两种盒模型的区别、计算方式及其对布局的影响。同时也考察在工程实践中如何合理使用box-sizing，以及不同盒模型在响应式布局中的应用场景和性能影响。

参考答案

1.1 原理说明

两种盒模型的区别：
- 标准盒模型 (content-box)： • width/height 仅包含内容区域 • 实际占用空间 = width + padding + border + margin • 优点：精确控制内容区域大小 • 缺点：需要额外计算实际占用空间

字节-本地生活-校招 · 第 1 轮 · 二面

Tue, 24 Jun 2025 14:45:10 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本轮面试重点考察候选人的项目经验、技术深度和工程化思维。主要包括：

算法编程能力：通过合并有序数组等题目考察基本编程功底
项目经验：深入考察实习期间的技术选型、架构设计等关键决策
微前端技术：重点关注跨应用通信、样式隔离等核心问题
AI 应用实践：考察将新技术应用到工程实践中的能力
跨窗口通信：考察复杂场景下的技术方案设计能力

本轮共 15 道题。答案默认折叠，便于先自行作答。

1. 将两个升序数组合并为一个升序数组

题目要点

数组操作能力
双指针算法应用
原地修改的实现
边界条件处理

参考答案

这道题可以使用双指针从后向前遍历的方法，将较大的数放入nums1的末尾。代码实现如下：

function merge(nums1, m, nums2, n) {
 let p1 = m - 1; // nums1的指针
 let p2 = n - 1; // nums2的指针
 let p = m + n - 1; // 合并后数组的指针

 while (p2 >= 0) { // 只要nums2还有元素需要合并
 if (p1 >= 0 && nums1[p1] > nums2[p2]) {
 nums1[p] = nums1[p1];
 p1--;
 } else {
 nums1[p] = nums2[p2];
 p2--;
 }
 p--;
 }
 return nums1;
}

算法分析：

时间复杂度：O(m+n)，只需遍历一次
空间复杂度：O(1)，原地修改不需要额外空间
关键点：从后向前遍历避免覆盖nums1中的有效元素

2. 上一段实习在联想主要做的是什么产品？采用了什么技术架构？

题目要点

这是一道主观性问题，面试官主要考察：

项目描述能力：是否能清晰表达项目背景、目标和价值
技术选型能力：是否有合理的技术决策思路
架构设计能力：是否理解系统设计的关键点
业务理解能力：是否深入理解业务需求和痛点

答题建议：建议从项目背景、技术架构、实现亮点和项目成果四个方面展开。重点说明项目的业务价值和技术特点，展现自己在项目中的贡献和成长。

参考答案

“在联想实习期间，我主要负责一个企业级IT资产管理平台的开发工作。这是一个服务于公司内部的中后台系统，日均活跃用户约2000人，管理着超过10万台设备资产。这个平台的核心价值在于提升IT资产管理效率，降低运维成本。

小红书-社招-5年 · 第 2 轮 · 技术面试

Sun, 01 Feb 2026 14:42:25 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 该轮面试主要考察了浏览器的工作原理、缓存策略、跨域、Vue生命周期、组件通信等方面的知识。题目涉及理论知识和实际应用场景。

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. 详细讲一下从url输入网址到页面渲染的过程

题库原题：简单描述从输入网址到页面显示的过程

题目要点

当输入URL到页面加载完成，发生了以下几个关键过程：

DNS解析：浏览器将URL解析为对应的IP地址。这个过程涉及多级DNS服务器，从本地缓存开始，如果没有找到，则递归查询根域名服务器、顶级域名服务器，直到找到目标服务器的IP地址。
TCP连接：浏览器通过三次握手与服务器建立TCP连接。一旦连接建立，浏览器可以发送HTTP请求。
HTTP请求：浏览器构建HTTP请求报文，通过TCP连接发送到服务器。请求报文包含请求行、请求头和请求正文。
服务器处理请求：服务器接收HTTP请求，解析请求内容，执行相应的处理（如数据库查询、文件读取等），并构建HTTP响应报文。
HTTP响应：服务器将响应报文通过TCP连接发送回浏览器。响应报文包含状态码、响应头和响应正文。
浏览器解析渲染：浏览器接收到HTTP响应后，解析HTML文档构建DOM树，解析CSS构建CSSOM树，合并两者形成渲染树，然后开始渲染页面。
连接结束：当浏览器完成页面渲染或收到服务器关闭连接的信号时，浏览器会发送TCP连接关闭的信号，服务器收到后，双方断开连接。

参考答案

很多大公司面试喜欢问这样一道面试题，输入URL到看见页面发生了什么？

简单来说，共有以下几个过程：

DNS解析
发起TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

下面我们来看看具体的细节。

DNS解析

DNS解析实际上就是寻找你所需要的资源的过程。假设你输入www.baidu.com，而这个网址并不是百度的真实地址，互联网中每一台机器都有唯一标识的IP地址，这个才是关键，但是它不好记，乱七八糟一串数字谁记得住啊，所以就需要一个网址和IP地址的转换，也就是DNS解析。

DNS解析其实是一个递归的过程。

输入www.google.com网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。大致过程就是.-> .com ->google.com. -> www.google.com.。 (最后这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上)

DNS优化

既然已经懂得了解析的具体过程，我们可以看到上述一共经过了N个过程，每个过程有一定的消耗和时间的等待，因此我们得想办法解决一下这个问题！

DNS缓存

DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，ISP服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

DNS负载均衡

比如访问baidu.com的时候，每次响应的并非是同一个服务器（IP地址不同），一般大公司都有成百上千台服务器来支撑访问。DNS可以返回一个合适的机器的IP给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是DNS负载均衡。

发起TCP连接

TCP提供一种可靠的传输，这个过程涉及到三次握手，四次挥手。

三次握手

第一次握手：

客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；

第二次握手：

服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手：

客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。

握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。

四次挥手

数据传输完毕后，双方都可释放连接。最开始的时候，客户端和服务器都是处于ESTABLISHED状态，假设客户端主动关闭，服务器被动关闭。

第一次挥手：

客户端发送一个FIN，用来关闭客户端到服务器的数据传送，也就是客户端告诉服务器：我已经不会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，客户端依然会重发这些数据)，但是，此时客户端还可以接受数据。

FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。

第二次挥手：

服务器收到FIN包后，发送一个ACK给对方并且带上自己的序列号seq，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。

小红书-社招-3年 · 第 2 轮 · 技术面试

Sun, 01 Feb 2026 14:42:08 +0000

← 第 1 轮 · 返回本次面经 · 第 3 轮 →

本轮概述： 这一轮主要考察了小程序的性能优化、核心监控指标、首屏时间的计算、业务价值验证、高频事件处理等方面的知识。

本轮共 11 道题。答案默认折叠，便于先自行作答。

1. 小程序性能优化做了哪些事情？

题库原题：小程序可以做哪些性能优化？

题目要点

小程序性能优化围绕逻辑层与视图层分离架构展开，重点是减少 setData 频率与数据体积，控制列表节点数量，优化首包体积与启动链路，并通过分包加载、WXS 与懒加载等手段降低渲染压力。核心原则是减少跨线程通信与避免无意义重渲染，从架构层面解决性能瓶颈。

参考答案

小程序的性能优化，不能只从“前端渲染”角度看。它的运行模型和 Web 不同，存在 逻辑层（JSCore）与视图层（WebView）分离 的架构特征，核心瓶颈往往出在：

跨线程通信成本
setData 传输体积
渲染节点数量
包体与启动链路

优化必须围绕这些机制展开。

一、理解运行架构是前提

以微信小程序为例：

逻辑层：JS 执行环境
视图层：WebView 渲染
两层通过 JSON 序列化通信

每一次 setData：

数据序列化
线程间传输
视图层 diff
真实节点更新

所以小程序性能优化的第一原则是：

减少跨线程通信的数据量与次数。

二、控制 setData 的粒度与频率

1. 避免大对象全量更新

错误方式：

this.setData({
 form: newFormObject
})

如果 form 很大，每次都会整体传输。

正确方式：

this.setData({
 "form.username": value
})

使用路径更新，最小化数据传输。

2. 合并多次 setData

多次调用：

小红书-社招-1年 · 第 2 轮 · 技术面试

Sun, 01 Feb 2026 14:40:35 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这一轮主要考察了项目经验和技术选型，包括Vue3+TS的选择理由、UI框架的优势、TypeScript的应用、组件化方案、Canvas离屏渲染、Service Worker等内容。

本轮共 14 道题。答案默认折叠，便于先自行作答。

1. 讲一下你觉的最有成就感的项目

题目要点

实际问题, 创新性, 用户价值, 项目背景, 技术选型, 实现过程, 最终效果, 亮点, 贡献

参考答案

最有成就感的项目通常是那些能够解决实际问题、具有创新性并且对用户有显著价值的项目。在回答这个问题时，可以从项目的背景、目标、技术选型、实现过程以及最终效果等方面进行详细描述。重点突出项目的亮点和自己在其中的贡献。

2. 项目为什么选择Vue3+TS而非React

题目要点

Vue3 + TypeScript 的选择通常基于团队技术栈一致性、Composition API 带来的逻辑复用能力、与 TypeScript 的良好类型推导，以及在中后台场景中更成熟的生态和更低的工程复杂度，从而提升整体开发效率与可维护性。

参考答案

在技术选型阶段通常会综合考虑团队技术栈、项目复杂度以及开发效率等因素。对于以中后台系统或业务管理平台为主的项目，Vue3 在整体开发体验和约束能力上往往更容易形成统一规范。

首先是框架设计层面的差异。Vue3 通过 Composition API 将逻辑拆分为可组合的函数单元，在复杂业务场景下可以很好地解决 Options API 中逻辑分散的问题，同时又保留了模板语法，使得结构、逻辑、样式之间的职责划分更加清晰。对于需要长期维护的业务项目，这种组织方式通常更容易理解和维护。

其次是 TypeScript 的结合程度。Vue3 在框架层面对 TypeScript 做了较深的适配，例如 defineComponent、setup、ref、reactive 等 API 都有较完整的类型推导能力，配合 <script setup> 可以获得较好的类型提示和开发体验。在大型项目中，类型系统能够帮助提前暴露接口契约问题，提高代码的可维护性。

另外在生态与工程效率方面，Vue3 在国内中后台领域的组件生态较成熟，例如组件库、低代码平台以及相关工具链都比较完善，能够快速搭建业务系统。对于团队成员技术背景主要偏 Vue 的情况下，可以降低学习成本和沟通成本，提高整体开发效率。

从工程复杂度角度看，React 在灵活性上更强，但很多能力需要通过生态组合实现，例如状态管理、表单方案等，需要额外制定规范。Vue3 本身提供了较完整的开发范式，在团队规模较大的情况下更容易形成统一的代码风格。

3. NutUI在营销活动中相比其他UI框架有什么优势

题目要点

移动端, 轻量, 高性能, 易于使用, 组件库, 用户体验, 开发效率, 按需加载, 应用体积

字节-技术中台-校招 · 第 2 轮 · 二面

Tue, 02 Sep 2025 07:35:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察小程序、前端基础及算法等方面的知识。

本轮共 17 道题。答案默认折叠，便于先自行作答。

1. 讲一下你的小程序项目

题目要点

这是一个典型的主观型问题，没有唯一的标准答案。面试官主要考察候选人的项目经验、技术选型能力、问题解决能力以及对小程序生态的整体理解。
答题时建议围绕项目背景、个人职责、技术挑战与解决方案、项目成果与思考等方面展开，体现出系统性和条理性。

参考答案

在我的某某项目中，我主要负责开发一个基于微信小程序的某某功能模块，比如一个校园服务小程序，其中我负责了课程表、成绩查询以及校园活动发布的功能。

项目启动之初，我们对需求进行了详细的分析。我选择了小程序作为技术栈，主要是考虑到其轻量级、无需下载安装的特性，能够快速触达用户，并且微信生态提供了丰富的API支持，例如微信支付、地理位置等，非常适合我们校园服务的场景。在技术选型上，我们使用了原生小程序开发模式，结合了小程序自定义组件的能力，将课程表、活动列表等通用UI和逻辑封装成可复用组件，大大提高了开发效率和代码的可维护性。

在开发过程中，我遇到了一些挑战。例如，课程表数据的展示，由于涉及到大量的时间和格子计算，以及复杂的状态管理，我采用了组件化的方式来解耦视图和逻辑。为了避免频繁调用setData导致性能问题，我仔细规划了数据结构，并通过局部更新和事件代理的方式，将数据更新的粒度控制到最小，确保了界面的流畅性。此外，在处理校园活动图片上传和展示时，也遇到了图片内存飙升的问题，我通过启用lazy-load属性，并对图片进行后端压缩和CDN分发，有效解决了内存占用过高的问题，提升了用户体验。在保证安全性的前提下，对于用户敏感信息，我们严格遵循小程序的加密存储和传输规范。

项目上线后，用户反馈良好，尤其是加载速度快、操作流畅得到了肯定。通过这个项目，我不仅深化了对小程序双线程架构、生命周期、组件化等核心概念的理解，也锻炼了我在实际项目中解决复杂性能问题的能力。同时，也让我认识到在项目开发中，前期的技术选型、架构设计以及对潜在性能瓶颈的预判都是至关重要的。

2. 小程序的架构组成

题目要点

宿主环境: 了解小程序运行的载体，如微信、支付宝等App提供的运行环境。
双线程模型: 掌握小程序的逻辑层和视图层分离，通过异步通信机制进行数据交换。
组件系统: 熟悉小程序内置组件和自定义组件的构成。
数据层: 理解小程序数据管理和更新机制。
小程序生命周期: 熟悉小程序应用和页面的生命周期函数。

参考答案

1.1 原理说明

宿主环境: 小程序运行在一个特定的宿主环境中，这个环境由微信、支付宝等App提供。它为小程序提供了运行所需的API、渲染能力、文件系统等。
双线程模型: 小程序采用双线程模型，即逻辑层和视图层分别运行在不同的线程中。
- 逻辑层: 运行在JSCore（或V8引擎）中，负责处理业务逻辑、数据请求、数据处理等，使用JavaScript编写。它不直接操作DOM。
- 视图层: 负责渲染页面，使用WebView（或独立的渲染引擎）渲染WXML和WXSS。
通信机制: 逻辑层和视图层之间通过Native层进行异步通信。视图层将用户操作（如点击、输入）传递给逻辑层，逻辑层处理后将数据变化通知视图层进行更新。
组件系统: 小程序提供了一套丰富的基础组件，如view、text、image等，开发者也可以基于这些基础组件创建自定义组件，实现模块化开发。
数据层: 小程序的数据管理主要通过Page.prototype.data和this.setData进行。数据变化后，通过双线程通信机制同步到视图层，触发视图更新。 1.2 核心用法 + 示例代码
在小程序中，开发者主要通过JavaScript编写逻辑层代码，WXML构建页面结构，WXSS定义页面样式。
app.js 定义小程序的全局逻辑，app.json 进行全局配置，app.wxss 定义全局样式。
每个页面由 .js（逻辑）、.json（配置）、.wxml（结构）、.wxss（样式）组成。
示例：页面数据更新

// page.js
Page({
 data: {
 message: 'Hello Mini Program!'
 },
 onLoad: function() {
 setTimeout(() => {
 this.setData({
 message: 'Data Updated!'
 });
 }, 2000);
 }
});

这种架构分离了业务逻辑和页面渲染，提高了性能和安全性，也方便平台对小程序进行管控。 1.3 常见误区或面试陷阱
误区: 认为小程序是基于浏览器内核直接运行的H5页面。实际上，小程序运行在独立的宿主环境，有其特定的渲染机制和API。
误区: 将双线程通信理解为同步通信。实际上是异步通信，需要注意数据同步的时序问题。
陷阱: 不清楚小程序无法直接操作DOM的原因，本质上是为了安全和性能考量，避免开发者直接对渲染层进行复杂操作，影响性能和用户体验。

3. 小程序和 H5 在开发和使用上有哪些主要的区别和优势？

题目要点

运行环境: 区分小程序和H5的运行载体和能力限制。
开发模式: 掌握两种技术栈的开发流程和工具链。
性能: 对比加载速度、运行流畅度等方面的差异。
功能和权限: 了解各自能调用的系统能力和接口。
用户体验: 分析用户感知到的流畅性、便捷性。
分发和推广: 比较获取用户、传播的难易程度。

参考答案

1.1 原理说明

字节跳动-商业化-校招 · 第 2 轮 · 二面

Tue, 02 Sep 2025 07:31:02 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端基础（CSS布局、JavaScript原型链）、React框架深入理解（虚拟DOM、性能优化）、设计模式应用以及算法能力。

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现一个三栏布局，左右两侧固定宽度，中间区域自适应

题目要点

面试官出这道题主要想确认哪些知识维度？
- 考生对CSS布局（如Flexbox, Grid, 浮动, 定位, 表格布局等）的掌握程度。
- 考生如何处理不同元素之间的空间分配和自适应能力。
该题所考知识点中有哪些高频实际应用点？
- 页面整体布局，如经典后台管理系统布局（侧边栏固定，内容区自适应）。
- 组件内部布局，如卡片、列表项中固定图标/按钮，内容区域自适应。

参考答案

1.1 原理说明 三栏布局是一种常见的网页布局方式，其核心在于实现左右两边固定宽度，中间内容区域根据可用空间自适应。这要求布局方案能够灵活处理流体宽度和固定宽度元素的共存，并且能够正确处理元素之间的堆叠和清除浮动等问题。不同的CSS布局技术提供了不同的实现原理和特性，选择合适的方案取决于兼容性要求、布局复杂度和维护成本。

1.2 核心用法 + 示例代码 以下是几种实现三栏布局的常见方法，并说明其原理和适用场景：

1.2.1 Flexbox 布局

原理： Flexbox (弹性盒子) 是一种一维布局模式，它在父容器中管理子项的分布和对齐。通过设置主轴和交叉轴，可以非常灵活地控制子元素的排列。
使用场景： 现代浏览器环境下的首选布局方式，适用于需要灵活对齐、空间分配的场景。

示例代码：

<div class="container-flex">
 <div class="left">Left</div>
 <div class="center">Center</div>
 <div class="right">Right</div>
</div>

.container-flex {
 display: flex; /* 开启Flex布局 */
}
.left, .right {
 width: 200px; /* 左右固定宽度 */
 flex-shrink: 0; /* 防止收缩 */
}
.center {
 flex-grow: 1; /* 中间区域自适应，占据剩余空间 */
}

优势： 代码简洁，语义化好，对齐和分配空间非常方便。

1.2.2 Grid 布局

京东-物流-秋招 · 第 2 轮 · 第二轮

Sun, 27 Jul 2025 15:48:27 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

面试时间： 60分钟

本轮共 16 道题。答案默认折叠，便于先自行作答。

题目要点

性能优化、交互反馈改进、错误处理优化、移动端适配、基于反馈的持续改进。

参考答案

好的前端体验应该是用户感知不到技术存在的体验。首先是性能方面，页面加载要快，交互要流畅，用户不应该感受到明显的等待时间。这需要做好资源优化、懒加载、缓存策略等。

界面设计要直观易懂，用户能够快速找到需要的功能，操作流程要符合用户习惯。响应式设计也很重要，在不同设备上都能提供良好的体验。

交互反馈要及时准确。用户的每个操作都应该有明确的反馈，比如按钮点击效果、加载状态提示、操作结果通知等。错误处理要友好，当出现问题时，要给用户清晰的错误信息和解决建议。

可访问性也是好体验的重要组成部分。要考虑到不同能力用户的需求，比如键盘导航、屏幕阅读器支持等。

最后是要保持一致性，整个应用的交互模式、视觉风格、信息架构都要保持统一，让用户形成稳定的使用预期。

6. 平时怎么学习前端的？

题目要点

系统性学习、实践项目、阅读源码、关注社区、记录总结、保持好奇心。

参考答案

学习前端主要通过几个渠道。首先是系统性学习，通过在线课程平台如慕课网、极客时间等学习完整的技术体系。看技术书籍也很重要，比如《JavaScript高级程序设计》、《CSS权威指南》等经典书籍能够建立扎实的基础。

实践是最重要的学习方式。会跟着教程做一些小项目，然后尝试改进和扩展功能。GitHub上有很多优秀的开源项目，通过阅读源码能够学到很多最佳实践。

技术社区是获取最新信息的重要渠道。经常浏览掘金、思否、MDN等网站，关注前端技术的发展趋势。参加一些技术分享会和线上讲座，能够了解行业动态和实际应用经验。

建立了自己的学习笔记系统，将学到的知识点整理成文档，定期回顾和总结。还会写一些技术博客，通过输出来加深理解。

保持好奇心很重要，看到新技术会主动去了解和尝试。比如最近学习了WebAssembly、微前端等新技术，虽然可能暂时用不到，但能够拓宽技术视野。

7. 最近了解到的新技术讲一下

题目要点

WebAssembly提供高性能计算能力，微前端解决大型应用架构问题，新CSS特性增强布局能力。

小红书-社招-3年 · 第 3 轮 · 技术面试

Sun, 01 Feb 2026 14:42:08 +0000

← 第 2 轮 · 返回本次面经 · 已是最后一轮 →

本轮概述： 这一轮主要考察了小程序的低代码设计架构、Web Worker的使用、中台系统的微前端拆分策略等方面的知识。

本轮共 4 道题。答案默认折叠，便于先自行作答。

1. 讲一下你关于小程序的低代码设计架构

题目要点

小程序低代码架构本质是配置驱动的运行时体系，核心包括 DSL 协议设计、组件注册机制、运行时解析与数据驱动更新；必须围绕 setData 性能约束进行差量更新与渲染优化；工程重点不在编辑器，而在运行时引擎的性能治理与扩展能力设计。

参考答案

小程序的低代码架构，本质是在受限运行环境下实现“可配置驱动 UI 与逻辑”。核心不是拖拽能力，而是如何让页面结构、交互逻辑、数据流都由配置驱动，同时保证性能与可维护性。

一、整体架构分层

小程序低代码一般分为四层：

编辑层 → DSL 层 → 运行时引擎 → 渲染层

编辑层负责产出结构化配置；DSL 层定义组件树与属性协议；运行时负责解析与调度；渲染层落在小程序原生组件体系之上（如 WXML + setData 机制，在微信小程序中即运行于其渲染框架内）。

关键问题在于：小程序不是虚拟 DOM 模型，而是逻辑层与视图层分离，通过 JSON 数据桥接，因此架构必须围绕数据驱动。

二、DSL 设计

DSL 通常采用 JSON Schema 形式，核心包含：

组件类型
属性 props
样式
事件绑定
数据源
条件显示规则

低代码的关键在于“协议稳定性”，一旦 DSL 设计混乱，后续扩展成本会极高。因此会设计：

组件注册机制
属性校验规则
默认值策略
版本兼容策略

三、运行时引擎

运行时是核心。

大厂面经 on Last Stand

小红书-社招-5年 · 第 1 轮 · 技术面试

1. BFC讲一下

题目要点

BFC 的作用

如何触发 BFC

小红书-社招-3年 · 第 1 轮 · 技术面试

1. js中基本类型 和 引用类型的存储有什么不一样

题目要点

2. 闭包的内存泄漏应该如何监控和解决？

题目要点

浏览器

命令行

小红书-社招-1年 · 第 1 轮 · 技术面试

1. 项目中为何选择 Tailwind CSS ？

题目要点

2. Tailwind 是怎么解决样式冲突的？

题目要点

一、传统 CSS 为什么容易冲突

1. 选择器冲突

2. 层级嵌套带来的权重问题

3. 样式全局污染

360-实习 · 第 1 轮 · 技术面试

1. 自我介绍

题目要点

2. 你的职业规划与前端技术方向的关系？

题目要点

3. 讲一个你参与过的项目

题目要点

1. 项目架构

2. 构建工具和配置

3. 开发环境

4. 包管理

5. 自动化流程

6. 代码质量

7. 文档

8. 组件库

9. 性能优化

10. 安全

4. 项目中遇到的印象最深的难题是什么？如何解决的？

题目要点

百度-百家号-实习 · 第 1 轮 · 技术面试

1. 如何判断一个变量是数组？

题目要点

1. Array.isArray() 方法

2. instanceof 操作符

3. Object.prototype.toString.call() 方法

4. constructor 属性

5. Array.prototype.isPrototypeOf() 方法

6. 使用 constructor 属性和原型链

2. 讲一下闭包及其优缺点。

题目要点

百度-搜索-春招 · 第 1 轮 · 技术面试

1. 实现一个动画，当用户鼠标悬停在按钮上时，按钮逐渐变大

题目要点

2. 如何避免动画过程中的卡顿？

题目要点

原理解析

考察重点

百度-商业化-秋招 · 第 1 轮 · 一面

1. 如何在前端项目中实现动态路由？

题目要点

2. Vue3的addRoute与React Router的动态useRoutes有何区别？如何解决动态路由刷新后失效的问题？

题目要点

腾讯-3年社招-前端面试 · 第 1 轮 · 一面

1. 自我介绍、项目介绍

题目要点

2. 可视化搭建平台中，如何设计数据规范保证组件间数据兼容性？请求收效的具体实现方案是什么？

题目要点

3. 组件的拖拽行为如何实现？如何为组件动态注入行为（如拖拽、缩放）？

题目要点

4. 如何解决拖拽过程中频繁触发事件导致的性能问题？

题目要点

5. 性能优化关注的指标有哪些（如FCP、TTI）？你用了哪些具体手段？

题目要点

腾讯-3年社招-前端面试 · 第 1 轮 · 二面

1. 讲一下你的低代码平台架构设计

题目要点

2. 动态加载第三方组件时，如何解决样式冲突与DOM管理问题？

题目要点

1. js中基本类型和引用类型的存储有什么不一样

1. `Array.isArray()` 方法

2. `instanceof` 操作符

3. `Object.prototype.toString.call()` 方法

4. `constructor` 属性

5. `Array.prototype.isPrototypeOf()` 方法

6. 使用 `constructor` 属性和原型链