前言
離職原因看我這篇文章吧：離開(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ù)。
一面(電話面)
-
你在項(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ī)制：注冊(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í)話，我覺(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 = 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屬性，判斷元素的尺寸和顏色。-
實(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.useMemo -
class 組件里面如何做性能優(yōu)化(因?yàn)榍懊嫖艺f(shuō)了用 React.memo 做了性能優(yōu)化)
shouldComponentUpdate(簡(jiǎn)稱 SCU)。SCU 跟 immutable 強(qiáng)相關(guān)，一定要好好理解 react 的 immutable，否則很可能理解不了為什么不能直接去修改 state，然后再去 setState，以及 redux 的 reducer 要返回一個(gè)新的對(duì)象。
-
實(shí)現(xiàn)一個(gè) Typescript 里的 Pick
type Pick<T, K extends keyof T> = { [P in K]: T[P] } 手寫(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ò)的，我是一面電話面，面完覺(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ǔ)法篇看完 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)組件有何不同？
-
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í)加載。
-
require 有什么性能問(wèn)題
好好想想上一個(gè)題的區(qū)別就能想到了
-
組件庫(kù)如何做按需加載
我常用的是
babel-plugin-import -
webpack 如何實(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)入的 -
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)注。
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！
