拼多多、酷家樂面試總結

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.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 釋出！

相關文章