wxg前端开放平台日常实习面经(2/3面)(已offer)

接前篇:https://www.nowcoder.com/feed/main/detail/819661fbac1942d79faabaff2125fee5

最有压力的一集,有两位面试官,一位问一位听。一开始还好,都是从浅层知识开始问起,后续就开始深入拷打,一直拷打到不会为止,太可怕了。

其次是计算机基础,还得是科班同学,当时从编译原理一路回溯到计算机组成原理,最后感觉还是操作系统最重要,当时做 mit cow 实验理解了一下其思想,没想到现在回过头来在面试用上了,这个寒假一定要好好看看操作系统和数据结构以及一些基础。

感觉入手比较简单的还是计算机网络,毕竟可能更多时间都会花在 rfc 文档的阅读和对传输的理解和作用以及优缺点

其次是远程协同这个课题能拷打的地方真的很多,我虽然认真想了,但想的还是不够,还可以变得更好,只能说慢慢来吧

我曾经也憧憬过在开源圈内总结一套比较稳固的远程协同实现,包括服务器崩溃,服务中断等,这些都留给未来的自己吧

- 简单自我介绍
- 什么时候开始学前端
- 前端工程化,以及各种其他方面的东西是怎么学习到的
- 怎么平衡学校与个人学习
- 觉得学校的课业对学习有帮助吗,举个例子
- 讲一下 cow 是什么(copy on write)
- 为什么说考虑过用编译原理的知识尝试去实现 markdown 编译
- 对于 string.replace 方法假如要自己实现有什么优化的想法吗
- 挑一个项目最有挑战的点来说
- 简单解释一下 CRDT
- 协同面对的两个问题
- 跟 OT 对比优劣在哪
- 为什么选择远程协同作为解决方案,在此之前调研过其他方案吗
- 说一下光标速度优化,具体为了优化哪个层面(网络传输)
- 讲一下前后端结构设计
- 服务器崩溃问题(一路延申到快照创建,历史版本,内容压缩,使用外存)
- 说一下现在的解决方案和未来的解决方案
- 为什么快照可能可以解决 yDoc 实例占用内存过多的问题
- 遇到环形引用怎么解决,这里如果改为 json 可不可以进行压缩
- 结合 cow 说一下 json 压缩实现
- 说一下 yjs 在避免内存泄漏上实现的 gc 是什么
- 做上下文序列化时为什么说可能阻塞
- 说到阻塞,解释一下为什么 js 与 gui 互斥,从操作系统层面来说可以通过什么方式去实现互斥
- 平台有多少人在用
- 了解 js 与原生语言之间的通信吗
- 简单说一下 tauri 那个项目
- 用 rust 实现了什么功能,解决了什么问题
- 除了编程还有什么爱好
- 反问
- 需要改进的地方
- 您负责的内容

**这一面能很明显感受到考察的是项目思考深度,我可以说一个好的项目是非常加分的,这个好指的是你对他的思考,深入到了什么地步,对比过什么方案,最终权衡下怎么解决的,为什么选用这个方案,效能比怎么样,有考虑过未来发展吗等等问题**,即 STAR 法则。而不是单纯说我 star 多,被推荐等。我简历上的项目也没说多少人 star,因为他面向的是一个特定领域的解决方案,是我们团队内部为了解决问题而实现的一套工具。

压力面加上发挥的一般,一些基础和深入点没讲好,面完后有点难过,觉得自己马上挂了,结果两个小时后约了电话 3 面,真的是极大惊喜啊。

### 三面(电话面 30min)

这一次是电话面,连时间都没约,直接发邮件问面不面,那当然是趁着这股劲狠狠的面了!

听声音感觉是一位很和蔼的面试官,给了我 20 分钟讲项目,中间提问 + 反问。可能是为了考察一下沟通能力,因为二面的时候讲塞壬唱片项目的时候没有讲好,有点啰嗦和抓不到重点,可能因此加了一面。

- 自我介绍
- 之前有实习过吗
- 简单说一下项目立项
- 第三方平台卡内容?那有没有想过其他自由的平台(我们的平台有属于自己的精神内核和思想,希望从自己的网站上去体现)
- 平时平台上面会发布什么内容,选择 astro 框架的原因
- 除了对比市面上的框架,还有没有调研过 hexo wordpress 这种框架?
- 成果怎么样
- 之前面过微信游戏,有没有总结面试为什么挂了,简单说说
- 对于玩具项目的定义
- 项目第一次大更新的目的是什么,解决了什么问题,中间有什么困难,现有的问题和未来的发展
- 第二次大更新解决的问题和困难,以及现在的状态
- 聊聊结构设计,为什么分了新仓库,基于什么考量,为什么要这样设计,好处和缺点
- 反问
- 这一次面试这么快的吗(把内容输出总结了就大概知道是什么水平了)
- 您负责的职责(c 端用户端)
- 还有几面(应该是最后一面)
- 可以改进的地方
- 入职时间

