拼多多、酷家乐面试总结

前言

离职缘由看我这篇文章吧：离开蘑菇街后，我最近的一些想法，而后不得不去找工做恰饭呀。

我目前面了五家公司：滴滴、蚂蚁、拼多多、酷家乐、字节跳动，拼多多和酷家乐基本已拿到 offer，蚂蚁二面完了，滴滴和字节即将三面，我先把我已经面过的面经先总结出来，其余的无论过没过，这周内我都会总结出来，但愿能给到正在找工做同窗的帮助。

在文章里我不只会列出面试题，还会给到一些答题建议，我的能力有限，也不能保证我回答都正确，若是有错误，但愿能纠正我。

酷家乐

酷家乐是我最先面的一家公司，还没被裁的那周二恰好面完，结果周五就被裁了，可能这就是冥冥之中吧。

面试的部门是工具组，是酷家乐最核心的部门，四面面试官跟我说我面的组是工具团队中的最核心组，会涉及到一些图像相关的技术，好比 Tree.js、WebGL等，因此这个组其实也挺好的，感受能学到很多技术。

一面(电话面)

• 你在项目如何优化的

  我在简历里面写到了性能优化相关的，因此这个问题。

• 你作的项目有什么值得说的

  基本上就是考察项目的亮点，能够说一些项目难点是如何解决的，或者介绍一些项目中用到的牛逼的技术。

• Ts 有什么优点

  讲道理全部如今在网上能查到的优点都是得益于 静态语言的优点。

• type 和 interface 的区别

  这是一个高频题，若是考察 TS，这应该是最容易考察的，网上也都能查到相关的资料，可是极可能忽略一个点： type 只是一个类型别名，并不会产生类型。因此其实 type 和 interface 其实不是同一个概念，其实他们俩不该该用来比较的，只是有时候用起来看着相似。

• React 事件机制

  我以为须要答的点：

  1. React 为何要用合成事件
  2. 事件机制：注册和分发的过程。这里面至少要说出事件注册都是在元素的最顶层 document 节点上。

  参考资料：一文吃透 React 事件机制原理

• 聊聊 React 的 diff

  聊 diff 建议先看看我以前写过的一篇关于虚拟 DOM 的文章： 从 React 历史的长河里聊虚拟DOM及其价值，有助于理解 diff 的意义。

  diff 的细节能够看我以前写的：详解 React 16 的 Diff 策略

• React 优化

  能够看以前我写的 React 函数式组件性能优化指南，对于类组件也有对应的 API。

• 怎么理解闭包

  基础中的基础，虽然社招考得很少，可是若是连闭包都理解不了，应该会减分很多。闭包因为在规范里没有定义，因此不少人下的定义不同，理解的角度也不一样，可是本身要有一套正确的理解方式，若是按照个人理解 JavaScript 里面全部的函数都是闭包，由于有全局环境，全部的函数均可以访问全局变量。

• 节流怎么实现的

  防抖和节流的代码仍是须要会手写的，这也是一个闭包的例子，

• 原型，class B 继承 class A 翻译成 es5 应该是什么样子

  说实话，我以为这道题其实蛮有水平的，即考察了如何写出一个好的继承方式，也对 new 过程进行了考察，还对考察了对 Class 的理解。

  注意的点：class 是有重载功能的，怎么在子类的构造函数里面调用 super

二面(现场面)

• react 的基本原理

  UI = f(state) ，虚拟 DOM、diff 策略、setState

• react 如何作性能优化

  这个题也是高频，见一面回答

• redux 的重点概念

  store、reduce、action、actionCreater、dispatch

• 聊一聊 React 的生命周期

  尽可能把 React 15 和 16 的进行对比，而后 16 为何要准备废除那几个生命周期，以及新增的生命周期能够进行替代。

  这个图好好的理解一下

  

• 聊一聊 hooks 怎么处理生命周期

  讲道理函数式组件是没有生命周期的，可是如何去模拟类组件的生命周期的做用，都是在 useEffect 里面进行操做的，由于生命周期里面所作的基本都是反作用，放到 useEffect 里是最合适的，专门用来处理反作用。

• 笔试题一

const a = { b ： 3}

