广州云趣科技前端面经

当时是微信游戏挂了两三天后约面的，有意思的一点是 hr 多多少少也知道前端的一些东西，硬控我 20 分钟，甚至聊了点 react vue 框架，我怀疑 hr 之前就是做前端，想逗逗小孩子罢了（逃）面试给我的体验还是很不错的，没有做题，没有手撕，更多是看你对技术与项目的思考，是否有自己的独立想法，还有探测知识边界，虽说就深度来说肯定是没有大厂那样厉害，但相比一些其他厂也能聊不少东西### 一面(45min)隔了几天才想起了博客没有补充，记得不是很清楚了，将就写写- 业务介绍，入职时间- 什么时候开始知道和学前端的- Astro 框架简单介绍一下- 用 pnpm？说说项目分包的好处- 讲一下 git rebase，平时怎么解决 conflict 的- 用 React 还是 Vue 多- 用 vite 还是 webpack 多- 他们的区别以及优势和缺点- ts 学的怎么样，讲一下几个常用的工具类型- 如何在类型体操内实现 if 和 for 循环- React 新特性了解的怎么样- React 新 hooks 实践过吗- jsx 编译后的产物是什么- 讲一下代数效应- 看一下你项目封装的 hook- AbortController 以及调用时机（考察副作用清理）- 知道有哪些设计模式- 对测试了解的怎么样，编写测试时要注意的点（e2e, vitest）- 英语水平，给一个文档能看懂多少- 反问  - 除了 react ts 还有什么技术栈  - 本次面试出结果的时间  - 主要工作  - 需要改进的点### 二面 (40min)面试的是部门 ld，一位很稳重的大哥，能感受到颇有强者的气场，这次就项目提问了不少内容，很多开放性的问题可以探讨- 自我介绍- 说一下项目里最难的点- 为什么升级成 monorepo 和 pnpm- monorepo 适合的场景- 实践 monorepo 的时候有没有遇到一些什么问题- 项目的架构，怎么分包的- 项目的发展过程- 团队有几个人，都是自己写的吗- 项目背景- astro 框架是什么- 相比其他框架，astro 卖点在哪- 用过 nextjs 吗- 你喜欢 astro 框架吗，说说优劣- react 平时自己开发的时候有哪些规范和注意点- 你觉得 ts 的优点是什么- 有些工作是 ts 推导类型的修复，能接受吗- 没有实习经历吗- 英文文档读过吗- 了解公司实习生职责吗- 从哪里找到招聘信息的- 需求有 ddl，能接受吗- 简单说一下 tauri 项目的难点- rust 是怎么学的- rust 与 ts 的过程宏结合是什么- 为什么想学 rust，你喜欢这门语言吗- vscode 插件是啥，作用？- 反问  - 职责(ld)  - 业务|基建？(业务)  - 需要改进的地方  - 还有几轮面试总结：有些复杂场景还是没有接触到，比如 monorepo 的优劣，但是 monorepo 给我的感受就像是一个工具，我知道项目未来会怎么发展，需要一个模式去改善发展了。我个人觉得 monorepo 主要还是为了逻辑分离，提升模块化程度，缺点就是依赖管理复杂，且没有代码修改权限区分。网上的答案也比较类似，比我想的多的就是测试和重构方便 / 构建部署耗时增加。不过针对后者有类似 turbo 这种工具去进行加速### 三面(1h)最友好的一集，面试官把我几个仓库的结构都看了一下。这一次面就是综合知识 + 业务能力 + 认知边界探究了。不过感觉面我的老哥可能面试人的经验不是很多，感觉比我还紧张（无端），自我介绍还是我主动提出的- 自我介绍- 为什么说想做基建- 有给一些大型项目提过 issue 和 pr 吗，出发点是什么- 假如现在有一个日历公用组件要进行开发，你该如何完成他- 假如这个组件需要定制很多地方，你该从哪几个角度去考量- 假如有一个组件，网络上一点资源都没有，需要你从头定制，你的出发点是什么，该怎么做一个迭代- 现在有一个功能，针对他有一批库可以选，该从哪几个角度去考量选什么库- 看你仓库里面有用 js 去写一些 script 运行脚本，他可以用 ts 替代吗，有什么方案，最新的方案是什么，他们之间的优缺点- 刚刚你说到 bun，那么用这个工具的时候遇到过什么问题吗- v8 爆内存的可能原因是什么，有什么工具或者方法去定位（从项目实践优化再到快照拍摄，还有开发上用一些 Weak 对象处理）- 有时候遇到页面卡顿，你的定位思路是什么，解决方案是什么- 看你开源经历里桌面播放器项目那个似乎是 monorepo 又似乎不是，当时改成 monorepo 的想法是什么- 你简历的项目也是用 monorepo，出发点是什么，解决了什么痛点，有什么新问题- webhook 听说过吗，cicd 环境中要注意的是什么，如何从安全上去考量 webhook 的使用- 最近学的一些新东西是什么，了解了哪些好玩的东西- 反问- 团队规模- 团队项目迭代更新方式- 您的职责- kpi or okr- 会因为 ddl 加班吗- 团队会关注新技术吗- 如何针对一个项目提炼一些可复用的方法论整个面试下来耗时最多的就是组件开发考量 + 知识边界探测了，一开始面试节奏也不算好，双方就沟通上还是有点小问题，不过后续节奏好了后就很愉快，整场面试就像是聊天一样互相分享看法和注意点，整个过程聊下来感觉是很舒服的。面完后 hr 马上打电话沟通说这边没啥问题，可以发 offer，就看什么时候方便过来。作为人生中第一个 oc 还是挺开心的，不过当时正好 wxg 在等开奖，而且技术面都过了，所以后续还是忍痛把 oc 拒了。舍得舍得，有舍才有得。复用方法论是今年暑假提出的一个研究课题，起源于之前看别人做 react 最佳实践时总结的一个项目规划管理模式，我自己在我的项目中用 vue 的方式实现了一遍，体验还是不错的，比如页面逻辑强隔离，页面内部 store 管理，专有组件与 hooks，缺点就是可能要编写的代码内容变多了，其次是对于某个被依赖多次的模块需要做好健壮性和完整性考量但是就我自己的项目说很难提出一套全局可复用方法论，更多是特定场景下的复用实践，这点在我这个项目还是有一些感触的

