前言
離職原因看我這篇文章吧:離開蘑菇街後,我最近的一些想法,然後不得不去找工作恰飯呀。
我目前面了五家公司:滴滴、螞蟻、拼多多、酷家樂、位元組跳動,拼多多和酷家樂基本已拿到 offer,螞蟻二面完了,滴滴和位元組即將三面,我先把我已經面過的面經先總結出來,其他的不管過沒過,這周內我都會總結出來,希望能給到正在找工作同學的幫助。
在文章裡我不僅會列出面試題,還會給到一些答題建議,個人能力有限,也不能保證我回答都正確,如果有錯誤,希望能糾正我。
酷家樂
酷家樂是我最早面的一家公司,還沒被裁的那週二剛好面完,結果週五就被裁了,可能這就是冥冥之中吧。
面試的部門是工具組,是酷家樂最核心的部門,四面面試官跟我說我面的組是工具團隊中的最核心組,會涉及到一些影像相關的技術,比如 Tree.js、WebGL等,所以這個組其實也挺好的,感覺能學到不少技術。
一面(電話面)
-
你在專案如何優化的
我在簡歷裡面寫到了效能優化相關的,所以這個問題。
-
你做的專案有什麼值得說的
基本上就是考察專案的亮點,可以說一些專案難點是如何解決的,或者介紹一些專案中用到的牛逼的技術。
-
Ts 有什麼優勢
講道理所有現在在網上能查到的優勢都是得益於靜態語言的優勢。
-
type 和 interface 的區別
這是一個高頻題,如果考察 TS,這應該是最容易考察的,網上也都能查到相關的資料,但是很可能忽略一個點:type 只是一個型別別名,並不會產生型別。所以其實 type 和 interface 其實不是同一個概念,其實他們倆不應該用來比較的,只是有時候用起來看著類似。
-
React 事件機制
我覺得需要答的點:
- React 為什麼要用合成事件
- 事件機制:註冊和分發的過程。這裡面至少要說出事件註冊都是在元素的最頂層
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.前者編譯時輸出介面,後者執行時載入。
-
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,期待你的關注。如果你最近也在找工作,歡迎找我交流,下面是我公眾號。