新手前端的面經(jīng)總結(jié)（已拿網(wǎng)易offer）

• 作者：鳳鳴于岐
• 來源：https://zhuanlan.zhihu.com/p/36466421

4月19日，本人拿到了網(wǎng)易的口頭offer。已經(jīng)決定去網(wǎng)易-杭研院實習。精神緊繃了一個半月，現(xiàn)在可以好好放松了~ 接下來與大家分享一下本人找實習的經(jīng)驗。雖說是找實習，相關(guān)經(jīng)驗在秋招時也應(yīng)該是適用的。

以下經(jīng)驗主要偏向技術(shù)崗，且更多地側(cè)重于前端。

簡歷

分享兩個簡歷模板：

• 超級簡歷^[1]
• 程序猿簡歷通用模板（請自學Markdown語法）^[2]

關(guān)于怎么寫簡歷，知乎上有許多寶貴經(jīng)驗，我就強調(diào)以下幾點：

• 實事求是，不怎么了解的東西別往簡歷上寫。
• 項目經(jīng)歷、學生工作、興趣愛好等最好有詳實的數(shù)據(jù)和論據(jù)支撐，如“該項目后期經(jīng)過XX方面的性能優(yōu)化，效率提升22.7%”、“舉辦XX活動，參加人數(shù)XX人，持續(xù)XX天”、“愛好唱歌，校園十佳歌手三等獎”。

而且一定要體現(xiàn)你起了哪些作用。

網(wǎng)申和內(nèi)推

簡歷寫好后就進入這個階段啦。建議大家關(guān)注以下幾個微信公眾號：

• 校招導(dǎo)師
• 內(nèi)推軍
• 互聯(lián)伴

和這幾個網(wǎng)站：

• 實習僧^[3]
• 牛客網(wǎng)^[4]
• 軟院官網(wǎng)-招生就業(yè)^[5]

注意，部分公眾號和網(wǎng)站提供收費服務(wù)，我覺得毫無必要。不要在這方面浪費錢，網(wǎng)上免費的資源已經(jīng)多到眼花繚亂，像我這樣善良的主動分享經(jīng)驗的網(wǎng)友也挺多。

這個階段我犯了一個大錯誤。內(nèi)推找得太早，導(dǎo)致復(fù)習得還不夠充分就接到了阿里和騰訊的電話，頭幾次電話面試缺乏經(jīng)驗發(fā)揮失常，浪費了這兩家公司的內(nèi)推機會。現(xiàn)在想起來都捶胸頓足……可以考慮在各大公司內(nèi)推/網(wǎng)申截止日期前幾天再投遞。

郵箱最好用163、gmail等郵箱，但京東、美團、騰訊等公司建議使用QQ郵箱。每天都要注意有沒有收到新郵件，注意要翻一翻垃圾郵件，可能被誤識別。

除非有很明確的目標，我建議大多數(shù)同學還是海投。我自己就投了三十多家，叫得上名字的公司幾乎都投了。筆試、面試也是很寶貴的經(jīng)驗，哪怕倒貼錢我也要多嘗試，何況投簡歷、筆試和遠程面試根本就不要錢呢？

筆試

非技術(shù)崗的筆試喜歡考智力題，這點類似公務(wù)員考試。牛客網(wǎng)上可以刷題，或者買公務(wù)員考試的資料也行。至于具體的產(chǎn)品經(jīng)理、策劃等還考些別的什么，我不太了解。

大多數(shù)公司技術(shù)崗筆試的套路差不多，選擇題+編程題，有時候還會有問答題。選擇題的考點，除了根據(jù)你選擇的崗位有所側(cè)重，更多地還是考察基礎(chǔ)知識。C/C++/Java基礎(chǔ)、數(shù)據(jù)結(jié)構(gòu)、操作系統(tǒng)、計算機網(wǎng)絡(luò)一定要重點復(fù)習（用學校的教材即可），如果有多余時間，最好再看看編譯原理。牛客網(wǎng)上也可以做對應(yīng)的專項練習。

