先简单说一下我的背景，普通本科。23年6月毕业，实习加上正式工作的时间大概有两年左右
当时是在boss随便投的，投的是天猫校园这个事业部，初筛很快就过了，接下来hr把我拉进一个钉钉群里面，开始面试。一共是4轮面试，一轮笔试。电话面试和视频面试都有。面试4轮前3面是技术面，最后1面是hrg面，然后都通过后会有专门一个hr来跟你谈薪资。结果是因为各种原因，拒了这个offer
权且记录一下当作复盘(下面的不是标准答案，只是我个人的理解，而且比较懒，一些东西也懒得写全了)
笔试(1h)
笔试比较基础，没有那种难的算法，都是应用型的题目，就是时间给的稍微有点不够。有一些题目没有完全写完。这里就不贴我自己的代码了
/**
* 一、
* 请实现函数 reverseWord ，对字符串中的单词进行反转，并满足以下条件：
* 1. 单词排列反序
* 2. 单词间以空格进行分割，若有多个空格只保留一个
* 3. 去除字符串所有首尾的所有空格
* console.log(reverseWord(' hello the world! ')); // 输出："world! the hello"
*/
/**
* 二、
* 请实现函数 compareVersions ，对两个版本号进行比较，并满足以下条件：
* @param {String} verA （必传）需要比较的新版本号
* @param {String} verB （必传）用于比较的旧版本号
* @param {String} type （可选）比较方案
* gt：大于
* gte：大于等于
* lt：小于
* lte：小于等于
* eq：等于
* @return {String|Boolean} 不传入type时，返回比较值，大于返回1、等于返回0、小于返回-1
传入type时，返回判断值 bool
compareVersions('2.0', '1.0.0'); // 1
compareVersions('1', '1.0.0'); // 0
compareVersions('1.2.3', '2.1.0'); // -1
compareVersions('1.2.0', '1.10.0'); // -1
compareVersions('1.0.0', '1', 'gte'); // true
compareVersions('1.0.0', '1', 'gt'); // false
compareVersions('1.0.0', '1', 'eq'); // true
*
*/
/**
* 三、
* 请写一个数据结构转换函数 convert
* 现有商品列表数据 itemList
* 将该商品列表按照商品分类（category）进行分组，且分组间按该分类下商品的种数进行倒序排序（休闲零食有四种商品，因此排第一）;
* 在每一分组下按商品的销量（saleCount）进行倒序排序。
* 要求不能对原数据 itemList 的任意属性值进行修改
[
* {
* "category": "休闲零食",
* "items": [
* { "id": 7, "name": "商品7", "category": "休闲零食", "saleCount": 48 },
* { "id": 4, "name": "商品4", "category": "休闲零食", "saleCount": 42 },
* { "id": 6, "name": "商品6", "category": "休闲零食", "saleCount": 37 },
* { "id": 9, "name": "商品9", "category": "休闲零食", "saleCount": 26 }
* ]
* },
* {
* "category": "家居百货",
* "items": [
* ...
* ]
* },
* ...
* ]
*/
/**
* 四、
* 请通过 React Hooks API 实现一个具有倒计时功能的自定义 Hook useCountdown，
* 要求可以使组件每秒自动更新倒计时。
* 当超过倒计时截止时间 targetDate 时，变成正计时（返回的 expired 为 false)
*
* @param {Date} targetDate 倒计时截止时间
*/
1面(1h)
-
1.js 的 渲染机制
- 渲染机制应该是 transform成ast抽象语法树，decode成机器码，巴拉巴拉
-
2.js 是 怎么实现异步的
- 大的方向是渲染进程可以分成多个
- 小的方向可以具体点来说，settimeout，promise，async都可以实现异步
-
3.vue 和 react 的 区别
- 可以说的太多了，我主要是从最佳实践和设计理念的角度进行分析的
-
4.问了一下之前做的项目的日pv,然后问了b端项目的业务理解和链路
- pv就据实回答。然后业务理解就把功能做拆分，分清楚上游下游b端c端区别就好了
-
5.线上或者生产环境有没有遇到过什么问题，怎么解决的，
-
nginx资源优先级未命中导致的白屏问题(解决方案：提高当前资源优先级与规范流程或者docker)
-
缓存失效(解决方案：区分no-store 和 no-cache，正确使用缓存，在不需要使用缓存的地方可以通过路径尾缀加上时间戳的方式进行刷新缓存)
-
build
- 环境变量读取不到(解决方案：vite打包后好像需要VITE_开头的环境变量才能被读取，改一下变量名就好了)
- CI/CD 线上构建的时候依赖报错(解决方案：npm-shrinkwrap或者是 去掉* ~ 锁死版本)
-
-
6.这些问题是怎么定位的，天猫如果需要你设计一套埋点系统你会怎么设计
-
通过埋点发现的，设计可以分成两个方向设计
-
埋和发
- 监控静态资源加载失效，promise错误
- 监控性能指标，fp，fcp，lcp之类的
- 监控用户轨迹，能够还原用户错误的场景
- 监控留存率，二级三级界面点击率
- web hook ，需要能够进行消息通知
- 发的话。sendbeacon
-
收
- web hook
- 数据监控大屏啥的
-
-
-
7.什么样的组件是一个好组件
- 其实这个可以从很多个方面进行回答，我主要是从headless和hoc进行切入。这部分见仁见智吧
-
8.如果你设计一套跨端的ui组件库，你会怎么设计
-
听到这个这个问题的时候，我第一个想到的是之前看到的这篇文章，juejin.cn/post/731160…【Ant Design Mini 支持微信小程序啦！】，因此思路如下
-
语法模板转化(babel 插件)
- 老代码到新代码的迁移(ai 插件)
- 不同平台api的适配。类似于css hack，corejs之类的
-
-
9.为什么要用monorepo，优势在哪里？假如你某一个monorepo的包里有1000个构件，你会怎么构建代码结构
- monorepo优势在于能过管理多个repo，适用于有多个npm 分包并且相互会有共享依赖的情况。多构件的情况我们可以制定策略来进行输出，例如写一段shell脚本或者是 用 lerna 来进行模块的管理
-
10.讲一下webcomponent在你项目中的使用，如何进行vue或者react的适配的
- 主要用到了自己封装的框架webzen-ui，然后说了一下怎么组织tree和frame组件的代码，和整体webcomponent的代码结构的。
- 至于怎么做vue和react的适配则是需要重新封装一层用来传递event，props。像 react 视情况可能需要 forwardref来包裹
-
11.mobx的原理是啥,为什么这个项目不用redux或者rtk，说一下怎么做技术选型的
-
mobx 的主体主要有两个 Observable 和 Observers，原理基于追踪可观察数据的变化，并自动更新依赖于这些数据的观察者，当时考虑到这个的心智负担比较小，并且这个项目不会特别大(提这点是因为mobx因为双向绑定导致数据被更改不好溯源)，因此不会选择redux和rtk。
-
然后是怎么进行技术选型的，主要是要回答下面的问题
- 目前的问题是啥
- 社区中有什么解决方案，相对的最佳实践有啥，选出三四个。横向比较业务场景哪一个更加适配，哪一个更能解决问题。
- 最后如果不能解决问题可能才需要自己造轮子
-
-
反问:组织架构,前端要求(baba),是否是孵化部门(不是),一共几轮面试(4)，面评
一些太简单的我就不说了，像是其中穿插了一些类似闭包的问题，反正最后持续了一小时左右，第二天通知一面过了
2面(40min)
我简历里面有一个虚拟人项目，这一面就在我的这个项目里挖啊挖
-
1.简单讲一下虚拟人项目
-
业务强相关，主要的技术要点有
- webrtc(好像面试官不太了解这个，大概说了一下怎么设置信令和怎么通信的，然后很快就过了这个话题)
- aframe
- mediapipe + 图形学那一套(着色器，矩阵计算和glsl)
-
市场
- 面向xxx，作用xx，目前的成果之类的
-
-
2.既然你提到虚拟人有一个直播同屏效果，有没有了解过不同场景下面 直播 推流的一些区别，然后怎么进行优化这一块
- 区别：从协议的角度分析，高延迟下面和低延迟下面应用的不同，例如HLS原理是集合一段时间数据生成ts 切片文件，更新m3u8。因此这个适合做视频点播，然后RTMP 或者是 RTSP因为是收到后立刻转发，所以适合做直播
- 优化
- 预加载
- 服务端ffmpeg切片
- 优化协议，例如用类似于kcp协议的方式或者是webrtc
- 堆网络机房的配置
-
3.除了这一点，虚拟人项目中有进行过什么优化吗
-
实现高位查表，低位差值 的 lut 滤镜效果
-
vite
- csp + integrity
- splitchunk 分包
- terser 和 nano 压缩代码
-
npm 封装 fetch 使其在axios的基础功能上 支持 sse，最大重试次数，自动重试，取消请求这几类feature，(有空专门写一篇文章来聊聊这个)
-
-
4.h5 和 移动端做 3d 有 什么区别，射线选中器是啥
-
不同平台3d
- 考虑到移动端的性能，采用bff + 不同策略的模型加载和配置策略
- pc端监听事件是 drag和move，移动端是touch
- 适配的事件热点偏移问题
-
射线选中器是 raycaster，是3d里面的概念，相等于事件触发器
-
-
5.假如需要你开发一个直播系统，你会从哪些地方进行考量
- 略（大逻辑上是要分成直播，礼物，鉴权，推拉流服务，在线服务，房间服务几个方向，小逻辑就特别多了，省略）
-
6.假如有一个场景。例如淘宝中签到领金币的这个界面，你在设计ui的时候需要考虑什么因素
- 略
-
7.前端职业生涯规划
- 略
3面(1h)
-
1.项目的网盘和大屏模块有什么难点
- 请求分发控制(详情见我juejin.cn/post/728125… 这篇文章)
- 大屏的自适应(采用的 autofit，中途发现了autofit的自适应在嵌套的情况下面有问题，向官方仓库提了个pr)
-
2.网盘系统怎么确保 阿里云 和 本地后端 文件系统的一致性
- 其实这是一个业务流程问题，要点在于前端和后端能够存储各个进度，文件系统流程全部走完视为上传的这个事务成功，如果遇到网络中断什么的问题，下一次访问直接恢复上一次事务的进度。
-
3.做过sso吗，讲一下逻辑
- 略（主要就是去配置中心去交接令牌）
-
4.llm的原理，怎么把ai和前端结合
- llm的原理 是 基于transformer 架构，本质还是深度学习堆叠各种layer，给定 input输出 output的架构，但是区别在于llm架构引入了nlp的语义向量化。
- 在把ai 和 前端结合方面：讲了一下 识货的ar换衣，360云的ar看房之类的应用。然后说了一下自己做的东西，例如搭建了一个langchain + chatgpt 的自有资料库和利用 mediapipe实现手势控制脚本
-
5.假如需要你开发一个低代码平台，你需要考虑什么
- 略（大逻辑上是要实现编码器那一套，小逻辑上面就分成配置，状态，事件管理）
-
6.你认为前端目前的趋势是什么
- 略
-
7.平常是怎么进行学习的
- 略
4面(20min)
hrg 面:
- 1.平时兴趣爱好
- 2.未来的职业规划
- 3.周末一般做什么
- 4.为什么离开上一家公司
- 5.为什么选择年前离职
- 6.对前端这一个行业有什么看法
- 7.用三个词形容一下别人对你的评价
总结
总的来说，很少那种八股的问题，很多都是对着你的简历来问。并且系统设计类的很多，面试体验很不错，有几个比较聊得来的甚至还加了微信。不过因为各种原因，没有接受这个offer。下一年继续努力吧
最后祝大家2024年新年快乐