先说一下背景：双非，目前在读大三，目前 (2024/12/31) 无实习经历，所有投递都是从官网投递，无内推。岗位是微信开放平台基建最汗流浃背的一集，当时刚好是在游戏部门挂了后几天微信打电话过来问愿不愿意面试，我说上次不是挂了吗，双方就都很尴尬的笑了一下，最后说回去思考一天再确定要不要面。当时学期也快结束了，跟几个哥们聊了一下这件事，就觉得可能是 kpi。还好当时鼓足了勇气，想着就算是 kpi 也要尽力去学到东西和表达想法。事实证明确实不是 kpi 面，而且拷打的非常恐怖，一面面试官说看了面评知道项目很大很复杂，于是就狠狠的考察了项目的广度，以及临场反应速度。二面则是结合计算机基础深究了项目的细节，现在回想起来我都不知道我是怎么顶住面试官的拷问的。三面则是最轻松但也是最需要口才的一集，就像是在给上司讲述自己的产品，讲自己的思考以及是否存在能效提升一样视频面两面都没有开摄像头，就最后 hr 面开了一下。最后实习 oc 也选了他，首先是因为没几个能选的，同期的就另一个外企发了offer，地点在北京，往返比较麻烦。微信这边主要是技术栈为 js 和 rust，还是基建岗，感觉还是比较符合胃口的。我对这次面试最大的总结就是：计算机的基础思想很重要，许多地方都可以用上他。理解思想，并把它融入到自身作为一个工具使用。就好比我前文提到的 monorepo 和 react hooks 一样，我感觉就像是把他融入到自身，他是一个工具，理解他在什么时候该发挥什么样的作用其次还是基础，一面结束后复盘了一下八股，答得真的是稀烂，寒假还是要恶狠狠的弥补啊。### 一面(2h 30min)上来先四道英文题目手撕(1小时 + 20 分钟思路拷打)：- async pub sub- 依赖解析- 爬楼梯- glob 库实现八股：- 事件循环- 异步任务的作用- setTimeout 浏览器底层实现- JS 内存管理（v8 回收，但是讲的不是很清楚- 引用计数- weakMap 以及为什么不能遍历，以及只能用引用数据类型做 key- 对 ts 泛型的理解- rust 用过什么异步框架（tokio）- rust 内存管理（drop trait，作用域，无GC）- css 媒体查询- git merge 行为（只知道合并成一个提交，面试官说还有一些其他行为，后续看了一下是 fast forward / 无冲突 merge / 有冲突 merge）- 约定式提交以及如何做约束（命令行应用与 git hooks 正则匹配）- https 中间人攻击- https 链接上请求内放密码- https 的数据是安全的吗（只想到密钥泄露）- 快排时间复杂度，为什么最坏是 On2- 对一块内存上的数组尾插 / 头插元素的时间复杂度讲项目（40min+）- 立项，重构，后台实现，远程协同- CRDT 思想- 脏路径处理- 并发冲突- 简单说说 YATA 数学证明？（包不懂的）- 断网后怎么办，或者说有个客户端延迟很高（插入永远有一个唯一位置，应对比较轻松）- 服务是中心化还是去中心化- 一个人删除了一行文字，另一个人在这行文字添加内容，结果是什么（根据 YATA 算法第一层比较，客户端小的操作优先）- 简单对比 OT- 项目背景- 简单介绍 Astro 框架- 项目设计（做成 npm 包，并作为 astro 插件使用）- 项目技术栈对比，自研的原因- 第一次升级后的成果与遇到的问题（框架问题，GitHub issue 讨论，细节挺多的）- 语法分析器的设计（core 层 和 plugin 层）- 如何进行语法检查的（ast 语法树遍历分析）- LSP 服务器设计与消息优化（VSCode LSP 使用 pipeline 或 websocket，如果要优化可以通过自研协议分主动推送和监听广播行为）- 前后端结构（前端，后端，脚手架后端）- 项目发布过程- mdx 中用户如何使用自定义组件- mdx 可以回退 md 吗（没有研究，后续看了一下，mdx 是作为一个 astro 插件使用，回退的话可能需要对内容进行过滤处理（表达式，用户组件，script 标签过滤））- markdown 过滤- astro 编译 mdx 底层实现（讲了用到的插件，但是还可以继续讲讲 vite 怎么去 resolve module 的，和源码中经过了几次编译后才输出结果）- 如果有用户恶意输入，你是怎么处理的（pr check）- 如果用户太多你管不过来怎么办（插件过滤 script，工作流中使用 bot 自动检查）- mdx 注入组件的白名单- mdx 可以渲染 react，那可以渲染 vue 吗（可以，配置插件即可）- 如果要在一个 react 组件里面使用 vue，我该做什么- app.mount 发生了什么（没说全，讲了一下对比和 mount 和 patch，其实就相当于把 vue 渲染讲一遍）- 如果我想在 react 组件内用 vue，vue 组件内继续套 react，我该怎么办（编译器做一个类似 rust 的宏展开自动注入 render code）- 还有可以扯的吗（astro wasm 组件编译，content layer api，SSR 编译 mdx 可以实现运行时无编译开销；选择 jsx 作为通用组件的原因）- 反问- 技术栈（js ts rust c++）- 业务还是基建（基建）- 期望实习时长- 大概还有几轮（一般三轮）- 关于微信游戏二面面评（每个面试官都有自己的看法）- 需要改进的地方当时开始做题的时候我还没有意识到事情的严重性，还跟群友聊了一下说怎么一上来就做题，随后一顿拷打让我知道自己是多渺小了。八股复盘的时候感觉自己就是个超级大笨蛋，说不定面试官都躲在屏幕后面笑，说这小孩子想象力还挺丰富的面完这两个半小时人都虚脱了，在会议室里面跟群友汇报完后缓了好久才走出会议室，刚好实验室外面刚刚结束24届大一同学面试。后端的一哥们说想转前端了，于是就把前端在场的同学一起叫了过来，聊了一下他们的学习进度，并针对他们现场确定了一下学习路线，最需要关注的内容和接下来该做的事情以及未来要如何发展，全部聊完后也都晚上 11:10 了，于是听着私宅特有的歌冲回了宿舍。实验室真的跟家一样，我可以说实验室和简历的项目几乎就是我大学的全部了，没有这两样我也走不到今天这一步

