最近找实习的经历

最近找实习的经历

转本上岸之后基本天天写些自己的小玩具，一下子就到了 5 月中旬，才发现自己暑期实习还没有找，简单调研后发现很多公司部门已经没有 HC 了，此时自己 LeetCode 基本为 0，八股也完全没背过，加上三本学历，boss 上投递自然没人鸟。

武汉公司

背了 4 天八股后，即 5 月 16 日，终于有一家武汉的公司给了我面试机会，同时也是我第一次参加面试。

面试期间全程社恐紧张，说话也是各种结巴，面经如下：

问八股

  1. 先做一个自我介绍
  2. 你写样式的时候，比如你写css的样式的时候，用过哪些像素单位，他们有什么区别？
  3. 为什么要有 Less 和 Sass，他们是干什么用的，为什么 Less 不够还要有 Sass?
  4. 把一个 div 从 a 点拖到 b 点，比如 a(50,50) 拖动到 b(100,100) ，如何用原生 JavaScript 实现？
  5. 那你原生鼠标事件知道哪些？
  6. CSS 你平常用过哪些布局？他们有什么区别？
  7. 用过 float 布局吗，干什么用的？为什么之前很多人用 float ，现在却没有人用了？
  8. 写 JavaScript 的时候，肯定经常去拷贝一些数据是吧？平常用过哪些拷贝？
  9. 你讲一下什么叫深拷贝，什么叫浅拷贝？
  10. 用什么方式可以实现这个浅拷贝，达到这个浅拷贝的目的？深拷贝呢，用什么方法手段达到深拷贝的目的？
  11. 浏览器里面有个概念叫做重排重绘，什么叫重排重绘
  12. 平常在去写功能的时候，肯定可能会用到一些请求是吧？但是有可能我们会遇到跨域，什么叫跨域？为什么会遇到跨域错误？如何解决？

问项目

  1. 可以简单介绍一下你 Electron 开发的播放器吗？
  2. 你刚才有提到说支持自动更新，我看了一下代码好像没有找到相关的，你是用的 Electron builder 原生自带实现的吗？
  3. Mac 里面的签名和公证的区别是什么
  4. 公证的应用和没公证的应用，在 Mac 上打开的时候会发生什么
  5. 这个 Electron 项目是自学还是有参考的？大概做了多长时间？
  6. Web 和 Electron 开发你更喜欢哪一个？
  7. 我看你还有个博客项目，然后里面说集成的AI辅助写作主要是指什么呢？
  8. 跟大模型对接用的什么库？
  9. vercel ai 里面 useChat 和 useCompletion 的区别
  10. 我如果希望你对 vercel ai 做一个二次开发，把聊天记录的功能直接原生集成在库里面，你会怎么去做？

最后也是顺利通过一面了，二面是老板面，跟他讲了下平时如何使用 AI 工具和大模型的，大概讲了 Grok, Gemini, Claude, ChatGPT 平时是如何使用，个人感觉的优劣那些。

大概隔了两天，也是顺利拿下了 offer

苏州公司

大概背了一周八股后，即 5 月 19 日，一家苏州的 AI 公司给了我一次面试机会。

这次面试开局就是两道算法题，反转链表和括号匹配。由于自己没有刷过 LeetCode 自然是写不出来的，可以说面试场面非常尴尬。

之后又问了些八股，这次回答的还不错，基本都回答上来了。但由于算法题没写出来的缘故，也只能止于一面了。

哔哩哔哩

之前也通过官网投递了 20 多家公司，在 5 月 21 日哔哩哔哩给我安排了隔天的一面，当时看到面试安排挺激动的，直接翘掉了当天全部的课，用来复习八股和刷了 10 道 easy 算法题。

第一次体验大厂面试，也看了些牛客上的各种面经，害怕会被要求撕各种算法题，晚上焦虑的更是睡不着觉。

一面

面试官交代了面试的是直播部门，面经如下：

1. 自我介绍

2. 做项目的背景是什么，有没有用户量？

我自己比较喜欢一边看动漫，一边有着弹幕，但在 macos 没有类似本地视频弹幕播放器，所以我会去做一个这个

用户目前有几十个，他们有时候也会给我发起一些 Github Issues，我也会及时推进并改善 BUG

3. 你的播放器项目是否支持在线播放？

目前并不支持，我是有这个支持打算的，目前打算做一个媒体库功能

4. 如果做这种本地的话，需要用户去自己去下载操作，会不会增加一些用户的心智？

因为我自己看动漫的习惯还是下载到本地，这样码率会高很多，画面会更加清晰。并且有一套类似自动化的追番流程，有新番更新就会自动下载的那种。

5. 如果做让你把这款项目作为一个商业化的产品，你会怎么去改造它呢？可以简单的跟我说说吗？

  • 可以尝试接入大模型，为字幕文本提供翻译服务，或者可以利用 AI 语言识别来生成字幕（openai whisper），方便用户看生肉动漫
  • 提供 AI 视频总结
  • 支持挂载网盘，或者类似 emby 流媒体服务器
  • 支持数据云同步，云端保存用户设置，视频进度等