整个过程还是聊的很愉快的,能感受到面试官为了理解我的项目在做提问。

**沟通真的是很重要的一环**,作为开发人员沟通是绝对少不了的,因为你要搞懂需求,确认上下文,个人觉得唯一不用沟通的就是搞算法科研,天天发论文就好(雾)。不过把沟通交给我的话我还是要事先准备准备,对自己要说的各种东西有一个大致的了解,这样才不会在现场时显得很慌乱

其次就是感觉在与大佬沟通的时候,我就像是在给老板分析我的产品,他的优劣,以及综合团队的思考等,还有他带来的收益

### 后续

2025/1/2 - oc

我的秋招实习之旅到此算是以 1 wxg 日常实习 offer + 1 外企日常实习 offer 结束了,虽然我完全有信心一口气在外企干到毕业并努力转正。但是我还是想说攒好经验,开阔了眼界后再寻找更好的机会,到时候我也更有信心去面对面试。

## 后记

有人问过我说为什么我的项目能做这么多东西,我的答案是:经历了长时间的沉淀;为什么能坚持这么久,因为我想**我正在做我喜欢,且能满足我和让我充满动力的事情**,在此引用一句其他大佬精辟的总结:**Do what you love, love what you do.**

其次是由于面试,我也脱离我的项目组有一段时间了,是时候要回归他们,做一些 mvp 开发和文档攥写了。他们都是很善良很友好的人,没有他们我可能就没有我简历上这个项目,也没法约到这些面试了,可以说是他们成就了我的项目基础;其次要感谢社区所有的开源开发者,他们燃烧自己的热情去实现了一个又一个无与伦比的开源库与包,尤其是感谢 astro 与 yjs,astro 官方维护成员很积极,社区声音也很多,对于 bug 处理也非常认真;yjs 则是实现了一整套生态周边,方便了我们快速上手,如果单纯给我一篇论文让我自己去实现远程协同那绝对是做不到的。

希望这份经历能够帮助到正在阅读的你,给你带来一些思考或者启发

另附文中说的项目和一些参与过的项目:

