深圳地上铁 - 前端开发工程师面经

2 小时前更新

面试岗位： 前端开发工程师
面试时间： 2026/03/20 14:52 - 15:38

一、面试背景与目的

背景介绍： 应聘前端开发工程师岗位，分享技术经验和项目经历。
面试目的： 评估技术能力、项目经验和职业发展潜力。

二、核心问答 (Q&A)

Q1：请做一下自我介绍

回答：

23年毕业于xxxx，有近3年前端开发经验。
目前在中山马恩特科技公司负责智慧停车业务线的前端开发，搭建了包含 C端小程序/H5 和 B端管理系统的智慧停车管理平台。
是 uni-app 开源组件库团队成员，主导开发过高拓展性的瀑布流组件。
参与搭建以组件库为基础的通用型前端脚手架。

Q2：能详细说一下瀑布流组件是怎么做的吗？

回答：

架构设计： 采用父子解耦架构，父组件负责维护全局高度和坐标收集。
数据流转： 子组件通过插槽（Slot）将加载内容反馈给业务方。
核心痛点解决： 解决了异步调度阻塞和生命周期中断的问题。
性能优化：
- 采用并行加载、串行排版的方式提高渲染效率。
- 开发了增量排版算法，大幅度优化重排（Reflow）性能。
- 使用 CSS 隐藏未布局元素，彻底解决页面闪烁问题。
场景拓展： 内部提供多种加载策略，以应对不同业务场景的诉求。

Q3：有哪些实际AI项目？

回答：

AI 智能助理平台： 搭建了用于内部文档查询的 AI 智能助理平台。
知识库构建： 采用 MaxKB 等平台进行文档的向量化和检索。
大模型接入： 接入主流大模型进行内容总结和增强检索（RAG）。

Q4：用过哪些 AI Skill？

回答：

研发效能： 熟练使用 Cursor / Claude Code 等 AI 编程工具辅助日常开发。

Q5：怎么做 AI 工作流的工程化？

回答：

工程化实践：
- 将项目架构、组件库文档等核心资产“喂”给 AI 作为上下文。
- 集成 Apifox 等 MCP (Model Context Protocol) 服务，供 AI 工具直接调用，打造自动化前端工作流。

Q6：浏览器整个渲染流程是怎样的？

回答：

请求阶段： URL 解析 -> DNS 查询 -> TCP 建连 / TLS 握手。
响应阶段： 服务器处理请求并返回 HTTP 响应数据。
渲染阶段核心步骤：
1. 解析 HTML，生成 DOM 树。
2. 解析 CSS，生成 CSSOM 树。
3. 合并 DOM 树和 CSSOM 树，计算样式，生成布局树 (Layout Tree)。
4. 分层 (Layering) -> 生成绘制指令 (Paint) -> 光栅化 (Rasterization) -> 显卡合成 (Composite) 显示在屏幕上。

Q7：前端能做哪些性能优化？

回答：

网络/请求优化： 接口数据缓存、DNS 预解析 (dns-prefetch / preconnect)。
静态资源优化： 使用 CDN 加速、代码压缩与混淆、分包加载 (Code Splitting)、图片格式优化压缩 (如 WebP)。
渲染体验优化： 减少 DOM 重排与重绘、使用骨架屏或首屏预渲染、长列表使用虚拟列表。
计算逻辑优化： 使用 Web Worker 处理复杂耗时的长任务，避免阻塞主线程。
网络协议层面： 升级 HTTP/2 (多路复用、头部压缩)、TLS 算法优化。
CSS / 动画优化： 开启硬件加速（如：transform: translate3d、will-change）。

Q8：贵公司 (地上铁) 的技术团队规模和技术栈是怎样的？(反问环节)

回答：

核心框架： 涵盖 Vue2 与 Vue3。
业务终端： 包含小程序、原生 App 嵌套页、移动端 H5 页面以及 PC 端后台管理系统。
移动端跨端： 移动端业务主要使用 Taro 框架进行开发。

Q9：对我个人提升方面有什么成长性的建议吗？

回答：

面试官建议： 在表达交流时建议多总结归纳，提炼核心结论即可。目前的表述略微有些冗长，不够精炼。

三、面试总结复盘

本次面试全面考察了面试者在前端开发领域的技术能力与项目经验，重点挖掘了其在瀑布流组件开发、AI 工程化应用和前端性能优化等方面的深度与实战心得。

亮点表现： 展示出了扎实的前端技术基础与丰富的实战落地经验，以及对前沿技术（特别是 AI 工作流）极高的学习热情和探索精神。
待改进项： 在沟通表达的结构化上需要注意，应当更多地采用“先总后分”式表达，言简意赅。
整体评价： 整体表现符合中级前端开发工程师的岗位要求。

觉得最难的题

浏览器整个渲染流程是怎样的？
前端能做哪些性能优化？
怎么做 AI 工作流的工程化？