function foo(obj) {
  obj.b = 5

  return obj
}

const aa = foo(a)

console.log(a.b)

console.log(aa.b)

• 笔试题二：

function Ofo() {}

function Bick() {
    this.name = 'mybick'
}

var myBick = new Ofo()

Ofo.prototype = new Bick()

var youbick = new Bick()

console.log(myBick.name)

console.log(youbick.name)

• 笔试题三：考察盒子模型和 box-sizing 属性，判断元素的尺寸和颜色。

• 实现一个 fill 函数，不能用循环。

  考察递归

• 用 ES5 实现私有变量

  考察闭包的使用

三面(现场面)

• 简历里面的性能优化是如何作的

  减小请求频率、图片压缩、 React.memo、 React.useMemo

• class 组件里面如何作性能优化(由于前面我说了用 React.memo 作了性能优化)

  shouldComponentUpdate(简称 SCU)。SCU 跟 immutable 强相关，必定要好好理解 react 的 immutable，不然极可能理解不了为何不能直接去修改 state，而后再去 setState，以及 redux 的 reducer 要返回一个新的对象。

• 实现一个 Typescript 里的 Pick

  type Pick<T, K extends keyof T> = { [P in K]: T[P] }

• 手写 Promise.all
• 手写并发只能 10 个

• 算法题，怎么判断单链表相交。

  不少种方法，我当时说的是最后一个节点若是相同，那么就表明相交。

• 算法题，怎么找到第一个相交的节点。

  同时遍历两个链表到尾部，同时记录两个链表的长度。若两个链表最后的一个节点相同，则两个链表相交。有两个链表的长度后，咱们就能够知道哪一个链表长，设较长的链表长度为len1,短的链表长度为len2。则先让较长的链表向后移动(len1-len2)个长度。而后开始从当前位置同时遍历两个链表，当遍历到的链表的节点相同时，则这个节点就是第一个相交的节点。

  这是我刚想到的一种方式，不过当时面试的时候我记得好像更简单，可是想不起来了。

四面(现场面)

• 你以为你在公司人缘怎么样
• 你以为你为大家小组作了什么贡献
• 为何要离职
• 除了咱们公司还投了其余公司吗
• 薪资和层级有什么要求
• 如何垂直水平居中
• 你看过开源库的源码吗？

• 那你聊聊 React 的源码，把你记得起的讲一讲

  我看过 React 的一部分源码的，因此关于 React 源码更新部分的东西，应该基本都能说个大概。

• FiberNode 有哪些属性
• stadeNode 有什么用？
• 还有一些技术问题想不起来了

小结

酷家乐面试体验仍是不错的，我是一面电话面，面完以为 OK 以后就叫到公司去现场面试，6 点半下班了就骑车去了酷家乐，七点开始面试，一口气面完了三面，饭都没来得及吃，不过面试官很好给我倒了水。

感受面试官对个人项目彷佛不太敢兴趣，不多问项目的东西，可能因为他们是工具组，连我简历里面组件库相关的也没面，考察基础的比较多，基础考察得比较全面。

可是因为考虑到我以前作的项目复杂性不够，以及工做年限的问题，给到的评级不高，致使薪资也不是特别高，可是已是这个评级的顶峰了，要是没有更好的 offer 酷家乐仍是很是值得去的，特别是工具组。

拼多多

一面

• react 16 生命周期有什么改变

  componentWillMount， componentWillReceiveProps， componentWillUpdate 准备废除，新增了 static getDerivedStateFromProps 和 getSnapshotBeforeUpdate

  我还详细的介绍了为何要用 getDerivedStateFromProps 来代替即将废除的三个生命周期，主要是16 版本 render 以前的生命周期可能会被屡次执行，具体的可看个人这篇文章：Deep In React之浅谈 React Fiber 架构(一)

• 详细的介绍一下 getDerivedStateFromProps
• 你在项目中如何作性能优化的

• flex: 0 1 auto; 是什么意思？

  flex 这个属性常考题，好好把阮老师的那篇 flex 语法篇看完 flex 的面试题基本没问题。

• less 的 & 表明什么？