1. 什么是js的变量提升，你什么情况下会用var，为什么要提升，不是在外面定义2. 我怎么判断对象里面的方法，是不是相等，怎么去做3. 讲一下const var let的区别4. promise你了解多少5. json的对象有哪些方法6. ！0是true还是false7. js数组的方法，怎么用其他方法去判断这是不是数组不用isArray（问了一下说是用里面js自带的instanceof好像）8. 给了案例a.b和c.b怎么去判断里面的值是一样的，不用全等号的方法，有关到地址的变化9. 数组去重的一些方法10. interface和typeof的区别11. http缓存12. localStorage是什么类型的缓存，跟sessionstorage有什么区别，那cookie呢13. 缓存的存取你有没有用过，怎么弄，如果单纯js取出来怎么取14. 浏览器的重绘重排15. react用过哪些hook16. useState里你习惯写值还是方法的回调，这两个有什么区别吗17. 在State里希望等数据更新完之后，再去执行一个方法，希望可以怎么去做，state里有依赖跟没依赖有什么区别18. 如果在state里写return的话，return干嘛用，什么情况下会执行19. ref用过没20. 用useMemo和useCallback有什么区别21. useMemo就一定不会导致渲染吗，有没有一种情况它依赖没变，但是子组件又监听到变化了，你认为是怎么造成的22. 有没有了解过react里面的事件，什么是合成事件23. 如果让你写一个hook，里面有一个弹窗开启关闭这个动作，让你写hook，你会怎么写（我没想到这是我进去后的第一个需求）你需要关心弹窗的状态吗，自定义hook有什么特别的24. 你自定义封装hook你都封装了哪些啊，你在里面怎么获取窗口大小的25. 项目里react router设置权限，权限你怎么做的（我没想到这个也是我入职后mt着重教的地方）26. 你怎么知道权限这有这个能力的27. 你有没有拦截器去处理错误异常的（入职后mt也跟我分析）28. 后端说你没权限跳转到登录页，你当时是怎么去做的29. next里，开发过程中你怎么判断它属于客户端还是服务端的部分30. 还有什么问题想问还有前面一点#牛客AI配图神器#不记得了，第二次面欢聚了oc了，面试官同时也是mt，是个老二次元，特别耐心特别好，感谢遇见）这里真的很开心，氛围超级nice，不卷以前的面经了#日常实习##实习##前端#

