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

剛簽掉阿里天貓，閑來無事寫點面經(jīng)，回饋一下掘金

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

這兩個月面試的大廠羅列一下吧（時間順序）：

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

其他一些小廠不羅列了，可以看到，上來面試的幾家大廠幾乎覆滅，其實是自身缺乏大廠面試經(jīng)驗導致，說說你需要準備的東西，我這里不會給具體問題的答案，很多答案是要自己去思考和總結(jié)

基礎(chǔ)

前端八股文是必看的

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

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

例如我理解js的原型鏈是這樣的：原型鏈就是鏈表，this 其實就是鏈表當前指向的那個原型，bind call apply就是改變鏈表 next 指向。

例如垃圾回收機制有新生代和老生代，可以談?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 算法

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

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

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

小廠

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

這里羅列幾個 vue 問題：

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

涉及到的編碼題：

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

中廠

中廠會對于你的深度會有一定的挖掘，不單單是會使用一些 api，還有獨立思考問題，涉及到一些工程化的題，對于廣度也有要求

羅列幾個 vue 問題：

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

涉及到的編碼題：

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

大廠

大廠風格不一，這里分開舉例

頭條，pdd，快手

把這三家放在一起是因為這三家都會問一點算法

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

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

這里給點例子：

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

其余對于工程上面的考量，因為我是用webpack打包的，所以會問一下loader，plugin的區(qū)別，怎么實現(xiàn)loader，plugin，自己有沒有寫過，webpack整個流程是什么樣的，這邊建議自己去手寫個簡單的webpack玩玩，就全知道了，本質(zhì)上就是廣度遞歸而已

快手一共兩輪面試，第一輪基礎(chǔ)+場景題+工程+編碼，很全，第二輪技術(shù)深度+場景題，問的問題都挺好，很多沒有涉及到的方面都是努力思考，面試官也很nice，唯一一家看了我github的公司，聊得很投機，給快手點贊，因為快手就面了一次就直接寫題了

例子：

• vue如何實現(xiàn)組件封裝
• 一個動態(tài)拖拽的場景，抓取一個div之后如何顯示最靠近的div的基線，就是一條虛線，我這里用隊列的方式解決
• 圖片，視頻斷點續(xù)傳的一些問題
• 因為我github有手寫webpack，針對我寫的webpack問了幾個問題，關(guān)于hook和生命周期的

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

例子：

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

阿里

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

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

二面：由于我項目中用到了ssr，面試官從工程化切入，細致入微的問了一下webpack原理（工程化）

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

典型題

node

如果簡歷上寫了koa，express，為什么要使用koa(express)，直接用node不能寫嗎？中間件本質(zhì)是什么？類似一些進程相關(guān)：孤兒進程和僵尸進程，多線程。因為我用的php，所以node問題問的比較少，基本面試兩個月過來前端面試官都沒用過php :(

項目

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

hr

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

一些面試經(jīng)驗

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

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

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

其他

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

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

一些資料：

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

https://github.com/mqyqingfeng/Blog

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

總結(jié)

對于我來說

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

體驗上：阿里>快手>pdd=頭條

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

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