作者：只有一斤了呐
https://juejin.cn/post/7370682998990553100
由于各种原因，所在的部门没有了 hc 的机会，只能出去寻找更多的机会，这段时间里，分别 offer 了小米、快手、字节电商、wxg，最终还是选择了内部转岗到电商。这几段面试的经历也给我带来了很多的提升和思考，特此打算通过几篇文章来分享一下面试经历和我的一些思考。
一 背景
其实之前不太了解 wxg 的 title，但随着社区群内的几位大佬一直给 wxg 叠 buff，导致我有了强烈的进入 wxg 且转正欲望，给的是真多啊 🤣。然而一直听闻 wxg 的面试流程复杂且难度巨高，个人也是非常焦虑，开始了漫无止境的面试准备中，好在有运气加成，一路过关斩将，终于通过了五轮面试 😭。
对于这篇文章，我预计从这几个角度分享：
分享相关面经部分重点问题的回答对于一些考察上限的题目的思考
二 面试过程
一面 —— 技术面
这一面非常的紧张，面试前整天都能听到自己的心跳声，不过这个面试官非常的好，明确的说了自己不喜欢八股，这正好是我最不擅长的方向，运气真的非常重要啊！
1.上来了解我的基本情况，也没让我自我介绍
2. 写题：加载单图片、多图片
这个问题可以拆解成两个部分：
包装 Promise：对于单图片直接使用 promise.then 就可以，多图片需要参考 promise.all 的实现。 图片加载：这一步没有写出来，面试官跟我说这一步很多人都想不到，但其实非常简单。 有多简单？new Image(src) 就可以了🌝。好在这不是考察的重点，紧接着就基于这两个功能进行了扩展探究：
加载单图片作为开放能力提供给开发者，需要注意什么问题？
兜底操作，对 src 进行解析，保证图片正确 缓存 透传相关属性，实现定制化
多图片呢？
兜底操作，某一图片失败时提供信息 某一图片加载完后，优先展示 并发任务控制
如果一个庞大的架构体系改变一个小功能，如何保证整体逻辑不会崩？
确认逻辑的大概改动范围，进行单例测试
3. 写题：LRU 算法
LRU 即为最近最少使用缓存，具体实现在这里不详细描述，可以参考 力扣：leetcode.cn/problems/lr…由于我是用 map 实现的，面试官认为我是卡了一个 map 的 bug，让我想想有没有别的方式，实现 LRU 的核心是属性有序，所以我说可以用链表实现，由于用链表实现太废时了，就没让我写追问：map 为什么是有序，为什么查找的时间时间复杂度可以到 O(1)？答：给我干碎了，真没了解过，具体的原因我会在后面总结一篇文章出来。
4.写题：双链表升序合并 「设立哨兵连接指针即可」
5.什么时候可以入职
6. 飞书妙记做的是什么？业务实现？为什么我能在实习就做工程化？具体业务就不赘述了，至于我为什么能在实习就做工程化？一切都因为妙记本身的前端业务太复杂了，一开始不好上手，所以 mentor 想我从工程化入手，结果就一发不可收拾地往 owner 整个团队工程化的方向发展了。
7.babel-runtime 怎么实现的，具体细节，原理？之前写过总结，这个问题几乎在每个面试中都出现了（简历里面有写），涉及到性能优化部分，可以参考我这篇文章：babel-runtime 如何缩小打包体积 https://juejin.cn/post/7339328501356707876基于这个问题，我的面试官往往喜欢会发散出去问我首屏性能优化、构建速度优化的一系列问题，往往都是加分点！
8.fp、ftp 这些数据怎么记录的
9.如何提高本地构建速度的？
基于插件、loader 的特性和环境变量，进行合理编排。其实这方面的速度，还涉及到 并行任务控制、缓存，和速度相关的这两个点基本跑不到。
10.包依赖管理怎么做的这个也做过相关的总结，我聊了基于团队的包依赖解决方案，同时强调了这些是我自己总结的最佳实践，详细可以参考：面试官：说说包管理工具的发展以及 pnpm 依赖治理的最佳实践 🤯
11.monorepo 源码引用 sdk 的 alias 内容怎么做的
介绍了我手写的 webpack 插件和相关配置，这个在之前也有总结过：说来惭愧，入职的第一个需求居然花了我两多个月？！😭工程化的内容差不多就问到这里了，都是基于我的简历内容去询问的，最后说了一句：能看出来工程化这一块是在认真做的，很不错。
12.看了我上家实习、创业经历、开源项目，创业方面详细问了规模和实现之类的
13.学习前端的经历，为什么选择 wxg14.反问，问了业务组成：业务很少，主要是技术15.最后指出，可能对 map 这类底层还可以进一步学习一下
二面 —— 技术面
二面几乎刷新了我对面试的认知，居然会考我数学题……1.自我介绍
2. 介绍一个项目 开源，架构设计？解决痛点？
后面的面试基本都会围绕开源或创业展开问题，对于开源，当然是最近在做的一个脚手架项目啦，感兴趣的可以参考：🎉🎉🎉 重构三个月，我们设计出了一个轻量且非常灵活的前端脚手架架构对于开源，他们就是会比较在意这个项目的背景是什么，解决了什么痛点，具体的技术实现反而是次要的，如果介绍过程可以让面试官对这个产品心动，那么就会非常加分。
3. 上个面试官问你 map 的查找为什么 O1，回去有了解吗？
好问！回去后狠狠学习了一下，基本内容全都说出来了，但这个面试官又开始了深挖……
hashMap 实现一个数组加链表的结构，数组大小怎么设置？固定还是用户设置还是动态变化？什么情况触发扩容？map 最坏查找情况是怎样的？红黑树实现 hashMap 的话缺点在哪里？map 过大时，扩容怎么做，新创立空间的话很卡，怎么优化？
这一套下来我已经残废了，答了个勉勉强强，马上就开始了写题。后续的整理结果：WXG 二面：上次面试你没答出来的 map 底层，现在搞懂了吗 https://juejin.cn/post/7371019286372335631
4. 写题：升序数组 [2,3,4,5],插入一个数字，返回应该插入的位置
怎么优化（二分查找），考虑二分算 midIndex 时超过整数最大上限怎么处理如果让你写测试数据会写什么（重复元素），如果重复，插入哪里更合适（最后面的，开销最小）你开源项目怎么做的测试？ 「好问，一个一个测！」
5.async/await 降到 es5 做了什么转化，给了一段代码让我写出转化的结构。
6.font-size 的 px 是基于什么而定的（屏幕像素），是决定了字体的长宽还是什么？
7.http 1.x、2、3 的区别，UDP、TCP 的区别？
8.js 怎么发生的内存泄露
9.聊聊安全，问了 xss、csrf、sql 注入的实现原理？场景？
10. 写题：计算概率
AB个罐子，分别放红蓝球（标有 A、B），把球混在一起后，连续抽 3 个，计算：A、B 球至少有一个，且红球至少一个的概率。好好好👌，这就是 wxg 吗，今天真是让我受教了，不得不拿出一点点的高中概率基础了，写出来了一个计算公式，答案还是很仁慈的给我免了。
11. 写题：random5 实现 random7
有一个 random5（生成 1-5，每个随机数都 1/5 概率），用 random5 实现 random7（1-7，每个随机数都 1/7 概率）有点考智力那味了，实在是没能写出来，只完成了一半的内容，完整版如下：js复制代码
function random5() {
return Math.floor(Math.random() * 5) + 1;
}
function random7() {
let result = 0;
do {
let num1 = random5() - 1; // 将输出从 0 到 4
let num2 = random5(); // 将输出从 1 到 5
result = num1 * 5 + num2; // 产生从 1 到 25 的均匀分布
} while (result > 21); // 如果结果大于 21，重新生成
return (result - 1) % 7 + 1; // 将 1 到 21 映射到 1 到 7
}
// 测试 random7 函数console.log(Array.from({length: 10}, random7)); // 生成一个长度为 10 的数组，元素为 random7 的返回值
12.url 的组成？写题：给 url 的 params 插入更多参数，考虑字符转化。转化的意义是什么？
13.反问，了解到团队里的人都是跨 前端 + 游戏 的
就算最后一题没写好，最终还是过了，这场面试真是让我大汗淋漓，真的过瘾啊😭
三面 —— leader 面
这一面开始就没有算法了，更多是在考察上限的能力，也是非常的有难度。
1.自我介绍
2.讲一下创业？规模？形式和方向？我做的什么东西？用户量？
3.创业的项目中遇到什么有挑战的事情（技术方面）？在图片处理方面的流程设计，做过什么性能优化吗？
4.飞书做的工作介绍
构建速度怎么优化的？webpack 插件怎么做的？
5. 让你设计一个混淆压缩怎么做？Tree-shaking 怎么去除未引用代码？
要设计一个混淆压缩方案，通常需要结合多种技术来保证代码的安全性和性能，下面是我提出的方案：
代码压缩：通过删除空格、注释、不必要的字符等来减小代码体积，提高加载速度。
变量重命名：将变量名、函数名等重命名为更短、无意义的名称，使代码难以理解，增加逆向工程的难度。
代码混淆：使用各种技术对代码进行混淆，如将代码转换为一系列的计算表达式、条件语句等，使代码难以阅读和理解。
Tree-shaking：在打包过程中去除未被使用的代码，以减少最终构建出的文件大小。接着面试官追问了 Tree-shaking 的细节，首先肯定要是实现了 ESM 的模块化，接着会有如下操作：
静态分析：在代码编译阶段，对整个应用程序进行静态分析，确定模块之间的依赖关系。标记未被引用的代码：通过静态分析，标记出哪些代码被其他模块所引用，而哪些代码没有被引用。剔除未被引用的代码：标记完成后，将那些未被引用的代码从最终的构建输出中“摇晃”出去，不包含在生成的文件中。优化输出：去除未被引用的代码后，对最终的输出文件进行优化，确保删除了所有未使用的部分。
对于 Tree-shaking 后面考虑单独整理一篇文章来。
6. AST 怎么比较两端混淆的代码有抄袭情况？AST 里面的函数怎么转换去对比？
问到这里真的顶不住了，虽然知道 AST 是怎么回事，但深入到这个程度实在是没有相关的思路，后面查询了相关的资料，得到了几个的方案（后面也独立整理一篇）：
提取关键信息：从生成的 AST 中提取关键信息，例如函数、类、变量声明等，用于判断两段代码的相似性。指纹技术：对代码进行哈希或其他指纹化处理，然后比较生成的指纹，以判断两段代码之间的相似性。
7.Webpack 增量打包怎么做到的？「方案还挺多的，基本就是缓存以及相关的增量编译的插件、工具」
8.再介绍一下飞书中的一些贡献点，pnpm + monorepo 包依赖治理
9. 做过游戏相关的事情吗？俄罗斯方块的物理碰撞用哪个物理引擎实现的？
啊？因为了解到这个部门是游戏 + 前端方向的，主要提供微信小游戏开发者一个开发平台，有实现一些如 unity 转前端的基建，结果面试官就来问我游戏了？然而是真的不懂呀，但这个应该无伤大雅。
10.跨栈这边，flutter 这些了解过没「没做过，但聊了聊对跨栈发展趋势的认可」
11. 你怎么保证短时间内把跨栈能力提升上来？你当时工程化啥也不会咋做的工程化？当时是这么说的：既然在飞书可以从小白快速上手工程化，在这边我相信依然可以。这时候面试官又好奇为什么会做工程化，这对实习生来说确实是一个比较稀罕的事情，几场面试下来经常被问到这个。
12.问我这边工资多少？我问了微信，差不了太多。让我可以和 hr 沟通。
13.反问：
游戏 + 前端 的发展方向怎么看待的小游戏发展现状和未来趋势实习生培养模式有什么可以提升的地方：一些算法之类的底层还需要花时间再深入一些
四面 —— 面委面
wxg 特有的面委面，想必是考察上限的一场面试，整体下来还不错，唯独最后有些小失误。
1.自我介绍
2.你在飞书做了什么牛逼的业务，牛逼的事情
3.妙记的业务难点
4. 你是怎么理解工程化的，结合具体案例讲*考察上限时，这个问题真的很容易被问到，用一句非常简单的话来讲：前端工程化的目标是通过自动化、标准化和最佳实践，解放开发者的双手来提高相关事务的实现效率，同时大幅降低因频繁人工干预而导致出现问题的可能性。
5.CI 怎么做的
6.开源怎么做的
7.看看你的博客
8. 无感刷新 token 的意义，既然第二个 token 为一个月，为啥不直接给第一个 token 一个月
脑子白了没答好，说到安全，但他说第二个就安全吗？emmmm 真把我问住了，一时间想不到，结果他认为我在这方面没深入思考过 😭后面一查，其实无感刷新 token 的机制并不是为了解决 token 泄露的问题，而是为了降低 token 被滥用的风险。
9.反问
五面 —— hr 面
hr 面没啥可以分享的，基本就是一些信息同步，和个人三观和性格之类的的考察。
三 面试体验与总结
漫长的面试过程，可怕的面试经历，给我带来了很多的感触，然而因为 base 等一系列问题，最终还是选择了字节电商的 offer，实在是充满遗憾的一次经历，下面是一些总结：
简历真的很重要
有幸帮助很多社区的小伙伴指导过简历，很多都存在问题，这会直接影响面试的内容的，下面是一些总结：对项目内容的介绍要讲述清楚，比如可以遵循 STAR 法则，同时要一定程度深挖需求的根本原因，让面试官看出你是一个有业务理解的 man。格式很重要！一定要细心再细心，比如英文和中文保持空格，比如：你 and 他（你当然可以不保持空格，但你不能一会保持一会不保持），再比如技术栈的大小写个规范等。建议用 Markdown 来写简历，目前有很多在线可编辑的平台，个人使用的是 木及简历。
经历能打，八股成分就会少
面试之前看了很多腾讯的面经，八股的占比和内容真的让我非常焦虑，但是面试下来我能明显感受到，最常问的还是我简历中的内容，比如开源、创业和实习经历（另一个海外项目问都不带问的），所以可以看出一个不错的经历真的是非常吃香的。那么既然可以总结出经常被问到的内容，我们就可以用 STAR 法则整理出一段完美的回答套路🌝。
每次面试完要做好充足的复盘就好比2面中继续问我 map，这种问题如果不及时复盘，印象分必然会大打折扣，因此在面试后做一个完整复盘是非常必要的。这边还有很多的经验可以分享，甚至可以整理成一篇文章来讲解，不过考虑到后续我还会整理其他公司的面试过程，这个可以暂时放到都整理结束后再进行吧！也是祝愿看到这篇文章的同学能尽早拿到心仪的 offer，一起加油！
关注【测试开发技术】，添加"星标"，获取每天技术干货，共同成长！
推荐阅读：
END
长按二维码/微信扫码 添加作者
点赞和在看就是最大的支持❤️