至于編程題……這也是我心中的痛啊……羨慕學ACM的同學，在這方面優(yōu)勢就很大了。LeetCode、LintCode都可以刷刷。書籍推薦《劍指offer》，圖書館有舊版的。LintCode的階梯訓(xùn)練-書籍里也有《劍指offer》的全套練習題，九章算法上也可以搜每道題的題解。刷通了《劍指offer》，除去頭條筆試以外的編程題，做出一半還是比較輕松的。大多數(shù)公司的編程題支持多門語言。你可以挑選自己喜歡的語言，熟悉相關(guān)的API，免得到時候要自己實現(xiàn)一些原本就有的函數(shù)。但最好還是練一練C/C++，面試的時候面試官不一定會你掌握的語言，但多少懂點C/C++。

如果是在牛客網(wǎng)筆試，“校招小管家”微信公眾號會在筆試前提醒你。吐槽一下賽碼網(wǎng)，沒有牛客網(wǎng)好用。面試

面試有電話面試、視頻面試、現(xiàn)場面試。電話面試更多地會考察你的知識點、談?wù)勀氵^去做過的項目，很少會問你復(fù)雜的算法題，即使問了也是讓你講講思路。視頻面試和現(xiàn)場面試就會讓你寫比較細致的代碼了，到時候要仔細考慮邊界情況和特別用例。不過我很少見到要求你一定要把代碼跑起來的面試官。

面試會有自我介紹環(huán)節(jié)，稍微準備一下就好。我的自我介紹通常就半分鐘。

面試的時候一定要放松，語速盡可能平緩。遇到不會的知識點請大方地說你不會（或者像我這樣說：“這個知識點我不了解，以下是我的一些猜測……”或者“您能給一些提示嗎？”）。硬著頭皮回答只是在浪費雙方的時間。

面試通常有好幾輪，一般是若干輪技術(shù)面加上最后一輪的HR面。阿里的HR面很玄學，其他公司還好。但我至今也想不通為啥鏈家的HR面把我刷掉了……

去大公司面試就像追女孩子，如果面完試很久都沒回你消息，你也別多問，免得兩邊都不愉快。如果是小公司可以冒險嘗試一下，因為小公司的流程不那么正規(guī)，有周旋的余地。

以下是我有印象的各大公司的前端面試題。括號內(nèi)為答案和吐槽。

阿里

阿里內(nèi)推和網(wǎng)申都開始得比較早，但如前文所說，大家可以不急著投，等準備充分了再去試試運氣。可以在網(wǎng)站的個人中心里查看自己的面試進度。希望大家不會看到“已回絕”三個字。簡歷面，電話（太緊張+沒睡醒的緣故，我在這里掛了） 簡述 Vue 的生存周期（創(chuàng)建，掛載，更新，銷毀）

• 你用過 Bootstrap 寫過庫嗎？

• 讓你用 Bootstrap 設(shè)計一個系統(tǒng)，怎么設(shè)計？

（這問題我現(xiàn)在都不知道怎么答）

• Express 和 Koa 框架的區(qū)別、優(yōu)缺點（參見知乎）

• Node.js 的優(yōu)缺點（擅長I/O密集、不擅長計算密集……）

騰訊

騰訊和阿里都喜歡電話突然襲擊，這一點很不友好…… 騰訊的面試進度可以在微信公眾號里查看。

一面，電話

• ES6 里 let 和 var 的區(qū)別（前者塊作用域，后者函數(shù)作用域；

• let深入理解---let存在變量提升嗎？

• 系統(tǒng)優(yōu)化方案？

• 簡述一下 CDN 加速服務(wù)？

• 簡述事件委托機制（事件捕獲、冒泡，父元素監(jiān)聽）

• HTTP 里的304狀態(tài)碼了解嗎？

（面試-狀態(tài)碼）

