拼多多和酷家樂(lè)面試總結(jié)(已拿offer)
前言
離職原因看我這篇文章吧：離開(kāi)蘑菇街后，我最近的一些想法，然后不得不去找工作恰飯呀。
我目前面了五家公司：滴滴、螞蟻、拼多多、酷家樂(lè)、字節(jié)跳動(dòng)，拼多多和酷家樂(lè)基本已拿到 offer，螞蟻二面完了，滴滴和字節(jié)即將三面，我先把我已經(jīng)面過(guò)的面經(jīng)先總結(jié)出來(lái)，其他的不管過(guò)沒(méi)過(guò)，這周內(nèi)我都會(huì)總結(jié)出來(lái)，希望能給到正在找工作同學(xué)的幫助。
在文章里我不僅會(huì)列出面試題，還會(huì)給到一些答題建議，個(gè)人能力有限，也不能保證我回答都正確，如果有錯(cuò)誤，希望能糾正我。
酷家樂(lè)
酷家樂(lè)是我最早面的一家公司，還沒(méi)被裁的那周二剛好面完，結(jié)果周五就被裁了，可能這就是冥冥之中吧。
面試的部門(mén)是工具組，是酷家樂(lè)最核心的部門(mén)，四面面試官跟我說(shuō)我面的組是工具團(tuán)隊(duì)中的最核心組，會(huì)涉及到一些圖像相關(guān)的技術(shù)，比如 Tree.js、WebGL 等，所以這個(gè)組其實(shí)也挺好的，感覺(jué)能學(xué)到不少技術(shù)。
一面(電話(huà)面)
你在項(xiàng)目如何優(yōu)化的
我在簡(jiǎn)歷里面寫(xiě)到了性能優(yōu)化相關(guān)的，所以這個(gè)問(wèn)題。
你做的項(xiàng)目有什么值得說(shuō)的
基本上就是考察項(xiàng)目的亮點(diǎn)，可以說(shuō)一些項(xiàng)目難點(diǎn)是如何解決的，或者介紹一些項(xiàng)目中用到的牛逼的技術(shù)。
Ts 有什么優(yōu)勢(shì)
講道理所有現(xiàn)在在網(wǎng)上能查到的優(yōu)勢(shì)都是得益于靜態(tài)語(yǔ)言的優(yōu)勢(shì)。
type 和 interface 的區(qū)別
這是一個(gè)高頻題，如果考察 TS，這應(yīng)該是最容易考察的，網(wǎng)上也都能查到相關(guān)的資料，但是很可能忽略一個(gè)點(diǎn)：type 只是一個(gè)類(lèi)型別名，并不會(huì)產(chǎn)生類(lèi)型。所以其實(shí) type 和 interface 其實(shí)不是同一個(gè)概念，其實(shí)他們倆不應(yīng)該用來(lái)比較的，只是有時(shí)候用起來(lái)看著類(lèi)似。
React 事件機(jī)制
我覺(jué)得需要答的點(diǎn)：
參考資料：一文吃透 React 事件機(jī)制原理[1]
- React 為什么要用合成事件
- 事件機(jī)制：注冊(cè)和分發(fā)的過(guò)程。這里面至少要說(shuō)出事件注冊(cè)都是在元素的最頂層
document節(jié)點(diǎn)上。
聊聊 React 的 diff
聊 diff 建議先看看我之前寫(xiě)過(guò)的一篇關(guān)于虛擬 DOM 的文章：從 React 歷史的長(zhǎng)河里聊虛擬 DOM 及其價(jià)值，有助于理解 diff 的意義。
diff 的細(xì)節(jié)可以看我之前寫(xiě)的：詳解 React 16 的 Diff 策略
React 優(yōu)化
可以看之前我寫(xiě)的 React 函數(shù)式組件性能優(yōu)化指南，對(duì)于類(lèi)組件也有對(duì)應(yīng)的 API。
怎么理解閉包
基礎(chǔ)中的基礎(chǔ)，雖然社招考得不多，但是如果連閉包都理解不了，應(yīng)該會(huì)減分不少。閉包由于在規(guī)范里沒(méi)有定義，所以很多人下的定義不一樣，理解的角度也不同，但是自己要有一套正確的理解方式，如果按照我的理解 JavaScript 里面所有的函數(shù)都是閉包，因?yàn)橛腥汁h(huán)境，所有的函數(shù)都可以訪問(wèn)全局變量。
節(jié)流怎么實(shí)現(xiàn)的
防抖和節(jié)流的代碼還是需要會(huì)手寫(xiě)的，這也是一個(gè)閉包的例子，
原型，class B 繼承 class A 翻譯成 es5 應(yīng)該是什么樣子
說(shuō)實(shí)話(huà)，我覺(jué)得這道題其實(shí)蠻有水平的，即考察了如何寫(xiě)出一個(gè)好的繼承方式，也對(duì) new 過(guò)程進(jìn)行了考察，還對(duì)考察了對(duì) Class 的理解。
注意的點(diǎn)：
class是有重載功能的，怎么在子類(lèi)的構(gòu)造函數(shù)里面調(diào)用super
二面(現(xiàn)場(chǎng)面)
react 的基本原理
UI = f(state) ，虛擬 DOM、diff 策略、setState
react 如何做性能優(yōu)化
這個(gè)題也是高頻，見(jiàn)一面回答
redux 的重點(diǎn)概念
store、reduce、action、actionCreater、dispatch
聊一聊 React 的生命周期
盡量把 React 15 和 16 的進(jìn)行對(duì)比，然后 16 為什么要準(zhǔn)備廢除那幾個(gè)生命周期，以及新增的生命周期可以進(jìn)行替代。
這個(gè)圖好好的理解一下
react 生命周期聊一聊 hooks 怎么處理生命周期
講道理函數(shù)式組件是沒(méi)有生命周期的，但是如何去模擬類(lèi)組件的生命周期的作用，都是在
useEffect里面進(jìn)行操作的，因?yàn)樯芷诶锩嫠龅幕径际歉弊饔茫诺?useEffect里是最合適的，專(zhuān)門(mén)用來(lái)處理副作用。筆試題一
const a = { b ：3}function foo(obj) {obj.b = 5return 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屬性，判斷元素的尺寸和顏色。實(shí)現(xiàn)一個(gè) fill 函數(shù)，不能用循環(huán)。
考察遞歸
用 ES5 實(shí)現(xiàn)私有變量
考察閉包的使用
三面(現(xiàn)場(chǎng)面)
簡(jiǎn)歷里面的性能優(yōu)化是如何做的
減少請(qǐng)求頻率、圖片壓縮、
React.memo、React.useMemoclass 組件里面如何做性能優(yōu)化(因?yàn)榍懊嫖艺f(shuō)了用 React.memo 做了性能優(yōu)化)
shouldComponentUpdate(簡(jiǎn)稱(chēng) SCU)。SCU 跟 immutable 強(qiáng)相關(guān)，一定要好好理解 react 的 immutable，否則很可能理解不了為什么不能直接去修改 state，然后再去 setState，以及 redux 的 reducer 要返回一個(gè)新的對(duì)象。
實(shí)現(xiàn)一個(gè) Typescript 里的 Pick
type Pick手寫(xiě) Promise.all
手寫(xiě)：并發(fā)只能 10 個(gè)
算法題，怎么判斷單鏈表相交。
很多種方法，我當(dāng)時(shí)說(shuō)的是最后一個(gè)節(jié)點(diǎn)如果相同，那么就代表相交。
算法題，怎么找到第一個(gè)相交的節(jié)點(diǎn)。
同時(shí)遍歷兩個(gè)鏈表到尾部，同時(shí)記錄兩個(gè)鏈表的長(zhǎng)度。若兩個(gè)鏈表最后的一個(gè)節(jié)點(diǎn)相同，則兩個(gè)鏈表相交。有兩個(gè)鏈表的長(zhǎng)度后，我們就可以知道哪個(gè)鏈表長(zhǎng)，設(shè)較長(zhǎng)的鏈表長(zhǎng)度為 len1,短的鏈表長(zhǎng)度為 len2。則先讓較長(zhǎng)的鏈表向后移動(dòng)(len1-len2)個(gè)長(zhǎng)度。然后開(kāi)始從當(dāng)前位置同時(shí)遍歷兩個(gè)鏈表，當(dāng)遍歷到的鏈表的節(jié)點(diǎn)相同時(shí)，則這個(gè)節(jié)點(diǎn)就是第一個(gè)相交的節(jié)點(diǎn)。
這是我剛想到的一種方式，不過(guò)當(dāng)時(shí)面試的時(shí)候我記得好像更簡(jiǎn)單，但是想不起來(lái)了。
四面(現(xiàn)場(chǎng)面)
你覺(jué)得你在公司人緣怎么樣
你覺(jué)得你為你們小組做了什么貢獻(xiàn)
為什么要離職
除了我們公司還投了其他公司嗎
薪資和層級(jí)有什么要求
如何垂直水平居中
你看過(guò)開(kāi)源庫(kù)的源碼嗎？
那你聊聊 React 的源碼，把你記得起的講一講
我看過(guò) React 的一部分源碼的，所以關(guān)于 React 源碼更新部分的東西，應(yīng)該基本都能說(shuō)個(gè)大概。
FiberNode 有哪些屬性
stadeNode 有什么用？
還有一些技術(shù)問(wèn)題想不起來(lái)了
小結(jié)
酷家樂(lè)面試體驗(yàn)還是不錯(cuò)的，我是一面電話(huà)面，面完覺(jué)得 OK 之后就叫到公司去現(xiàn)場(chǎng)面試，6 點(diǎn)半下班了就騎車(chē)去了酷家樂(lè)，七點(diǎn)開(kāi)始面試，一口氣面完了三面，飯都沒(méi)來(lái)得及吃，不過(guò)面試官很好給我倒了水。
感覺(jué)面試官對(duì)我的項(xiàng)目似乎不太敢興趣，很少問(wèn)項(xiàng)目的東西，可能由于他們是工具組，連我簡(jiǎn)歷里面組件庫(kù)相關(guān)的也沒(méi)面，考察基礎(chǔ)的比較多，基礎(chǔ)考察得比較全面。
但是由于考慮到我之前做的項(xiàng)目復(fù)雜性不夠，以及工作年限的問(wèn)題，給到的評(píng)級(jí)不高，導(dǎo)致薪資也不是特別高，但是已經(jīng)是這個(gè)評(píng)級(jí)的頂峰了，要是沒(méi)有更好的 offer 酷家樂(lè)還是非常值得去的，特別是工具組。
拼多多
一面
react 16 生命周期有什么改變
componentWillMount，componentWillReceiveProps，componentWillUpdate準(zhǔn)備廢除，新增了static getDerivedStateFromProps和getSnapshotBeforeUpdate我還詳細(xì)的介紹了為什么要用
getDerivedStateFromProps來(lái)代替即將廢除的三個(gè)生命周期，主要是 16 版本 render 之前的生命周期可能會(huì)被多次執(zhí)行，具體的可看我的這篇文章：Deep In React 之淺談 React Fiber 架構(gòu)(一)詳細(xì)的介紹一下
getDerivedStateFromProps你在項(xiàng)目中如何做性能優(yōu)化的
flex: 0 1 auto;是什么意思？flex 這個(gè)屬性常考題，好好把阮老師的那篇 flex 語(yǔ)法篇[2]看完 flex 的面試題基本沒(méi)問(wèn)題。
less 的 & 代表什么？
算法題：求最大公共前綴，如
['aaafsd', 'aawwewer', 'aaddfff'] => 'aa'不能調(diào)試，全靠編程素養(yǎng)，只能面試官才能運(yùn)行。
interface 和 type 的區(qū)別
又考了，上面有回答
有用狀態(tài)管理嗎？
我常用的是 redux 和 dva，然后再聊了聊區(qū)別已經(jīng) redux 的理念
有用 ssr 嗎？
沒(méi)用過(guò)
node 熟悉嗎？
寫(xiě)得少
二面
class 組件與函數(shù)式組件的區(qū)別
生命周期、設(shè)計(jì)理念，感覺(jué)這道題比較開(kāi)發(fā)，可以看看 dan 的這篇：函數(shù)式組件與類(lèi)組件有何不同？[3]
css 優(yōu)先級(jí)
important > 內(nèi)聯(lián) > ID 選擇器 > 類(lèi)選擇器 > 標(biāo)簽選擇器
避免 css 全局污染。
我常用的 css modules
css modules 的原理
生成唯一的類(lèi)名
有一個(gè) a 標(biāo)簽，如何動(dòng)態(tài)的決定他的樣式。
我說(shuō)了先寫(xiě)幾個(gè) css，然后外部傳一個(gè)前綴的方式。面試官問(wèn)了都要這樣嗎？我說(shuō)可以通過(guò) context 的方式，就不需要每個(gè)組件都傳了。
import 和 require 導(dǎo)入的區(qū)別
高頻題，考察 ES6 模塊和 CommonJS 模塊 的區(qū)別。關(guān)鍵點(diǎn)：1. 前者是值的引用，后者是值的拷貝。2.前者編譯時(shí)輸出接口，后者運(yùn)行時(shí)加載。
推薦文章：前端模塊化：CommonJS,AMD,CMD,ES6[4]
require 有什么性能問(wèn)題
好好想想上一個(gè)題的區(qū)別就能想到了
組件庫(kù)如何做按需加載
我常用的是
babel-plugin-importwebpack 如何實(shí)現(xiàn)動(dòng)態(tài)加載
講道理 webpack 動(dòng)態(tài)加載就兩種方式：
import()和require.ensure，不過(guò)他們實(shí)現(xiàn)原理是相同的。我覺(jué)得這道題的重點(diǎn)在于動(dòng)態(tài)的創(chuàng)建 script 標(biāo)簽，以及通過(guò)
jsonp去請(qǐng)求 chunk，推薦的文章是：webpack 是如何實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的[5]react 里有動(dòng)態(tài)加載的 api 嗎？
React.lazy
React.lazy 的原理是啥？
webpack 能動(dòng)態(tài)加載 require 引入的模塊嗎？
應(yīng)該是不能的，前面說(shuō)了，webpack 支持動(dòng)態(tài)導(dǎo)入基本上只能用
import()和require.ensure。require 引入的模塊 webpack 能做 Tree Shaking 嗎？
不能，Tree Shaking 需要靜態(tài)分析，只有 ES6 的模塊才支持。
設(shè)計(jì)一個(gè) input 組件需要哪些屬性。我說(shuō)了 value 、defaultValue、onChange
value 的類(lèi)型是什么？
onChange 怎么規(guī)定 value 的類(lèi)型
interface 和 type 的區(qū)別
寫(xiě)一個(gè) promise 重試函數(shù)，可以設(shè)置時(shí)間間隔和次數(shù)。
function foo(fn, interval, times) {}常規(guī)題，網(wǎng)上有參考答案的。
三面
組件平臺(tái)有哪些功能？
詳細(xì)的跟我討論組件平臺(tái)的設(shè)計(jì)，因?yàn)樗麄円蚕胱鲆粋€(gè)組件平臺(tái)。
實(shí)現(xiàn)一個(gè) redux
實(shí)現(xiàn)
createStore的功能，關(guān)鍵點(diǎn)發(fā)布訂閱的功能，以及取消訂閱的功能。用 ts 實(shí)現(xiàn)一個(gè) redux
簡(jiǎn)單的加上類(lèi)型，我寫(xiě)的類(lèi)型沒(méi)有 redux 源碼那么復(fù)雜，當(dāng)時(shí)寫(xiě)得比較簡(jiǎn)單。
小節(jié)
一面的時(shí)候其實(shí)我自己感覺(jué)答得不是特別好，連 less 的語(yǔ)法都忘記了，當(dāng)時(shí)面下來(lái)感覺(jué)要涼了，平時(shí)寫(xiě) 樣式的時(shí)間確實(shí)太少了。
很幸運(yùn)的時(shí)候還是給我過(guò)了，二面面試官我覺(jué)得面得很專(zhuān)業(yè)，基本都是從淺入深的考察知識(shí)的深度，我感覺(jué)答得還可以，因?yàn)槲沂菍儆谀欠N會(huì)的就盡量深一點(diǎn)，暫時(shí)不用的就很少花時(shí)間，所以我目前知識(shí)的廣度很有欠缺，對(duì)于 node、ssr、移動(dòng)端、小程序這些方面我的能力都很薄弱，但是面試的時(shí)候如果你不熟悉，直接說(shuō)不熟悉就行，他就不會(huì)面了。
我準(zhǔn)備面試之前對(duì)我自己的要求就是，我會(huì)的盡量不會(huì)很快就被問(wèn)倒，所以我重點(diǎn)復(fù)習(xí)了我擅長(zhǎng)的知識(shí)。
面下來(lái)感覺(jué)拼多多也沒(méi)有想象中那么難，雖然拼多多薪資算行業(yè)內(nèi)高的，不過(guò)拼多多在上海，我在杭州，另外就是強(qiáng)制上 6 天班，我比較忌憚這點(diǎn)。考慮到我和女朋友本來(lái)就是異地，要是單休，而且節(jié)假日也會(huì)比正常的少，見(jiàn)面的機(jī)會(huì)就更少了。
反正選 offer 這種事還是盡量綜合考慮吧，團(tuán)隊(duì)、薪資、個(gè)人生活都應(yīng)該考慮進(jìn)去。
最后
我是桃翁，一個(gè)愛(ài)思考的前端 er，期待你的關(guān)注。
參考資料
[1]一文吃透 React 事件機(jī)制原理: https://toutiao.io/posts/28of14w/preview
[2]flex 語(yǔ)法篇: https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[3]函數(shù)式組件與類(lèi)組件有何不同？: https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/
[4]前端模塊化：CommonJS,AMD,CMD,ES6: https://juejin.im/post/5aaa37c8f265da23945f365c
[5]webpack 是如何實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的: https://juejin.im/post/5d26e7d1518825290726f67a
推薦閱讀
我的公眾號(hào)能帶來(lái)什么價(jià)值？(文末有送書(shū)規(guī)則，一定要看)
每個(gè)前端工程師都應(yīng)該了解的圖片知識(shí)(長(zhǎng)文建議收藏)
為什么現(xiàn)在面試總是面試造火箭？