兩年前端 9 ~ 10月面經(jīng)（已拿阿里，頭條，pdd，快手 offer）

剛簽掉阿里天貓，閑來(lái)無(wú)事寫點(diǎn)面經(jīng)，回饋一下掘金

自身情況：雙非二本，科班出身，中廠兩年，小廠兩個(gè)月，技術(shù)棧：包括但不限于 vue，php，jq，node，平時(shí)偷摸看文章，刷算法題 ：)

這兩個(gè)月面試的大廠羅列一下吧（時(shí)間順序）：

• 阿里 A 部門 二面掛
• 字節(jié) A 部門 二面掛
• 滴滴 一面掛
• 抖音 二面掛
• 字節(jié) B 部門 offer 階段
• 快手 offer 階段
• 陌陌 offer 階段
• 螞蟻 一面掛
• 阿里 b 部門 offer 階段
• pdd offer 階段
• 電信 offer 階段

其他一些小廠不羅列了，可以看到，上來(lái)面試的幾家大廠幾乎覆滅，其實(shí)是自身缺乏大廠面試經(jīng)驗(yàn)導(dǎo)致，說(shuō)說(shuō)你需要準(zhǔn)備的東西，我這里不會(huì)給具體問(wèn)題的答案，很多答案是要自己去思考和總結(jié)

基礎(chǔ)

前端八股文是必看的

• 原型鏈
• 繼承的實(shí)現(xiàn)
• 數(shù)據(jù)類型
• var、const、let 對(duì)比
• new 的過(guò)程
• this 指向問(wèn)題
• bind 實(shí)現(xiàn)方式
• 閉包
• 事件循環(huán)
• 類型判斷
• 手寫 Promise

翻來(lái)覆去的題也就這些，有一些問(wèn)題是可以和其他人拉開差距的，然后你需要有自己的一套理解。

例如我理解js的原型鏈?zhǔn)沁@樣的：原型鏈就是鏈表，this 其實(shí)就是鏈表當(dāng)前指向的那個(gè)原型，bind call apply就是改變鏈表 next 指向。

例如垃圾回收機(jī)制有新生代和老生代，可以談?wù)?code style="overflow-wrap: break-word;padding-top: 2px;padding-bottom: 2px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;border-radius: 0px;color: rgb(235, 97, 97);border-bottom: 1px solid rgb(235, 97, 97);">Scavenge GC 算法

例如問(wèn)渲染頁(yè)面的過(guò)程，除了 tcp 網(wǎng)絡(luò)層的基礎(chǔ)，我會(huì)答一些解析算法，容錯(cuò)機(jī)制，如何建立圖層樹

eventloop答出新版的 chrome 優(yōu)化了await 的執(zhí)行速度，await 變得更早執(zhí)行了,node和瀏覽器的區(qū)別，新老node版本執(zhí)行順序的不一致

這里我只是舉個(gè)例子，需要你自己深入挖掘或者看一些文章自己積累

小廠

小廠宗旨就是你能來(lái)干活就行了，所以會(huì)問(wèn)很多 api 的使用，假如你是 vue 技術(shù)棧的，建議把 vue，vuex，vue-router 文檔過(guò)一遍，結(jié)合平時(shí)做的項(xiàng)目還有遇到的坑，基本就可以了。

這里羅列幾個(gè) vue 問(wèn)題：

• vue 生命周期，每個(gè)生命周期項(xiàng)目中什么時(shí)候會(huì)用
• vue keep-alive 常用屬性
• 組件通信方式
• hash 和 history 區(qū)別
• v-for 唯一 key
• vue 運(yùn)行機(jī)制，依賴收集
• v-show 和 v-if
• watch 和 computed
• vuex 中模塊拆怎么做的

涉及到的編碼題：

• 數(shù)組去重
• css 水平垂直居中

中廠

中廠會(huì)對(duì)于你的深度會(huì)有一定的挖掘，不單單是會(huì)使用一些 api，還有獨(dú)立思考問(wèn)題，涉及到一些工程化的題，對(duì)于廣度也有要求

羅列幾個(gè) vue 問(wèn)題：

• 一個(gè)頁(yè)面有父子組件，進(jìn)入之后的渲染順序觸發(fā)的生命周期是什么樣的
• keep-alive，如果只想要router-view里面的某個(gè)組件被緩存，怎么做
• 組件通信中的eventbus原理是什么
• vue diff簡(jiǎn)單講講
• 3.0proxy 講講，和 2.0 區(qū)別（廣度）
• data為什么是函數(shù)
• 常用vue api原理(包括不限于nextTick,watch，computed)

涉及到的編碼題：

• call，apply，bind
• 節(jié)流，防抖
• class實(shí)現(xiàn)

大廠

大廠風(fēng)格不一，這里分開舉例

頭條，pdd，快手

把這三家放在一起是因?yàn)檫@三家都會(huì)問(wèn)一點(diǎn)算法