• 簡述 ES2017 里的 async 和 await （你不知道的JS）

• 談?wù)勀阌∠笞钌畹囊粋€項目（照實說）

二面，電話（掛了）

• 你覺得要怎樣成為一名優(yōu)秀的前端工程師？

（快速學習、善于溝通）

• HTTP 、 HTTPS 、 HTTP2 的區(qū)別？

（關(guān)于HTTP你該知道的）

• 簡述一下用戶訪問網(wǎng)站的過程（緩存，DNS查詢，建立鏈接，請求，響應(yīng)，收到頁面，解析DOM樹，顯示內(nèi)容，首屏加載完成，可交互）

• 你有什么要問我的嗎？

（見后文小結(jié)里的HR相關(guān)文章）

筆試后北京一面。體驗極差！不能一次面完嘛！復(fù)試還是改電話吧……

• 問項目（照實說）

• 列舉數(shù)組的用法（建議分類列舉，棧、隊列、映射、刪除等）

• 數(shù)組去重（直接倒進集合再倒出來）

• 跨域（圖像ping， JSONP ， CORS ， webSocket 等）

• 本地存儲（ cookie ， localStorage ， sessionStorage 等）

• HTTP ， TCP ， UDP ， IP （參看計算機網(wǎng)絡(luò)教材）

• 進程通信，有名和匿名管道（有名管道和無名管道）

• 你有什么要問我的嗎？

（見后文小結(jié)里的HR相關(guān)文章）

一面過了后公眾號顯示進入復(fù)試狀態(tài)，但二面一直沒消息。成備胎了？

頭條

頭條面試問的算法題比起筆試題簡單多了。面試前會有小姐姐和你約時間。

一般是在牛客網(wǎng)上視頻面試，會讓你在在線編譯器里寫代碼。順利的話一次三面。頭條回絕人倒是干脆，面完試十五分鐘內(nèi)就會給你打電話。像我這樣被掛起來的倒是挺少見……

一面，視頻

• 簡述 CSRF （跨站請求偽造）的攻擊和防御措施（CSDN博客-CSRF）

• 在線寫代碼，給定一個數(shù)組和一個正整數(shù)N，求一個和小于N的最長連續(xù)子數(shù)組（我兩層for循環(huán)暴力解了，在面試官引導(dǎo)下做出了一定的優(yōu)化）

• 在線寫代碼， CSS 的單行和多行截斷？

（ overflow ， text-overflow ）

• Vue 的雙向綁定原理（事件監(jiān)聽， getter 和 setter ）

• 別的記不清了……當時網(wǎng)不好

二面，視頻（三面還沒給我消息，估計涼了）

• 在線寫代碼，給定一個二叉樹，求根節(jié)點到葉子節(jié)點的路徑上所有節(jié)點值之和（DFS，先序遍歷，遞歸）

• 在線寫代碼，給定兩個有序數(shù)組，合并為一個有序數(shù)組，不許使用 js 的 concat 和 sort 方法（兩個指針）

• 在線寫代碼，兩欄布局，左邊定寬右邊自適應(yīng)，等高（ flex ， grid ， float ， position ，方法很多隨便說幾個）

• 簡述自定義事件實現(xiàn)方法（參看紅寶書）

• 簡述 getter 和 setter 寫法（參看紅寶書）

• TCP 三次握手和四次揮手，擁塞控制（參看計算機網(wǎng)絡(luò)教材）

• 你有什么要問我的嗎？

（見后文小結(jié)里的HR相關(guān)文章）

鏈家

我也不知道我為啥掛了……

當時面試地點在凱倫飯店。環(huán)境舒適，面試官也挺溫和。技術(shù)面難度不大，但問得比較細。我印象不深，一二面合起 來寫吧。

技術(shù)面

• 跨域方式（ JSONP , ?webSocket 等，但原理要搞懂）

• Web 本地存儲（ Cookie ， localStorage ， sessionStorage 等）

