拼多多、酷家樂面試總結

時間 2020-05-13

原文原文鏈接

前言

離職緣由看我這篇文章吧：離開蘑菇街後，我最近的一些想法，而後不得不去找工做恰飯呀。javascript

我目前面了五家公司：滴滴、螞蟻、拼多多、酷家樂、字節跳動，拼多多和酷家樂基本已拿到 offer，螞蟻二面完了，滴滴和字節即將三面，我先把我已經面過的面經先總結出來，其餘的無論過沒過，這周內我都會總結出來，但願能給到正在找工做同窗的幫助。css

在文章裏我不只會列出面試題，還會給到一些答題建議，我的能力有限，也不能保證我回答都正確，若是有錯誤，但願能糾正我。html

酷家樂

酷家樂是我最先面的一家公司，還沒被裁的那週二恰好面完，結果週五就被裁了，可能這就是冥冥之中吧。前端

面試的部門是工具組，是酷家樂最核心的部門，四面面試官跟我說我面的組是工具團隊中的最核心組，會涉及到一些圖像相關的技術，好比 Tree.js、WebGL等，因此這個組其實也挺好的，感受能學到很多技術。java

一面(電話面)

你在項目如何優化的node

我在簡歷裏面寫到了性能優化相關的，因此這個問題。
你作的項目有什麼值得說的react

基本上就是考察項目的亮點，能夠說一些項目難點是如何解決的，或者介紹一些項目中用到的牛逼的技術。
Ts 有什麼優點webpack

講道理全部如今在網上能查到的優點都是得益於 靜態語言的優點。
type 和 interface 的區別web

這是一個高頻題，若是考察 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 這種事仍是儘可能綜合考慮吧，團隊、薪資、我的生活都應該考慮進去。