拼多多、酷家樂面試總結

leexiaoran發表於2020-05-13

前言

離職原因看我這篇文章吧:離開蘑菇街後,我最近的一些想法,然後不得不去找工作恰飯呀。

我目前面了五家公司:滴滴、螞蟻、拼多多、酷家樂、位元組跳動,拼多多和酷家樂基本已拿到 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 為什麼要準備廢除那幾個生命週期,以及新增的生命週期可以進行替代。

    這個圖好好的理解一下

    react 生命週期

  • 聊一聊 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.memoReact.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 生命週期有什麼改變

    componentWillMountcomponentWillReceivePropscomponentWillUpdate 準備廢除,新增了 static getDerivedStateFromPropsgetSnapshotBeforeUpdate

    我還詳細的介紹了為什麼要用 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,期待你的關注。

如果你最近也在找工作,歡迎找我交流,下面是我公眾號。

相關文章