6. 还有你觉得有什么功能可以去扩展？

增加媒体库功能，支持对动漫进行元数据刮削

7. 项目里面的一些最主要的一些难点

chromium 在 mac windows linux 上硬件解码依赖用户电脑配置，chromium 自身的 ffmpeg 因为版权问题，软解缺乏对于 h265 的支持，对于不支持 h265 硬解的用户，会出现黑屏问题。所以要考虑降级到 wasm 软解，似乎哔哩哔哩也有这方面的实践（DashPlayer + WasmPlayer）

再提一些 linux 上硬件解码的坑，要打开实验 flag

firefox 不支持 mkv 视频容器，今年 1 月对 h265 硬件解码支持

8. 有没有看过 FFmpeg 源码，知道哪些核心 API ?

有简单了解过，它编解码的核心是 libavcodec，用于对音视频的编码和解码，就是 H.265 H.264 AAC

9. 弹幕是如何进行缓存的？

使用的是 IndexedDB（Dexie.js）进行缓存的，加载的时候把数据注入到 tanstack query 里面。因为项目目前是提供 web linux windows macos 四个版本，使用 IndexedDB 可以确保代码的一致性，减少不同平台之间的 bug。

同时 tanstack query 本身也具备的缓存机制，可以利用其 staleTime 和 gcTime 实现一些临时的缓存效果

10. 简繁体转换是如何实现的？

利用 opencc-js 实现

11. ass/ssa 字幕功能是用什么实现的

libass-wasm 实现的，它是一个用 c 语言编写解析 ASS/SSA 的库， 它是利用 canvas 把字幕画上去的，从而实现 ASS/SSA 字幕复杂样式和动画效果

12. 弹幕功能是如何实现的？

利用的是 danmu.js 实现的，它是利用 DOM 方式实现的，有碰撞算法，利用 requestAnimationFrame 来实现弹幕平滑滚动，它是根据用户设备刷新率来执行的，其中弹幕轨道可以根据播放器的有效高度/设备标准字号实现

13. 如果满屏弹幕的情况下，比如说同时有数千条弹幕的情况下，你怎么去保证它的实时渲染不会卡顿？

  • 利用 轨道数量 = 播放器有效高度 / 设备基准字号，单一屏幕是拥有最大弹幕限制的，这种算法不会出现满屏数千条弹幕
  • DOM节点复用
  • 如果需要渲染数千条弹幕，可以利用 requestAnimationFrame 来驱动弹幕的移动，确保弹幕滚动与浏览器刷新率同步
  • 利用 GPU 加速 transform ，减少重排和重绘
  • 利用 Web Worker 进行复杂任务

14. 弹幕时间轴自动对齐怎么做，弹幕拖进来如果和本地视频时间对不上，该如何处理？

用户可以单独设置每个弹幕的时间轴，来解决

后续或许可以考虑借用大模型辅助对齐

15. 你是如何使用 ffmpeg 或者 ffprobe 实现视频关键帧提取的？

目前历史记录的封面就是利用 ffmpeg 截取用户最后观看位置的图片，利用 -ss 定位时间点，-vframes 确保只提取一帧图像

16. Electron builder 打包的时候，你是如何得知当前是什么平台的？

打包的时候会执行 electron-builder --win 那些 flag，等于告诉 electron 当前是什么平台了，如果后续钩子需要，可以通过 context 获取出来

或者 nodejs os 模块，可以通过 os.platform() 获取平台

17. Electron 项目初次启动时间是多久，后续的启动时间是多久？有没有算过？

后续启动会更快一点，可能操作系统会有些缓存

18. 播放器渲染过程有没有性能问题，比如说内存泄露，你是怎么去防止和监控的？

在组件卸载的时候，我会及时清理 useEffect 里面的副作用，把它放到 useEffect 清理函数里面

react 的话可以利用 react devTools，观察组件的重新渲染变化，也可以使用浏览器控制台里面 performance tab 进行性能录制，从而分析出原因

19. 弹幕如果要支持直播流的话，项目要进行哪些改造？

直接弹幕通常是使用 WebSocket 进行与弹幕服务器双向通信的，在项目中引入 Websocket 客户端逻辑，即可

20. 你对 Websocket 的理解？

  • TCP 全双工通信的协议
  • 可以持久化连接
  • 支持双向通信
  • 低延迟
  • 用的 ws:// 或者 wss://
  • 适合直播弹幕，即时通讯软件

21. 项目有没有遇到过崩溃的例子，你是如何进行监控的？

利用 sentry 和 electron-log 日志处理

22. 除了 sentry 你还知道哪一个性能监控跟错误监控的系统？

不知道

23. 你是二次元所以才想做这个项目的吗？

是的

