点击上方 前端下午茶，关注公众号
回复加群，加入前端下午茶技术交流
本文已向作者授权转载 作者：只有一斤了呐 原文：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，一起加油！
最后
如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：
点个「喜欢」或「在看」，让更多的人也能看到这篇内容
我组建了个氛围非常好的前端群，里面有很多前端小伙伴，欢迎加我微信「sherlocked_93」拉你加群，一起交流和学习
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
点个喜欢支持我吧，在看就更好了
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
