9月，水了幾個大中廠前端面試的一些總結分享 | 掘金技術徵文

codercao發表於2018-09-08

寫在前面

工作吧，我覺得就像談戀愛，不一定是找高富帥或者白富美，互相確認過眼神是對的人就可以~而面試的自信和對工資的要求，源於你過硬的基礎和平時的思考、積累以及總結~

8月底離職，其實是裸辭，當然大概是在原東家我所在的產品專案組的人集體跑路了，所以我也離開了自己所在一年半的東家，畢竟留下來的都是要填大坑的。於是大概花了兩天的時間簡單梳理了一下前端知識和回顧了一下，自己做的產品和遇到的一些問題。然後一個星期面試了大概10家企業的樣子，每天上午一場下午一場，包含餓了麼、小米、大搜車、喜馬拉雅、愛回收等這些大中廠的前端面試（都是上海地區的），後來獵頭有推薦一些外企ebay和其他一些企業，主要是個人覺得面試了一週累了，所以後來拿到了4家公司電話告知面試通過的訊息，然後選了一家自己比較喜歡的公司，就停止面試了，當然面試有被虐的體無完膚，也有比較順利的，故給大家做個小總結分享，希望對大家有所助力面試和對前端的摸索。

說說我自己吧

這裡其實是這也是面試通常套路，面試官一來90%先來個自我介紹吧，只有10%的面試官一來，直接說談談你的專案吧，通常我會這樣自我介紹

xx理工大學軟體工程畢業，上一家公司主要是做xxx的，我在xxx產品專案組裡負責xxx，xxx等前端開發，
主要的技術棧是xxx/xxx,然後自己平時比較喜歡玩前端，會把自己的小想法實現寫寫小DEMO開源在gitHub裡，
也會定時做做總結在自己的部落格網站和技術社群裡寫寫技術文章做分享複製程式碼

其實這裡也沒什麼，我大概就表達幾點：計算機科班出身、自己熟悉的業務情況，技術棧和會去研究技術、做分享。當然這裡有很多面試技巧可以用，我這邊的話，按照自己的實際情況描述~

關於簡歷

到這裡其實面試官基本上不會抓到很多你自我介紹的面試的點，因為他的眼睛往往盯著你的簡歷，掃描你的簡歷描述，所以我比較推薦簡歷上把你的專業技能寫一下、工作經歷、專案經歷、個人專案、其他能寫都寫上去，建議儘量把事情說清楚，多用資料表達，結果導向（當然這塊沒有很好的標準，只是個人的觀點）。如果有不錯的開源專案也寫上在簡歷上去，這邊我就貼上我自己的一些描述吧（如果有需要看我這個簡歷全部，可以移步我github）

專業技能這塊，一定不要給自己挖坑，不太清楚的或者忘得差不多東西就不要寫了（我是有給自己挖坑過，寫了些自己拿到的證書，比如中級軟體工程師，Linux網路管理員認證，然後有一家面試官使勁問我Linux操作，最後一句我告辭，結束尷尬的氣氛）。個人建議沒有十足的對一個技術知識點把握，千萬不要寫精通，面試官看到這個詞語，往往會考考你到底是不是精通，還是在吹牛逼。所以寫寫熟練、熟悉、理解、瞭解....等比較謙虛而又不失大氣的詞語來描繪你的技術棧。

接下來個人專案可以寫一下，如果自己所在的公司不是很知名，和在公司做的專案不是很亮的話，只能靠自己的開源來拯救自己了（ps:其實我的所謂gitHub裡的東西也沒什麼，都是很簡單的小demo，但是掘金友的老鐵們給了很大的支援，目前star累計有300+，可以直接訪問我的github看看）

簡歷投遞

對於工作機會，主要是一個是技術社群、一個是求職平臺，朋友內推也可以

對於這塊，筆者是沒在很多線上求職平臺，放自己的簡歷，主要是裸辭，所以簡歷還是要掛一下求職平臺的，主要是掛了boss直聘、獵聘這兩個平臺，其他就拉鉤....其實都可以。說實話，boss直聘、獵聘這兩個平臺效率很高，你一掛上去基本上每天可以收到20-30個訊息，獵聘上很多獵頭服務也是不錯的，筆者全程沒自己投簡歷，基本上都是獵頭推薦的崗位，安排好的面試時間，boss直聘裡基本上看到大中廠的HR或者前端人員發了資訊給我，我才回資訊，聊的不錯給他們簡歷，大概是這樣樣子。如果看到自己喜歡的公司，你可以自己主動去聯絡這些公司的HR,聊聊~

面試

對於面試，分要筆試和不需要筆試的，分重基礎的和重業務的考察。普遍的來講，大廠看重基礎扎不紮實，小廠相對考察對技能的熟練程度多一點。梳理的話，掘金小冊有一個《Web 前端面試指南與高頻考題解析》推薦一看，當然我也買過了，內容還不錯，慕課網也有幾個視訊可以，但是對每個基礎知識點要加一些自己想法和思考會更好