• Cookie 相關(guān)的頭字段和格式（ Set-Cookie：

name1=value1, expires='...',expires='...' ）

document.cookie 的格式，寫一個封裝后的函數(shù)（格式同上，函數(shù)就是花式處理字符串）

• session 原理（基于 Cookie ，或查詢字符串，或 ETag ）

• 手寫代碼，不產(chǎn)生新數(shù)組，刪除數(shù)組里的重復(fù)元素（排序， splice() ）

• 項目細節(jié)（問了我一堆后端，還好當年項目搭檔的源碼我還有印象）

• 你有什么要問我的嗎？

（見后文小結(jié)里的HR相關(guān)文章）

二面面試官對我的評價：動手能力強，能解決問題，但所學知識雜而不精，不過學生都這樣。

HR面

基本是天南海北地侃大山，家庭住址、經(jīng)濟條件、寢室關(guān)系、參加過的競賽、做過的項目、職業(yè)規(guī)劃等都會關(guān)聯(lián)到……我可能在這個環(huán)節(jié)說錯話了。言多必失，不要太實誠，也不 要撒謊。

網(wǎng)易

網(wǎng)易的面試體驗挺不錯。它的微信公眾號會給你叫號，前臺小姐姐也會提醒你，每一面結(jié)束后都可以找前臺小姐姐查詢面試結(jié)果。而且食堂超級好吃！還可以邊吃飯邊吸貓！面試地點在杭州研究院一樓大廳。環(huán)境舒適，就是座位有點不夠用。

一面

• 6道基本技術(shù)問題，居中、閉包、塊級元素和行內(nèi)元素等（答案略）

• 某個項目的頁面布局方式，緩存的設(shè)計和優(yōu)化方式（本地存儲和協(xié)議相關(guān)的）

• ajax 的原生寫法（創(chuàng)建 XHR 對象， open() ， setRequestHeader() ， send() ， onreadystatechange ）

• vue-router 的原理（ hash ， HTML5 新增的 pushState ）

• 關(guān)于 ajax ,我再強調(diào)以下方面。

//open()接受3個參數(shù)：請求類型、 URL 和是否異步的布爾值
//GET方式通常這樣發(fā)：
xhr.open("get",?"example.php?name1=value1&name2=value2",?true)

//可以設(shè)定請求頭，包括自定義請求頭，比方說這樣：
xhr.setRequestHeader("MyHeader",?"MyValue")；

//可以這樣取得一個包含所有頭部信息的長字符串：
var?myHeader?=?xhr.getResponseHeader("MyHeader");
var?allHeaders?=?xhr.getAllResponseHeaders();

//POST方式有這幾個地方要改：
//請求頭要重設(shè)，數(shù)據(jù)會以key1=value1&key2=value2的方式發(fā)送到服務(wù)器
xhr.setRequestHeader("Content-Type",?"application/x-www-form-urlencoded");
//獲取表單
var?form?=?document.getElementById("user-info");
//序列化表單，發(fā)送的內(nèi)容傳入send()
xhr.send(serialize(form));

//也可以這樣傳值：
var?data?=?new?FormData(form);
//再傳一點別的
data.append("name",?"Nicholas")
xhr.send(data);

• 別的不記得了……

二面

• 面試官：“你覺得你擅長CSS還是JS？”

• 我：“JS。”

• 面試官：“好，那我問你一道CSS的問題。”

• 我：“？？？”

• CSS 三欄布局，左右定寬，中間自適應(yīng)（ flex ， grid 等）

• 解釋構(gòu)造函數(shù)、對象、原型鏈之間的關(guān)系（看紅寶書）

• 手寫代碼，實現(xiàn)原型式繼承（看紅寶書）

• 手寫代碼，實現(xiàn)借用構(gòu)造函數(shù)（看紅寶書）

• Vue 雙向綁定原理（事件監(jiān)聽， getter 和 setter ）

• Virtual DOM 和 diff 算法（ DOM 樹，分層比較， key ， DocumentFragment ）