- [dmv-wiki-toolkit](https://gitee.com/shiinafan/dmv-wiki-toolkit) - 一套一站式生成 minecraft mod Wiki 网站解决方案
- [pdc-wiki](https://gitee.com/shiinafan/pdc-wiki) - Wiki 网站解决方案项目的前身
- [MonsterSirenDesktop](https://github.com/QingXia-Ela/MonsterSirenDesktop) - 对塞壬唱片官网实现的一个功能增强,为其增加了自定义播放列表 / 第三方音乐平台接入 / 歌曲下载 / 离线访问等功能

- [astro](https://github.com/withastro/astro/) - 一套以内容驱动为中心,支持 SSR & SSG & 混合渲染的全栈 Web 框架(提了两个小 pr 和文档修改)
- [elysiajs](https://elysiajs.com/) - 一个基于 bun 的后端框架,支持高度自定义编码风格(只是改了一下文档(逃))
全部评论
知识量真庞大,给我看emo了
1 回复 分享
发布于 01-04 00:40 广东
牛,这就是佬的前端吗
点赞 回复 分享
发布于 01-13 10:39 江西
真神
点赞 回复 分享
发布于 01-04 11:13 广东
真神
点赞 回复 分享
发布于 01-04 01:12 湖南
点赞 回复 分享
发布于 01-03 15:33 北京

相关推荐

06-14 01:40
已编辑
南昌大学 前端工程师
没有自我介绍,直接从项目开始结合八股开始介绍一下项目1. 你对 React 底层有了解过吗我以为这是在问我有没有看过 React 源码,开始还有点想放弃回答的,后来我硬着头皮开始讲声明式编程,组件化之类的。。。突然觉得不管怎么样,我觉得都可以讲讲和这些东西沾点边的,起码让面试官了解你知道什么吧哈哈(仅个人观点)2. 讲讲 React 的生命周期3. 刚才你在讲生命周期时提到了 useEffect 依赖数组不为空的情况,如果我想进行数据请求这些操作应该怎么处理依赖数组呢4. 那么你还用过什么其他的 hooks 吗5. useCallback 和 useMemo 之间的区别6. 组件之间的通信我只讲了父组件向子组件之间的 props 传递和状态提升进行子组件之间同一变量状态的同步7. 那么如果我不想使用状态提升应该怎么办呢我说可以使用 forwardRef 和 useImperative hooks 来实现将子组件中特定 DOM 元素暴露给父组件还有一些状态管理工具 zustand,Redux8. 有使用过 Redux 吗9. 你的项目中有使用过 antd,讲讲你对它的一些看法这里有点尴尬了,我一直以为只能`npm install antd`将所有的组件的下载,但是面试官说我玩的不够溜实际也可以向 Shadcn UI 一样实现按需下载10. 你的 webpack 是怎么配置的,是使用了默认配置吗,还是使用了自己的配置呢11. 你是如何实现的自动化部署呢(这个问题我觉得还挺频繁的,基本只要看了我的简历的面试官都问了,得仔细总结一下这个问题)12. 你使用过 vite 和 webpack,这两者你觉得有什么区别呢我个人只从了开发环境下和一些其他小的方面的区别进行讲述,后来面试结束觉得可以再深入讲讲13. 你写到你会 flex 讲讲 flex 的一些常见属性14. 我有一个盒子,左侧元素在屏幕缩放时不变,右侧元素会按照缩放而变化15. Sass 的使用感受16. Sass 中样式的深度嵌套应该怎么写(应该是好奇发问,面试官应该没用过 Sass)17. 使用过的 git 的常见命令18. 合作开发中遇到冲突怎么解决19. git rebase 和 git merge 之间的区别20. 你为什么会觉得 git merge 会比 git rebase 更适合合作开发21. 你做过一些外包项目,这些项目是什么Hugo,PHP 然后面试官听到我写过 PHP 再那里笑了好久:“哈哈哈,PHP,世界上最好的语言”貌似没了,然后写了一道很简单的算法这几次面试下来,我觉得我自己在知识方面上有进步之外,我也渐渐体会到了如何去把握面试节奏,面试不应该是一场严肃的知识问答而是一场畅快的技术交流。要去引导面试官问你会的问题,可以在对一个问题的讲解时将另一个(你熟悉的)知识点进行相关联,这样的话大概率面试官会去你问你提到的另外一个知识点,来把握面试节奏。当然我还是一个小白,只是将自己的理解分享,也希望给大家带来帮助
查看44道真题和解析
点赞 评论 收藏
分享
字节跳动Data AML部门前端实习一面面经本次面试时长1小时,主要涵盖项目经历、技术原理、基础知识和算法编程等方面,具体内容如下:一、项目经历面试官首先询问了实习项目相关内容,围绕项目背景、技术实现、遇到的问题及解决方案展开交流,考察对实际项目的参与度与理解深度。二、Suspense原理及实现1. 原理:Suspense 是 React 用于处理异步渲染的组件,可在数据加载或组件渲染完成前展示加载指示器,提升用户体验。2. 实现方式:被问到在 useEffect 中存在 fetch 请求时,如何让顶层组件感知组件存在异步请求。回答可通过 React Context 实现信息透传,但存在更优方案,可从 React 的新特性或状态管理库角度进一步优化 。三、JS基础1. var、let和const的区别:var 存在变量提升,会导致变量在声明前可被访问;let 和 const 具有块级作用域,更加安全。2. var逐渐被弃用原因:var 没有块级作用域,在复杂代码中容易引发变量覆盖等意外问题,使用 let 和 const 可避免此类风险,提高代码的可读性和稳定性。四、CSS基础1. 三列瀑布布局(两边固定,中间自适应):纯CSS可通过浮动或绝对定位实现;使用flex布局更优雅,flex: 1 表示该元素会自动分配剩余空间。2. flex常用属性:主要涉及主轴和横轴方向设置,如 flex-direction 定义主轴方向;常用的居中属性包括 justify-content: center(主轴居中)和 align-items: center(交叉轴居中) 。3. CSS动画:通过 animation 属性实现,配合关键帧 @keyframes 定义动画的起始和结束状态、变化函数(如线性变化)以及时间等参数。animation 在渲染进程的合成线程执行,不会阻塞JS执行,效率较高。五、算法编程题1. 合并有序链表// 定义链表节点结构function ListNode(val, next) {this.val = (val === undefined? 0 : val);this.next = (next === undefined? null : next);}var mergeTwoLists = function(l1, l2) {const dummy = new ListNode(0);let current = dummy;while (l1 && l2) {if (l1.val < l2.val) {current.next = l1;l1 = l1.next;} else {current.next = l2;l2 = l2.next;}current = current.next;}current.next = l1 || l2;return dummy.next;};2. 二叉树寻找公共父节点(节点有parent指针)function lowestCommonAncestor(p, q) {const set = new Set();while (p) {set.add(p);p = p.parent;}while (q) {if (set.has(q)) {return q;}q = q.parent;}}3. 实现sum函数curry化
查看11道真题和解析
点赞 评论 收藏
分享
评论
14
14
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务