在鹅厂也呆了一年多了，业务一般般，而且很忙（晚上10点+，每天不定时随时oncall）。希望能换个平台稍微轻松一些的，并寻求更好的发展和更高的技术视野，也希望能找到轻松一些的工作，所以出来看机会了。个人选择的原则：满足工作生活平衡、付出收益平衡、业务未来可观三者之一。近来有一批面试，整理完每一篇后，会持续更新《一年半经验前端社招》系列的文章

下面的题目，都会标明每一题的性质，也会给出一些参考思路

• 描述：对概念、过程的描述，纯理论性问答题为主
• 举例：说出应用场景，或者是自己团队实践的情况
• 伪代码：写代码，但不需要跑起来，甚至可以随便写伪代码，主要目的是描述思路
• 编程：真正的写代码，需要跑起来，有测试用例，要看到效果

往期回顾:

• 一年半经验前端社招——拼多多（已面完hr）
• 一年半经验前端社招——字节跳动（已拿offer）
• 一年半经验前端社招——虾皮（已拿offer）
• 一年半经验前端社招——猿辅导（已拿offer）

公司面试难度评估：✭✭✭✭✩

1面

1. 看见你写的文章，还很深的，说一下这几篇【描述】
   挺surprise的，居然有人那么用心看我文章，还看细节。于是带着兴奋的心情迫不及待和他介绍了
2. react的class组件和函数组件有什么不同【描述】
   class组件有生命周期有状态、函数组件就看返回值无状态(现在有hook了)
3. class组件存在问题，函数组件的问题【举例】
   又是经典问题，class组件随着项目变大生命周期逻辑过于耦合、庞大，函数组件可以更细粒。class组件需要走实例化流程，但可以使用装饰器。函数组件就不能使用装饰器了，函数组件ref需要forwardRef，不用纠结this。如果代码量都很多，函数组件可读性高一些
4. class组件和函数组件diff、渲染、挂载过程差异【描述】
   其实是一样的，最终结果有点不一样，可以看打包后代码
5. em、px、rem【描述】
6. rxjs在复杂异步管理的作用【举例】
   没有在项目用过，他们那边是挺需要rxjs这种异步管理的，把流程视为时间轴，使用管道操作符操作异步数据流。一切异步流程你都可以画在弹珠图上清晰看见
7. websocket和http协议区别【描述】
   http无状态、被动；ws一次握手，知道状态，可以双向通信
8. 完全不同的域名共享localstorage的方案【描述】
   公共服务器双工通信(比较简单暴力)、嵌套iframe并双向通信(只要一个变了，马上通知另一方，保证他们的localstorage一模一样)
9. 如果react项目要接入redux，每一步要怎么做【举例】
   从api的使用到源码的实现。源码流程：provider传入store，connect要return一个组件，使用mapstatetoprops和mapdispatchtoprops扩展props，然后subscribe一下store，每次变化更新组件
10. 对象、引用类型、immutable、...、Object.assign【描述】
    放松一下，我们聊些简单的......
11. 写一个你熟悉的吧，antd的tree渲染这个数据结构【伪代码】
    在面试的页面上直接写jsx，高亮看得难受，也没代码提示。真的是放松题了，一个递归，tree包一下treenode，完事

一面还是挺轻松的，一种和人家交流技术的感觉。后面聊了很久他们的业务，做ai编程的，提交程序放到一个平台上跑，全程websocket双向通信，此时页面上有各种程序和图表，各种异步混杂起来，大概可以理解为什么用rxjs了

2面

1. 项目深挖，反问一些问题【描述】
2. settimeout(a, 3000); ...同步代码执行很久 settimeout(b, 1000)多少种情况，临界值【描述】【举例】
   同步代码执行时间 <= 3000，顺序。 > 3000先b再a
3. 为什么会这样，说一下event loop【描述】
   背书
4. 浏览器底层对线程冲突的实现【描述】
   不知道了。对方说因为有一个watcher，你可以看一下Chrome底层实现，比死记硬背宏任务微任务更好
5. 一个页面，有图片、文字等各种内容，要求不能打乱排版和比例，如何兼容所有端【举例】
   rem方案。但还是要看情况，一般情况下，手机是竖着的，电脑是横着的，总要对其中一个补白，不然很难看
6. 浏览器缓存在spa的应用。html要不要缓存，为什么？其他资源呢，为什么【举例】
   html不缓存，都是引用js，要保证最新。其他可以缓存，每次发布文件名都有哈希、md5保证不一样，而且也是增量部署的
7. react性能优化【举例】
   又是老问题了。scu生命周期、memo；usememo & usecallback记住一些值不用重新计算；虚拟列表；immutable+scu/memo；原生js；
8. 100条香蕉，猴子离家50米，猴子每走一米要吃一根香蕉，猴子最大负重是50条香蕉。问猴子怎么做，可以做到拿回家香蕉最大化，最大可以拿到多少条回家【伪代码】
   结果是啥不重要了，主要是思路。他问用dp还是贪心，我说都行吧，dp肯定是可以，贪心也算得上是吧。写了一段伪代码，在离家n米处有s条香蕉，每次选择回头或者前进，回头的话会损失2 * (50 - n) + 1，并补全到50条(库存能支持的情况下，相当于新增量减去损失量);选择前进，只会减少1。每一步选择最多剩余的，等于下一步的s值。临界点：离家0米，s就是答案; 离家50米，s就是50

3面

1. 项目深挖、提问【描述】
2. 你项目怎么接入ci的，整个流水线是怎样【描述】
   git提交 => lint执行 => 触发hook => 读取yml文件执行命令 => 部署 => 调用机器人接口发布企业微信群周知
3. 设计一个短链接系统【描述】
   页面链接映射 => 时间戳 + 关键字符串 => 映射到数字序号转高进制 => 获得短链接

应该是技术老大了，知识面很广，和他交流我只回答我懂的那些，他也没有刁难，专门找我熟悉的来问。最后再次重复了一下他们的业务，ai编程、提交到一个平台运行、异步数据流很复杂

最后

这次商汤的面试，明白了需要学一下底层，可以看到一些事情的本质，也了解了一些冷门领域和其他领域的东西。二面面试官挺好的，就是忘了加微信了，讲了一些未来规划，讲了除了技术方面的格局更高的事情

lhyt个人技术沉淀