• jQuery 鏈式調(diào)用的原理（知乎-jQuery鏈式調(diào)用）

• 最近碰到的技術(shù)難題，不一定是前端（我答了B站的爬蟲與反爬蟲）

• 關(guān)于反爬蟲，請求頭中的這兩個字段要修改。Host ：

• 發(fā)出請求的頁面所在的域。

Referer ：

• 發(fā)出請求的頁面的 URI 。

注意， HTTP 規(guī)范將這個頭部字段拼寫錯了，而為保證與規(guī)范一致，也只能將錯就錯了（這個英文單詞的正確拼法應(yīng)該是 ?referrer ）。

HR面

HR小姐姐似乎對我們學校挺熟悉的，但好像不是校友…… 談一談過去做過的項目、面對的難題（和UI的溝通問題，順便引出我后來自學了平面設(shè)計。

• 又提了提爬蟲

• 家在哪里（照實回答就行）

• 未來職業(yè)規(guī)劃（表示出你想在公司長久待下去，繼續(xù)進步就行）

• 具體的技術(shù)發(fā)展方向（我答的是“能支持上億用戶使用的前端架構(gòu)”）

• 為了往這個方向發(fā)展，你所做的努力（我答的是“在看《高性能網(wǎng)站建設(shè)》、自學后端，順便提了一下‘東北Java第一人’姜國海老師”）

• 預(yù)測一下前端未來的發(fā)展趨勢（我答的是“自動化”）

• 拿了哪家的offer？

（……還是照實回答吧）

實習時間（我建議把時間段說得寬松一些，到時候真的沖突再商量）

京東

京東的面試小哥哥有點逗。因為是臨時改成電話面試，過程不太正規(guī)，題目直接用手機的攝像頭傳給我…… 初面已過，復(fù)試原本顯示待安排，后來估計是招滿人直接給我掛了。

一面

• 列舉塊級元素和行內(nèi)元素（ div 等， span 等）

• absolute 依據(jù)的定位元素是？

（非 static 的祖先元素）

• 幾道 js 基礎(chǔ)題（多去牛客網(wǎng)刷題）

• Vue 里 v-if 和 v-show 的區(qū)別？

（文檔）

• parseInt() 和 array 的 map 方法的參數(shù)？

（看紅寶書）

面試官對我的評價：基礎(chǔ)還可以，做項目的能力是有的，但缺乏深度，要多關(guān)注一些細節(jié)

去哪兒網(wǎng)

距離去哪兒網(wǎng)筆試快一個月了，我都以為我涼了，結(jié)果在北京面騰訊的當天下午連續(xù)接到三個電話……只有一輪技術(shù)面+一輪HR面，然后就給我發(fā)了口頭offer，相當?shù)馗纱嗬洹?/p>

去哪兒網(wǎng)好像更注重考察你對框架、工具的應(yīng)用，對于基礎(chǔ)考得反而不多。而且還考了我 jQuery ,別的公司都不怎么考的……

一面

• webpack 用過嗎？

• 如何處理圖片、 CSS 文件？

（各種 loader ）

• 使用 flex 布局寫移動端布局（注意 flex-direction 要改）

• jQuery 的 delegate 原理（事件冒泡與捕獲）

• 不止這些，但別的忘了……

HR面

• 薪資

• 可實習時間（我說了7~9月）

• 職業(yè)發(fā)展規(guī)劃（有節(jié)制地胡說八道）

• 別的不記得了……因為整個過程速度太快，來不及記憶……

搜狐

我投了三份簡歷給搜狐，結(jié)果三份全被刷了……但4月18日早上搜狐面試官突然加我微信好友！于是當天晚上十點視頻面試。

一面

• HTML5 的語義化標簽（ header ， footer ， main 等）

• position 的取值和含義（W3Cschool-position屬性）

• z-index 的蜜汁用法（這是一個“拼爹”的屬性）