流程：意愿度问答（视频）→不定性选择→单选选择→专项问答（视频）其中选择题是纯选用过/会什么技术之类，不涉及技术考察专项问答，每问限时五分钟，分为三部分，分别是八股、项目提问、素质考察问题，其中八股每道题有一次换题机会。总体而言面试比较放松，但是ai只会读题干，遇到回答不上来的问题不会有任何提示，ai面试官感觉纯读题+展示功能，没什么交互。题干在屏幕的左上方，ai人物在中间，如果没有直视摄像头会一直提示，虽然好像没什么影响，但是突然弹出来会影响思路，所以对摄像头在键盘的面试者很不友好，读个题目都会提示直视摄像头。问题难度感觉总体还行，但我准备不充分，很多还是没答上来，建议八股部分如果第一道题能回答尽量回答，选择换题可能换到更不了解的题OTZ以下为面经：1. 请说说你为什么想要应聘前端岗位，在这方面做了哪些准备。2. 选择题多选■ 学过的计算机相关的课程■ 使用过的语言■ 使用过的框架■ 进行过哪些前端样式开发（动画过渡、布局、预处理器、组件化……）■……单选■ 最擅长的语言（前端方面）■ 最擅长的语言（算法方面）■ 最擅长的框架■……3. 请描述浏览器提供常用的调试工具，举例说明其在开发中的应用。4. 请详细解释下TCP和UDP的区别，它们各自的使用场景是什么？5. 请解释响应式设计的基本原则，并讨论如何使用媒体查询来实现一个复杂的响应式布局。6. 请说明如何在vue中的创建和使用自定义指令。7. 请问什么是异步加载？请列举至少三种常用的异步加载技术。8. 请列举常用的CSS预处理器，并解释其解决的问题和带来好处。9. 描述你最近参与的一个前端项目，并解释你是如何设计其架构的，包括技术栈的选择和理由。10. 在这个项目中，你提到前端需要处理复杂的数据关系并进行实时响应。请具体说明你是如何设计前端与后端的数据交互机制的，例如数据的传输格式接口设计的原则，以及如何确保实时性和性能的优化。11. 能否具体说明你是如何处理接口的版本管理和兼容性问题的？12. 开发一个即时通讯系统的前端页面时，你会如何设计消息的存储和同步机制？如何处理用户切换设备后的消息同步问题？13. 在用户选择同步消息时，你提到了会将数据库的内容进行同步到所有设备的信息中。这里涉及到数据一致性的问题，请问在同步过程中，如果出现网络延迟或部分设备未在线的情况，你会如何确保消息的最终一致性？14. 工作中需要面对全新领域的时候，你是怎么做的？能否举例说明？15. 描述一次你在没有明确指示的情况下，主动承担任务或解决问题的经历。#ai面试# #面经# #前端面经# #牛客创作赏金赛#