24. 你实习主要做的都是什么吗？以及你觉得实习让你收获了什么？

说实习经历

25. 我看你技术栈是 React 多，但我们这边都是 Vue 的，如果要上手 Vue，你会怎么做？

他们都是现代前端的框架，很多思想都是相同的，比如组件化架构、虚拟 DOM、响应式数据绑定，并且都是基于 JavaScript。而且我之前也用过 Vue 开发一些后台管理系统和浏览器起始页，我相信我可以在几天之内，通过阅读官方文档快速上手 Vue 的

26. 你是如何使用 monorepo 管理项目的？

monorepo 一般会分为 app 和 packages 两个文件夹，我的项目....

27. 有没有 UI 类组件的封装经验？

比如我博客的 Markdown 双栏编辑器，左侧是封装的 codemirror 实现代码高亮，右侧是用 markdown-to-jsx 写的 markdown 渲染组件。左侧修改 markdown ，几乎可以无延迟的在右侧渲染出来。这里我使用到了 useDeferredValue，它是用到了 react 18 的并发特性，可以实现根据当前渲染压力，来动态实现一个防抖的效果，让用户基本感受不到渲染延迟。

28. 性能优化的常见方式？

减少重排和重绘，图片、组件懒加载，使用防抖和节流函数

29. cdn 上你会托管哪些资源？

CSS JS 图片 .m4s 切片

30. html 为什么一般不用 cdn 托管？

html 也可以放在 cdn 上托管，但很多网站 HTML 是动态生成的，会有延迟问题，所以一般不用 cdn 托管

31. webpack 如何进行打包优化？

  • 代码压缩，图片压缩
  • Tree shaking
  • 代码分割
  • 缓存优化，利用 chunkhash

32. 浏览器从输入到显示页面的全过程

八股

33. 重排和重绘发生的过程是什么？会不会对页面性能有一些影响？

八股

34. 重排和重绘的优化？

八股

35. 谈谈你对宏任务跟微任务理解？

八股

36. 事件循环题目，写出运行结果和 promise 状态

大概长下方这样

const promise1 = Promise.resolve().then(() => {
  setTimeout(() => {
    console.log("111", promise2);
  }, 1000);
});

const promise2 = Promise.resolve().then(() => {
  throw new Error();
});

console.log("111", promise1);
console.log("111", promise2);

setTimeout(() => {
  console.log("111", promise1);
  Promise.resolve().then(() => {
    console.log("111", promise2);
  });
}, 3000);
  • 111 Promise { < pending > }
  • 111 Promise { < pending > }
  • 111 Promise { < rejected >: Error }
  • 111 Promise { < fulfilled >: undefined }
  • 111 Promise { < rejected >: Error }

这题挺麻烦的，还要写出 promise 状态。而且在 Node.js 环境下似乎会直接被 throw new Error() 给中断掉，怪怪的。

37. 算法题：链表内指定区间反转

不会写，只写了个普通的反转链表，给面试官看傻眼了

结果

本以为一面要凉凉，没想到面试结束后 5 分钟就收到了 HR 电话，约了下周一的二面。

二面

这次八股问的多些，面经如下：

问项目

  1. 项目支持发送弹幕功能吗？
  2. 项目有多少人在使用？他们是如何向你反馈问题的？
  3. 字幕功能是如何实现的？
  4. 错误日志是如何进行处理的？
  5. 历史记录里面的数据是如何进行存储的？动漫回看是如何实现的？
  6. IndexedDB 最大能存储多少数据？不同域名下 IndexedDB 里面数据能够互相访问吗？

八股

  1. const let var 区别
  2. Promise all allSettled race 用法
  3. array object 有哪些常用方法？
  4. React 常用 hooks 有哪些？
  5. useEffect 用法
  6. 谈谈重排和理解定义，如何减少他们？
  7. 图片懒加载如何实现的？组件懒加载呢？
  8. 谈谈 HTTP 缓存
  9. 什么时候用强缓存，什么时候用协商缓存？
  10. 什么是跨域，跨域的解决方案，简单请求和复杂请求具体的区别
  11. 为什么 GET, POST 是简单请求，而 DELETE, PUT, PATCH 是复杂请求？
  12. css 如何实现动画的？
  13. css 有哪些方式脱离文档流？
  14. bfc 是什么？
  15. Framer Motion 这个动画库是如何实现的？
  16. 解构赋值是深拷贝还是浅拷贝?
  17. 箭头函数和普通函数的区别？
  18. SSR 可以提高首屏加载速度吗？为什么？

结果

这次问的还算简单，当天下午 HR 就联系我二面通过，因为是日常实习，没有 HR 面，当天给了 offer

杭州公司

5 月 26 日，杭州一家 500 人左右公司，给了我一面。

有了被大厂拷打经验之后，这次面试直接速通，基本都是秒答，面了 15 分钟就结束了，隔天 HR 面后，也是给了 offer

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...