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 北京

相关推荐

一面1.介绍一下项目2.有做权限吗3.登陆之后的权限,比如说我能操作哪些文章,不能操作哪些文章(刚刚说的是如何保存登陆态)查看文章的时候最终需要拉取一个接口去查看文章,如果我已经获取了这个接口并且不断用Postman伪造发请求,如何处理这种情况?先回答在请求头里带上Token,面试官说如果通过抓包拿到了Token那怎么办呢,回答在axios请求拦截器里面去对同一来源的请求做预防,如果两次请求发送的时间太短暂或者频率太快就拦截这个请求。4.目前技术栈5.localStorage和cookie有什么区别?Cookie 的本职工作并非本地存储,而是“维持状态”。 因为HTTP协议是无状态的,HTTP协议自身不对请求和响应之间的通信状态进行保存Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成,客户端进行维护和存储。我们可以把Cookie 理解为一个存储在浏览器里的一个小小的文本文件,它附着在 HTTP 请求上,在浏览器和服务器之间“飞来飞去”。它可以携带用户信息,当服务器检查 Cookie 的时候,便可以获取到客户端的状态。通过cookie,可以让服务器知道请求是来源哪个客户端,就可以进行客户端状态的维护,比如登陆后刷新,请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值,根据cookie值的内容就可以判断和恢复一些用户的信息状态。我们可以在响应头中的set-cookie中获取cookie,也可以直接使用js的document.cookie来设置cookiecookie的缺陷:1不够大 每个cookie大小限制在4KB左右,cookie只能存储少量的信息,但这里的4KB是指一个cookie的键值对的值的大小,不是所有的一个域名下所有cookie的总大小 2同一个网站每次请求都会携带cookie 会带来性能浪费,增加不必要的开销cookie存储在浏览器和服务器LocalStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。大小为5M左右仅在客户端使用,不和服务端进行通信除非手动删除,否则会永久存储在浏览器本地,相对更安全一般来说cookie存储与服务器进行交互的少量数据比如token(会话标识session_id信息)等,而localstorage存储大量的、仅前端使用的持久化数据(缓存的用户信息)。不能在 localStorage 中存储敏感信息(如密码、身份证号),因为它容易被 XSS 攻击访问到XSS:跨站脚本攻击:在其他浏览器中注入恶意的可执行的脚本代码,从而达到恶意攻击的目的。比方说一个用户评论功能,输入“<p>用户评论:<script>alert('你被攻击了')</script></p>”其他人浏览这条评论时就会看到弹窗,这说明脚本被执行了,那么攻击者就可以做更危险的事情比如获取Cookie,操作或者删除DOM等等反射型(构造恶意URL,用户点击链接会发送请求,服务器会把请求的脚本作为数据的一部分返回浏览器,浏览器随机解析了这段恶意代码)DOM型(如例子,构造特定的输入引起前端更新,使用闭合标签修改DOM解构)存储型(将恶意代码提交到网站的数据库中,访问网站时,恶意代码从数据库中被读入执行)防范措施:前后端在处理用户输入的内容时,都需要保持谨慎,对其中的特殊字符进行过滤和转义。使用安全的编程方式,譬如避免使用危险的 innerHTML 去设置 HTML 内容,而是使用 textContent。HttpOnly 是一个 Cookie 的标志,表示该 Cookie 只能通过 HTTP 请求发送,而无法通过 JavaScript 访问。这有助于防止 跨站脚本攻击(XSS)本质上Cookie用于通信,而LocalStorage用于存储6.服务器返回token存储在localStorage里,那这个token是不是会一直存在?登陆之后,用户就一直保持登陆状态?Token在后端一般会设置他的过期时间7.平时如何去学习?怎么去做这个项目的?8.追问:你说你刚才说看别人的项目源码,你看过哪个项目?开源项目的一些源码呀?9.Pinia是干嘛的10.使用全局变量和Pinia有什么区别?Pinia的几个重点:Store全局状态管理、响应式更新、Composition API、支持模块化、支持devtools使用全局变量的缺点:缺乏响应式、不能支持模块化、无法使用调试工具11.Pinia的数据存储在哪里?内存,一旦刷新页面,内存被清空,pinia的数据也会丢失。想要实现持久化存储,需要使用持久化插件使用watch监听store数据的变化,把数据存储在LocalStorage里,以后每次登陆网站都使用这个LocalStorage存储的数据。12.TCP和UDP的区别?TCP是可靠的,需要通过连接(三次握手),有流量控制和拥塞控制,传输速度较慢,传输单位是字节流(连续、无边界的数据传输方式,像水流一样不分段)UDP是不可靠的,不需要通过连接,没有流量控制和拥塞控制,传输速度较快,传输单位是数据报(独立、封包形式的数据传输方式,每一段都是一个独立的单元)流量控制:流量控制的核心目的是确保数据的发送速率不超过接收方的处理能力,防止接收方的缓冲区溢出。具体原理如下:1.接收方窗口大小:接收方为发送方提供一个 接收窗口大小(Window Size),表示它可以处理的最大数据量。这个值会动态变化,接收方会不断告诉发送方它当前的接收能力。2.滑动窗口机制:TCP协议采用 滑动窗口机制,发送方根据接收方的窗口大小来决定发送数据的数量。窗口大小可以根据接收方的缓冲区大小动态调整。当接收方的缓冲区可用空间减少时,它会通过窗口大小减小发送方可以发送的数据量。3.发送方控制:发送方根据接收方提供的窗口信息调整数据的发送速率。如果接收方的接收窗口变小,发送方就会减慢发送速率,避免数据丢失拥塞控制:拥塞控制的核心目的是避免网络拥塞,防止整个网络的性能因数据过载而下降。TCP协议采用了多种机制来动态调整发送方的发送速率。具体原理如下:1.慢启动:TCP连接刚建立时,发送方的拥塞窗口(Congestion Window,CWND)很小。随着每次成功的确认(ACK)到达,窗口逐渐增大。这个过程称为 慢启动。慢启动的目标是渐进地增加发送速率,避免网络立即出现拥塞。2.拥塞避免:一旦窗口增大到一定程度(慢开始门限),TCP会进入 拥塞避免 阶段。在这个阶段,拥塞窗口的增大变得更加缓慢(每收到一个确认,窗口增大一个固定值)。这个阶段是为了避免突然增大的窗口造成网络过载。3.快速重传和快速恢复:•快速重传:当发送方收到三个相同的确认号(即出现丢包情况),它会立即重发丢失的数据包,而不是等待超时。•快速恢复:当发生丢包后,拥塞窗口的大小会被减少,并进入 快速恢复 阶段,继续发送数据,但在一个较小的窗口下,直到网络恢复正常13.两个JS题第一个是实现异步相加,第二个是实现一个QQman类,满足异步输出14.https和http有什么区别? http是明文传输,https在http基础上使用了TLS加密15.讲一讲TLS16.讲讲对称加密和非对称加密对称加密:发送方和接收方用同样的规则对数据进行加密,也可以使用同样的钥匙对数据进行解密,缺点就在于如果第三方知道了加密的规则,他就很容易进行破解传输数据。(AES算法)非对称加密:公钥:可以共享给任何人的加密措施,一般用于加密。私钥:只有拥有者持有的加密措施,一般用于解密。使用对方的公钥加密数据,这样传输的内容只有对方使用自己的私钥才能解密,就算是发送方也无法解密,这就保证了加密的有效性。RSA算法非对称加密更加安全,但是速度太慢,不适合传输大型文件,一般用于交换密钥或者身份认证。对称加密速度更快,可以用来传输大量数据。17.对称加密和非对称加密分别用于什么?18.为什么不全部使用非对称加密让传输更安全?19.做电商平台有遇到什么难点吗20.说说遇到的难点以及是怎么解决的(说了全局数据共享,使用Pinia代替了ref)21.如果一个页面它不展示,但是用了那个 Pinia 里面的一个数据,数据更改的时候,看不见的那个页面的 demo 会不会更改?讲了一下响应式更新 defineProperty proxy watcher update22.了解过vue2吗?vue2和vue3你觉得有哪些不同讲了一下组合式API和选项式API23.追问:讲讲Composition API和Options API的区别相同功能的逻辑可写在一起,复用性更强,更支持TS如何解释复用性更强?vue2相较于vue3的话vue2是没有ref这个响应式变量的声明的。他的响应式是通过data()、computed、watch等这些API定义在组件的内部来实现的,而不是通过组合函数复用。在vue3里组合式APi可以将相似的逻辑封装成独立的组合函数并导出,其他组件再导入这个函数就可以直接使用(优点:响应式、自动绑定生命周期钩子)24.了解TS吗?不是很了解,说说泛型25.后台怎么解决的我说用的Mock.js,因为不会后端,也没有和别人一起开发这个项目。面完无缝接二面,字数超了,新帖发。
查看24道真题和解析
点赞 评论 收藏
分享
评论
14
13
分享

创作者周榜

更多
牛客网
牛客企业服务