阿里-国际电商-校招 · 第 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:

阿里-国际电商-校招 on Last Stand

阿里-国际电商-校招 · 第 1 轮 · 一面

1. 讲一下你的技术栈，为什么要学前端，如何学习前端的？

题目要点

2. 常见的H5标签有哪些 ，你是怎么用的

题目要点

阿里-国际电商-校招 · 第 1 轮 · 二面

1. React/Vue/Angular框架熟悉哪个？对比一下

题目要点

2. React Hooks闭包陷阱的产生原因？

题目要点

2. 常见的H5标签有哪些，你是怎么用的