頭條面試一般 3 輪，一面基礎(chǔ)，二面工程化和項(xiàng)目，三面廣度，一二面基本就是從頭條題庫(kù)里面抽的，你挨個(gè)答就行，會(huì)有一道看代碼說(shuō)輸出的題，一般是考this或者是eventloop，有時(shí)候還會(huì)有考promise，前面答的都不錯(cuò)最后會(huì)給一個(gè)算法題，也可能是實(shí)現(xiàn)一個(gè) xxx 函數(shù)，算法題也比較簡(jiǎn)單，也就是leetcode的easy難度，最多不會(huì)超過(guò)middle，特別喜歡問(wèn)二叉樹，算法題 ok 了面試就過(guò)了

比較看運(yùn)氣，答不出的多了就給你掛了，如果你基礎(chǔ)足夠好覆蓋方方面面那肯定能過(guò)，算法題我都是直接寫出來(lái)的，本人算法比較強(qiáng)，算法不強(qiáng)的同學(xué)建議先刷劍指 offer，然后在搞個(gè) 200 道 easy+50 道 middle，反復(fù)咀嚼就夠用

這里給點(diǎn)例子：

• promise.all 異常處理
• 版本號(hào)比較排序
• 數(shù)組中第 k 個(gè)最大元素
• 二叉樹中的所有路徑
• 二叉樹中和為某一值的路徑
• node 中 promisify 實(shí)現(xiàn)
• fetch 兼容超時(shí)重傳
• 觀察者模式（高頻）
• String indexOf 實(shí)現(xiàn)
• 扁平化
• 科里化

其余對(duì)于工程上面的考量，因?yàn)槲沂怯?code style="overflow-wrap: break-word;padding-top: 2px;padding-bottom: 2px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;border-radius: 0px;color: rgb(235, 97, 97);border-bottom: 1px solid rgb(235, 97, 97);">webpack打包的，所以會(huì)問(wèn)一下loader，plugin的區(qū)別，怎么實(shí)現(xiàn)loader，plugin，自己有沒(méi)有寫過(guò)，webpack整個(gè)流程是什么樣的，這邊建議自己去手寫個(gè)簡(jiǎn)單的webpack玩玩，就全知道了，本質(zhì)上就是廣度遞歸而已

快手一共兩輪面試，第一輪基礎(chǔ)+場(chǎng)景題+工程+編碼，很全，第二輪技術(shù)深度+場(chǎng)景題，問(wèn)的問(wèn)題都挺好，很多沒(méi)有涉及到的方面都是努力思考，面試官也很nice，唯一一家看了我github的公司，聊得很投機(jī)，給快手點(diǎn)贊，因?yàn)榭焓志兔媪艘淮尉椭苯訉戭}了

例子：

• vue如何實(shí)現(xiàn)組件封裝
• 一個(gè)動(dòng)態(tài)拖拽的場(chǎng)景，抓取一個(gè)div之后如何顯示最靠近的div的基線，就是一條虛線，我這里用隊(duì)列的方式解決
• 圖片，視頻斷點(diǎn)續(xù)傳的一些問(wèn)題
• 因?yàn)槲?code style="overflow-wrap: break-word;padding-top: 2px;padding-bottom: 2px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;border-radius: 0px;color: rgb(235, 97, 97);border-bottom: 1px solid rgb(235, 97, 97);">github有手寫webpack，針對(duì)我寫的webpack問(wèn)了幾個(gè)問(wèn)題，關(guān)于hook和生命周期的

pdd 一共兩輪面試，跟上面的問(wèn)的大同小異，讓我驚訝的是二面直接出了道比較棘手的算法題，不過(guò)問(wèn)題不大擼了出來(lái)，我 10 分鐘左右擼了出來(lái)，感興趣的小伙伴可以試試

例子：

• 給定一個(gè)二叉樹, 找到該樹中兩個(gè)指定節(jié)點(diǎn)間的最短距離

阿里

阿里是我感覺面試難度 max 的公司，社招 P6 起，基本都是電話面，總流程 3~4 輪，我比較強(qiáng)項(xiàng)的算法和基礎(chǔ)得不到體現(xiàn)，基本都是深入業(yè)務(wù)挖掘的問(wèn)題

一面：做的業(yè)務(wù)，用到了什么技術(shù)，有什么比較困難的，哪些事情是讓技術(shù)推進(jìn)業(yè)務(wù)的，最后會(huì)補(bǔ) 1~2 個(gè)基礎(chǔ)問(wèn)題，有的面試官還會(huì)問(wèn)問(wèn) http 協(xié)議這塊。頭兩次面試阿里沒(méi)有經(jīng)驗(yàn)，妥妥的掛了，也是告誡后面的同學(xué)不要像我這樣，想清楚自己為什么要這么做，自己做的東西服務(wù)于誰(shuí)，整個(gè)業(yè)務(wù)流是什么樣的，再去面試阿里

二面：由于我項(xiàng)目中用到了ssr，面試官?gòu)墓こ袒腥耄?xì)致入微的問(wèn)了一下webpack原理（工程化）

三面：基本就是說(shuō)說(shuō)對(duì)于行業(yè)的理解