• 算法题：求最大公共前缀，如 ['aaafsd', 'aawwewer', 'aaddfff'] => 'aa'

  不能调试，全靠编程素养，只能面试官才能运行。

• interface 和 type 的区别

  又考了，上面有回答

• 有用状态管理吗？

  我经常使用的是 redux 和 dva，而后再聊了聊区别已经 redux 的理念

• 有用 ssr 吗？

  没用过

• node 熟悉吗？

  写得少

二面

• class 组件与函数式组件的区别

  生命周期、设计理念，感受这道题比较开发，能够看看 dan 的这篇： 函数式组件与类组件有何不一样？

• css 优先级

  important > 内联 > ID选择器 > 类选择器 > 标签选择器

• 避免 css 全局污染。

  我经常使用的 css modules

• css modules 的原理

  生成惟一的类名

• 有一个a标签，如何动态的决定他的样式。

  我说了先写几个 css，而后外部传一个前缀的方式。面试官问了都要这样吗？我说能够经过 context 的方式，就不须要每一个组件都传了。

• import 和 require 导入的区别

  高频题，考察 ES6 模块和 CommonJS 模块 的区别。关键点：1. 前者是值的引用，后者是值的拷贝。 2.前者编译时输出接口，后者运行时加载。

  推荐文章：前端模块化：CommonJS,AMD,CMD,ES6

• require 有什么性能问题

  好好想一想上一个题的区别就能想到了

• 组件库如何作按需加载

  我经常使用的是 babel-plugin-import

• webpack 如何实现动态加载

  讲道理 webpack 动态加载就两种方式： import()和 require.ensure，不过他们实现原理是相同的。

  我以为这道题的重点在于动态的建立 script 标签，以及经过 jsonp 去请求 chunk，推荐的文章是：webpack是如何实现动态导入的

• react 里有动态加载的 api 吗？

  React.lazy

• React.lazy 的原理是啥？

• webpack 能动态加载 require 引入的模块吗？

  应该是不能的，前面说了，webpack 支持动态导入基本上只能用 import() 和 require.ensure。

• require 引入的模块 webpack 能作 Tree Shaking 吗？

  不能，Tree Shaking 须要静态分析，只有 ES6 的模块才支持。

• 设计一个input 组件须要哪些属性。我说了 value 、defaultValue、onChange
• value 的类型是什么？
• onChange 怎么规定 value 的类型
• interface 和 type 的区别

• 写一个 promise 重试函数，能够设置时间间隔和次数。function foo(fn, interval, times) {}

  常规题，网上有参考答案的。

三面

• 组件平台有哪些功能？

  详细的跟我讨论组件平台的设计，由于他们也想作一个组件平台。

• 实现一个 redux

  实现 createStore 的功能，关键点发布订阅的功能，以及取消订阅的功能。

• 用 ts 实现一个 redux

  简单的加上类型，我写的类型没有 redux 源码那么复杂，当时写得比较简单。

小节

一面的时候其实我本身感受答得不是特别好，连 less 的语法都忘记了，当时面下来感受要凉了，平时写 样式的时间确实太少了。

很幸运的时候仍是给我过了，二面面试官我以为面得很专业，基本都是从浅入深的考察知识的深度，我感受答得还能够，由于我是属于那种会的就尽可能深一点，暂时不用的就不多花时间，因此我目前知识的广度颇有欠缺，对于 node、ssr、移动端、小程序这些方面个人能力都很薄弱，可是面试的时候若是你不熟悉，直接说不熟悉就行，他就不会面了。

我准备面试以前对我本身的要求就是，我会的尽可能不会很快就被问倒，因此我重点复习了我擅长的知识。

面下来感受拼多多也没有想象中那么难，虽然拼多多薪资算行业内高的，不过拼多多在上海，我在杭州，另外就是强制上 6 天班，我比较忌惮这点。考虑到我和女友原本就是异地，要是单休，并且节假日也会比正常的少，见面的机会就更少了。

反正选 offer 这种事仍是尽可能综合考虑吧，团队、薪资、我的生活都应该考虑进去。

最后

我是桃翁，一个爱思考的前端er，期待你的关注。
本文由博客一文多发平台 OpenWrite 发布！