筆試的話，基本上考的都是css的一些運用，js的一些基礎，一些簡單的演算法題，當然也有計算機基礎的，後端基礎，和瀏覽器相關的都有。對於專案，他們會拿你的具體做的專案，由淺入深，剖析你對技術和業務的理解。下面這邊是我總結的我遇到一些筆試和問到的一些問題：

CSS

1、CSS選擇權重(你按照正常描述可以，建議加一些在框架上的比如vue裡的樣式相關的知識點，比如Vue中的scoped原理及穿透方法是否知道？接下來肯定就是PostCSS轉譯實現瞭解多少咯)

2、手寫一些半圓，園、三角形、梯形...（注意是手寫出來類似這種，三角形原理[偽類也可以實現三角形]必懂）

3、sass、less用了那些特性，這兩個有什麼區別，怎麼自己封裝樣式庫（可以參考element/bootstrap，當然也要知道，webpack打包樣式這塊的知識點咯，比如css-loader style-loader的內容和區別）

4、css3有什麼特性（雖然我面試的時候直接懟面試官了，直接說我接觸前端來就是css3，其實就是那些動畫、透明度，漸變等這些了）

5、盒模型(除了原理和對比，這裡你可以把Bootstrap攤開了一說就是全域性重置樣式裡有box-sizing: border-box;）、清除浮動（幾種清除浮動的方式，大廠的網站是這麼做的攤開來一說，基本上通過偽類）、BFC（原理和建立），z-index層(比如知不知道層優化可以提升渲染效能，提示：比如GPU加速)

6、佈局：三欄、兩欄，九宮格，垂直居中，水平居中、自適應響應式（解決方案）。那些浮動、絕對定位、flex、表格佈局、網格佈局這些應該都熟練於心，各自的優缺點，當然你也要了解一下雙飛燕、聖盃佈局原理和實現

7、移動端畫素知識與Viewport知識，比如怎麼在h5網頁怎麼顯示真實的1px邊框和12px字型大小

....這裡列的只是我遇見的面試和筆試題，其他還有很多考點...

JS(es5/es6/es7/es8)

1、基礎JS-Api，判斷是不是整數，對陣列的操作：增刪改查（查重），重組，排序，陣列打亂、這些都要求能手寫程式碼,當然這些都有好幾種方式實現

2、建立物件、New運算子、事件流（冒泡和捕獲）、原生事件繫結、BOM操作（比如對Ie9一下瀏覽器的判斷和一些操作）

3、原型原型鏈、閉包、類與繼承（在class之前的實現繼承，建構函式繼承、原型鏈繼承、組合方式繼承，各自優缺點）、同步非同步

6、es6/7/8的新特性，基礎指令、箭頭函式、字串模板、promise(原理，運用的場景)、物件導向、資料格式（set/map）,async/await(原理，有個cto問我這個函式用babel打包後長什麼樣子)....

7、模組化、函數語言程式設計，高階函式的使用，柯里化函式，遞迴...

瀏覽器網路相關

1、載入過程、渲染過程（最好也配合著框架聊）

2、效能優化（載入、渲染），可以配合框架聊,比如說vue，非同步元件路由的懶載入實現原理，GPU加速這塊要了解

3、HTTP（各種狀態碼、什麼無狀態連線、管線化、強快取，問的深的話會問Nginx代理以及面向未來的HTTP的思考等）、儲存cookie、localstorge、sessionstorge，各自的區別，當然對這塊你要深入一點，比如cookie的工作流程，裡面的引數，為什麼呢說不安全，愛回收面試官問我的時候，當時有尷尬的場面

4、跨域：jsonp原理，cors、iframe，postMessage....，當然也要知道前端框架下的跨域，比如vue\node下的跨域怎麼實現和處理

5、前端渲染和服務端渲染（單頁應用SEO, 比如vue2.3 釋出後提出了服務端渲染，Nuxt.js

是否瞭解）

6、前端監控（資料、效能、異常監控，埋點和上報）、請求相關的(比如怎麼在vue下二次封裝axios請求，你會有什麼思考)

vue

1、基本的指令、v-model原理（手寫一個雙向繫結）watch和computed的區別和運用的場景、事件處理/事件修飾符...

2、響應式原理、生命週期，渲染優先順序

3、元件，非同步元件、父子元件通訊，兄弟元件通訊，父元件呼叫子元件的方法，父元件給子元件新增方法，父元件改子元件的樣式，父元件怎麼給子元件傳一個帶$的引數，子元件向父元件宣告自己存在....可以看看element原始碼，裡面很多值得學習地方

3、vue-router，hash和history實現原理，路由懶載入原理，讓你實現一個路由你會有哪些思考

4、vuex，各個api，運用場景，讓你實現一個狀態管理你會有哪些思考

5、設計一個可以無限巢狀的樹元件，並提供使用文件

6、開發中有遇到什麼問題，怎麼解決的

...

vue 的話主要考原理比較多，要求看原始碼，當然網上有很多總結的很好的資源，正如尤大大推薦一樣

推薦《Vue技術內幕》、《Vue.js 技術揭祕》，當然掘金小冊《剖析 Vue.js 內部執行機制》也寫的很好，值得快速瞭解，但最好是自己去看原始碼

node、webpack、react、angular、微信公眾號、小程式

這些其實都有問，因為我簡歷上寫的熟悉vue,所以問的基本上都是vue的問題，其他的都大同小異，比如node兩個比較火的框架（koa/express）,webpack內部和配置前端開發環境，時間關係就不一一列了。

其他

1、如果讓你設計一個前端框架你會有什麼思考（通常是CTO會問這個問題）

2、你有什麼問題要問我的？通常我會說想了解一下這個招聘崗位的專案業務和技術棧情況和團隊情況，我個人在團隊上是一個什麼角色、簡單對我這次面試做個評價和建議

3、你平時工作之外會做什麼？我的回答基本上比較固定，每天堅持跑步半個小時，週末籃球（有面試官說他也喜歡打球），除了這些就是逛技術社群，看看前端的技術，實現自己的小想法，在自己的網站和技術社群寫寫文章分享....

4、為什麼在上一家公司離職？由於上家公司業務調整，所在專案組人員長期閒置做維護工作，沒有做研發工作，個人覺得沒有體現個人價值，所以離職

5、你之前的同事怎麼評價你?...

總結

面試其實印象也有比較深回憶

一、餓了麼面試，過程很不錯，面試官是餓了麼的一個前端主管，之前參加過他的技術分享沙龍會，整個面試過程很輕鬆，最後面，他說來我來測一下你的程式設計能力，一個線上編譯器，沒有程式碼提示的，我是一個程式碼提示依賴的人....結果是是涼涼的，面試完後，他和我聊了許多，我也把來之前準備的測出的餓了麼官網和app前端上的幾個bug和一些優化的地方，以及他們開源的作品進行自己看法和他交流，他有推薦看看《重構》《程式碼整潔之道》《程式碼大全》，有留微信，說可以半年後再過來面試交流，他也會把我提的相關問題和優化和相關讓部門處理~

二、愛回收，這個面試是比較糟糕的，準備不充分，很知識點知道，但是沒有了解很深，兩個面試官輪流面試我，導致一個面試官給我的評價是，知識廣度有，深度沒有。其中另外一個面試官聊到最後，有問我是哪裡人，然後發現是一個老鄉，老鄉對老鄉的情懷，最後他還和我梳理了前端的知識，站在一個比較高的角度和我聊前端，也互留了微信，結果不用說了涼涼~

三、前端知識零零碎碎，其實吧，大多數看看知識點就ok了，但一定是要有自己思考去回答問題，如果只是按照別人總結的可能你消化不了，如果你回答的問題和百度到的一樣的，面試官大多數會覺得不太好，所以還是要自己理解的程度上去回答問題。程式碼相關的一定要是自己手寫，而且儘量不要依賴程式碼提示（餓了麼涼了也是有這一個原因）

四、前端知識、框架都很多，個人覺得其實不需要都熟練，深入理解一兩個技術棧就ok了，前提基礎一定是要紮實的，就像愛回收面試官對我的評價：有知識廣度沒有知識深度，雖然這個評價有點狠，但是確實也鞭笞著我，要回歸基礎，迴歸JS和資料結構,再讀前端框架原始碼，和玩轉node~

五、遇到面試中不清楚或者不知道的知識點，你不要慌，先來一個尷尬而不失禮貌的微笑，然後說在這塊知識其實我很早之前是有看到過的，現在由於面試有點慌，短時間內不能總結一個很好的答案，但我是有思考的~說一些相關的東西，如果實在是不清楚，就說不清楚。每個人都有知識盲點，面試官也不是說要問道你什麼都會，當然如果你整個面試過程，問的問題你都知道，你內心裡覺得都能回答的很好，但我也不建議你全部都回答的很好出來，留一兩題表現的不是那麼完美的回答即可，道理很簡單，一個人永遠不要表現太強勢，這樣可能有些面試官會覺得你有點“狂”，不太好相處~懂我意思吧

六、前端崗位是個敏感的動物，可以平時逛逛大廠的網站和看看他們的產品，把有趣的地方，學習和模仿著寫對應的程式碼，當然技術社群和牛人部落格常看看，瞭解各個常識，比如最近vue/npm/node版本（穩定）更新到多少了，更新了那些東西瞭解一下。面試的自信和對工資的要求，源於你過硬的基礎和平時的思考、積累以及總結~

七、以上面試知識點梳理和答案，js筆試部分我已經整理出一個文件，其他的知識點也有部分整理出來了(但是不一定是正確和最佳答案)，包括我自己的簡歷，如果感興趣的都可以移步在我github倉庫

Front-end-notes 上，也可以 線上文件網頁 當字典檢視，持續更新...