典型題

node

如果簡(jiǎn)歷上寫了koa，express，為什么要使用koa(express)，直接用node不能寫嗎？中間件本質(zhì)是什么？類似一些進(jìn)程相關(guān)：孤兒進(jìn)程和僵尸進(jìn)程，多線程。因?yàn)槲矣玫?code style="overflow-wrap: break-word;padding-top: 2px;padding-bottom: 2px;margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;border-radius: 0px;color: rgb(235, 97, 97);border-bottom: 1px solid rgb(235, 97, 97);">php，所以node問(wèn)題問(wèn)的比較少，基本面試兩個(gè)月過(guò)來(lái)前端面試官都沒(méi)用過(guò)php :(

項(xiàng)目

項(xiàng)目中遇到最困難的事是什么（必問(wèn)），這道題自己提前組織好語(yǔ)言，找一個(gè)例子，困難點(diǎn)，最后用的什么方案解決。臨時(shí)增加需求怎么處理？產(chǎn)品方案明顯錯(cuò)誤，技術(shù)怎么推進(jìn)？類似這些

hr

這輪基本上保持對(duì)這個(gè)職位強(qiáng)烈需求就可以了，諸如工作氛圍，技術(shù)，公司方面都舉出很多優(yōu)點(diǎn)就行。如果你覺得聊下來(lái)不行也明確表述你的顧慮，不要浪費(fèi)互相時(shí)間

一些面試經(jīng)驗(yàn)

和許多面試官交流下來(lái)，假如你基礎(chǔ)特別好，最多也是一塊挑一個(gè)問(wèn)題問(wèn)，20 分鐘就結(jié)束了，很少遇到問(wèn)的十分細(xì)，基本按照題庫(kù)來(lái)問(wèn)打分的，像米哈游，頭條，ucloud就是這樣從題庫(kù)出題，面試時(shí)間控制 30~45 分鐘，問(wèn)的長(zhǎng)說(shuō)明面試官對(duì)于你某些方面會(huì)有疑問(wèn)和搖擺，問(wèn)的短就是掛了。

我也嘗試過(guò)跟一些候選人交流，發(fā)現(xiàn)普遍的一個(gè)問(wèn)題就是好多東西明明知道，卻表述不清楚，例如webpack整個(gè)打包流程是怎么樣的，聊聊閉包，箭頭函數(shù)，es6這些基礎(chǔ)題，其實(shí)這些必問(wèn)的問(wèn)題必須提前準(zhǔn)備，你需要在面試前提前把語(yǔ)言組織好，而不是問(wèn)到再去想

面試過(guò)程注意點(diǎn)：基礎(chǔ)題必須答好，有自己的理解，最好答出亮點(diǎn)和項(xiàng)目中實(shí)際使用的地方。項(xiàng)目題場(chǎng)景題和面試官求同存異，不一樣的地方也不要過(guò)分糾結(jié)，不同廠有不同的解決方案。編碼題最好說(shuō)出自己的思路，編碼這塊我做的比較差，要么就是一次寫出來(lái)，要么直接說(shuō)不會(huì)。最后面試過(guò)程中答題一定要自信，我們寫代碼的肯定是膽大心細(xì)，而不是畏手畏腳。

其他

如果你對(duì)后面的工作技術(shù)追求較高，在一些問(wèn)題后面可以反問(wèn)面試官你們公司針對(duì)這個(gè)問(wèn)題是怎么做的。如果你更在意氛圍方面，可以問(wèn)問(wèn)多久搞一次技術(shù)分享。也是旁敲側(cè)擊的一種方式。如果你想了解未來(lái)同事水平如何，不妨最后問(wèn)問(wèn)公司項(xiàng)目如何區(qū)分是用vue還是用react。如果你更關(guān)注要去做什么，建議詳細(xì)問(wèn)問(wèn)公司的業(yè)務(wù)和經(jīng)濟(jì)鏈路，盈利模式，看看是否有前景。求職也是一個(gè)雙向選擇。

對(duì)于我個(gè)人來(lái)說(shuō)，雖然快手，頭條，pdd的薪資給的很多，基本就是double的狀態(tài)，但是我更看重公司未來(lái)的發(fā)展方向，最后還是選擇了阿里，廣大開發(fā)也要想清楚未來(lái) 3~5 年要做什么，個(gè)人是陪伴著業(yè)務(wù)成長(zhǎng)的（是不是有阿里味了）

一些資料：

https://github.com/abc-club/js-paradise/blob/master/INTERVIEW.md

https://github.com/mqyqingfeng/Blog

https://webpack.wuhaolin.cn/ （比我翻文檔快多了）

總結(jié)

對(duì)于我來(lái)說(shuō)

難度上：阿里>快手>pdd>頭條

體驗(yàn)上：阿里>快手>pdd=頭條

阿里的 hrg 并沒(méi)有傳聞中說(shuō)的那么可怕，還是非常 nice 的，面試流程一周內(nèi)也搞完了。

最后祝愿迷茫的前端開發(fā)者一路順風(fēng)