• CORS 跨域文件共享的請求頭（詢問允許的方法和域）

• 獲取頁面滾動高度（ window.pageYOffset ）

• 函數(shù)節(jié)流和去抖，寫滾動監(jiān)聽函數(shù)（函數(shù)節(jié)流和去抖）

• 你有什么要問我的嗎？

（見后文小結(jié)里的HR相關(guān)文章）

百度

雖然百度這幾年發(fā)展勢頭落后于AT，甚至快被京東趕上了，畢竟瘦死的駱駝比馬大，面試還是相當有難度和水準的。本人很遺憾地掛在了二面。看來只能投奔網(wǎng)易的懷抱了~ 百度也是在牛客網(wǎng)上進行遠程視頻，流程和頭條差不多。

一面

• 詢問你的項目經(jīng)驗、學習經(jīng)歷、主修語言（照實答）

• 解釋ES6的暫時性死區(qū)（ let 和 var 的區(qū)別）

• 箭頭函數(shù)、閉包、異步（老生常談，參見上文）

• 高階函數(shù)（呃……我真不太清楚這是啥，聽起來挺像閉包的）

• 求N的階乘末尾有多少個0，在線碼代碼或講思路（求因數(shù)，統(tǒng)計2、5、10的個數(shù)）

• 給一個小于一百萬的數(shù)，求和它最接近的 Fibo 數(shù)（我的思路是簡單地求數(shù)列然后求差，面試官說 Fibo 數(shù)超過34個以后就超過一百萬，可以把34個數(shù)都求出來然后研究狀態(tài)轉(zhuǎn)換……）

一面面試官給我的評價：“基礎(chǔ)扎實，邏輯還可以，但代碼風格不太好（ES5和ES6混用，封裝不好），未來發(fā)展方向不明確。可以進入第二輪面試。”

二面

二面面試官說話不太清晰且聲音太小，對面環(huán)境也比較嘈雜（好像也在面試？），這點不如頭條。頭條是在獨立的小隔間里。

• CSS布局（ Grid 和 flex 都考且考察細致）

• 數(shù)組的隨機排序（我蒙了個答案，好像還算對。

• 打亂數(shù)組

• JSON 對象的深度克隆（遍歷遞歸，或者序列化和反序列化）

• 簡述動畫寫法（ setTimeout ， requestAnimationFrame ， CSS3 ……）

• 列舉“傳統(tǒng)”的異步（……這題啥意思？不會）

• Node 的多線程，高并發(fā)，安全（我都不會……問后端大佬吧）

• 聽說過 PWA 嗎？

（沒聽說過，不會……）

• 解釋 event loop （聽過，不太會）

• 服務(wù)端渲染，計算首屏和白屏時間（不太會……首屏白屏

• 服務(wù)器如何強制更新后的文件替代客戶端緩存的文件（不太會……好像和MD5有關(guān)？

）

還有很多不太記得了，反正我都不會…………

二面面試官給我的評價：“二面failed。學習能力不錯，反應(yīng)快，知識的廣度有，但缺乏深度，不夠系統(tǒng)。建議研讀V8引擎源碼，Node源碼，花半年時間。”原來我已經(jīng)進步到可以看源碼的程度啦？雖然掛了，但聽面試官這么說還有點開心~

小結(jié)

看到這里，相信讀者也已經(jīng)感覺到，許多面試題是有套路和重點難點的。我分享幾篇總結(jié)這些套路的文章。

• 大廠前端面試考什么？^[6]
• 前端進階系列^[7]
• 這可能不只是一篇面經(jīng)^[8]
• diff算法^[9]
• 最后一面-HR面^[10]

都是前輩們留下的寶貴經(jīng)驗，值得好好吸收。

我的找實習總結(jié)就寫到這里，感謝大家閱讀。祝愿大家能找到滿意的實習。

推薦自己的另一篇文章~

• 鳳鳴于岐：前端學習建議 | 書籍和資料推薦^[11]

Reference