新手前端的面經總結（已拿網易offer）

 

4月19日，本人拿到了網易的口頭offer。已經決定去網易-杭研院實習。精神緊繃了一個半月，如今能夠好好放鬆了~ 接下來與你們分享一下本人找實習的經驗。雖然說是找實習，相關經驗在秋招時也應該是適用的。

如下經驗主要偏向技術崗，且更多地側重於前端。

簡歷

分享兩個簡歷模板：

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

關於怎麼寫簡歷，知乎上有許多寶貴經驗，我就強調如下幾點：

• 實事求是，不怎麼了解的東西別往簡歷上寫。
• 項目經歷、學生工做、興趣愛好等最好有詳實的數據和論據支撐，如「該項目後期通過XX方面的性能優化，效率提高22.7%」、「舉辦XX活動，參加人數XX人，持續XX天」、「愛好唱歌，校園十佳歌手三等獎」。

並且必定要體現你起了哪些做用。

網申和內推

簡歷寫好後就進入這個階段啦。建議你們關注如下幾個微信公衆號：

• 校招導師
• 內推軍
• 互聯伴

和這幾個網站：

• 實習僧^[3]
• 牛客網^[4]
• 軟院官網-招生就業^[5]

注意，部分公衆號和網站提供收費服務，我以爲毫無必要。不要在這方面浪費錢，網上免費的資源已經多到眼花繚亂，像我這樣善良的主動分享經驗的網友也挺多。

這個階段我犯了一個大錯誤。內推找得太早，致使複習得還不夠充分就接到了阿里和騰訊的電話，頭幾回電話面試缺少經驗發揮失常，浪費了這兩家公司的內推機會。如今想起來都捶胸頓足……能夠考慮在各大公司內推/網申截止日期前幾天再投遞。

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

除非有很明確的目標，我建議大多數同窗仍是海投。我本身就投了三十多家，叫得上名字的公司幾乎都投了。筆試、面試也是很寶貴的經驗，哪怕倒貼錢我也要多嘗試，況且投簡歷、筆試和遠程面試根本就不要錢呢？

筆試

非技術崗的筆試喜歡考智力題，這點相似公務員考試。牛客網上能夠刷題，或者買公務員考試的資料也行。至於具體的產品經理、策劃等還考些別的什麼，我不太瞭解。

大多數公司技術崗筆試的套路差很少，選擇題+編程題，有時候還會有問答題。選擇題的考點，除了根據你選擇的崗位有所側重，更多地仍是考察基礎知識。C/C++/Java基礎、數據結構、操做系統、計算機網絡必定要重點複習（用學校的教材便可），若是有多餘時間，最好再看看編譯原理。牛客網上也能夠作對應的專項練習。

至於編程題……這也是我心中的痛啊……羨慕學ACM的同窗，在這方面優點就很大了。LeetCode、LintCode均可以刷刷。書籍推薦《劍指offer》，圖書館有舊版的。LintCode的階梯訓練-書籍裏也有《劍指offer》的全套練習題，九章算法上也能夠搜每道題的題解。刷通了《劍指offer》，除去頭條筆試之外的編程題，作出一半仍是比較輕鬆的。大多數公司的編程題支持多門語言。你能夠挑選本身喜歡的語言，熟悉相關的API，省得到時候要本身實現一些本來就有的函數。但最好仍是練一練C/C++，面試的時候面試官不必定會你掌握的語言，但多少懂點C/C++。

若是是在牛客網筆試，「校招小管家」微信公衆號會在筆試前提醒你。吐槽一下賽碼網，沒有牛客網好用。面試

面試有電話面試、視頻面試、現場面試。電話面試更多地會考察你的知識點、談談你過去作過的項目，不多會問你複雜的算法題，即便問了也是讓你講講思路。視頻面試和現場面試就會讓你寫比較細緻的代碼了，到時候要仔細考慮邊界狀況和特別用例。不過我不多見到要求你必定要把代碼跑起來的面試官。

面試會有自我介紹環節，稍微準備一下就好。個人自我介紹一般就半分鐘。

面試的時候必定要放鬆，語速儘量平緩。遇到不會的知識點請大方地說你不會（或者像我這樣說：「這個知識點我不瞭解，如下是個人一些猜想……」或者「您能給一些提示嗎？」）。硬着頭皮回答只是在浪費雙方的時間。

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

去大公司面試就像追女孩子，若是面完試好久都沒回你消息，你也別多問，省得兩邊都不愉快。若是是小公司能夠冒險嘗試一下，由於小公司的流程不那麼正規，有周旋的餘地。

如下是我有印象的各大公司的前端面試題。括號內爲答案和吐槽。

阿里

阿里內推和網申都開始得比較早，但如前文所說，你們能夠不急着投，等準備充分了再去試試運氣。能夠在網站的我的中內心查看本身的面試進度。但願你們不會看到「已回絕」三個字。簡歷面，電話（太緊張+沒睡醒的緣故，我在這裏掛了） 簡述 Vue 的生存週期（建立，掛載，更新，銷燬）

• 你用過 Bootstrap 寫過庫嗎？

• 讓你用 Bootstrap 設計一個系統，怎麼設計？

（這問題我如今都不知道怎麼答）

• Express 和 Koa 框架的區別、優缺點（參見知乎）

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

騰訊

騰訊和阿里都喜歡電話忽然襲擊，這一點很不友好…… 騰訊的面試進度能夠在微信公衆號裏查看。

一面，電話

• ES6 裏 let 和 var 的區別（前者塊做用域，後者函數做用域；

• let深刻理解---let存在變量提高嗎？

• 系統優化方案？

• 簡述一下 CDN 加速服務？

• 簡述事件委託機制（事件捕獲、冒泡，父元素監聽）

• HTTP 裏的304狀態碼瞭解嗎？

（面試-狀態碼）

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

• 談談你印象最深的一個項目（照實說）

二面，電話（掛了）

• 你以爲要怎樣成爲一名優秀的前端工程師？

（快速學習、善於溝通）

• HTTP 、 HTTPS 、 HTTP2 的區別？

（關於HTTP你該知道的）

• 簡述一下用戶訪問網站的過程（緩存，DNS查詢，創建連接，請求，響應，收到頁面，解析DOM樹，顯示內容，首屏加載完成，可交互）

• 你有什麼要問個人嗎？

（見後文小結裏的HR相關文章）

筆試後北京一面。體驗極差！不能一次面完嘛！複試仍是改電話吧……

• 問項目（照實說）

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

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

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

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

• HTTP ， TCP ， UDP ， IP （參看計算機網絡教材）

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

• 你有什麼要問個人嗎？

（見後文小結裏的HR相關文章）

一面過了後公衆號顯示進入複試狀態，但二面一直沒消息。成備胎了？

頭條

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

通常是在牛客網上視頻面試，會讓你在在線編譯器裏寫代碼。順利的話一次三面。頭條回絕人卻是乾脆，面完試十五分鐘內就會給你打電話。像我這樣被掛起來的卻是挺少見……

一面，視頻

• 簡述 CSRF （跨站請求僞造）的***和防護措施（CSDN博客-CSRF）

• 在線寫代碼，給定一個數組和一個正整數N，求一個和小於N的最長連續子數組（我兩層for循環暴力解了，在面試官引導下作出了必定的優化）

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

（ overflow ， text-overflow ）

• Vue 的雙向綁定原理（事件監聽， getter 和 setter ）

• 別的記不清了……當時網很差

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

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

• 在線寫代碼，給定兩個有序數組，合併爲一個有序數組，不準使用 js 的 concat 和 sort 方法（兩個指針）

• 在線寫代碼，兩欄佈局，左邊定寬右邊自適應，等高（ flex ， grid ， float ， position ，方法不少隨便說幾個）

• 簡述自定義事件實現方法（參看紅寶書）

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

• TCP 三次握手和四次揮手，擁塞控制（參看計算機網絡教材）

• 你有什麼要問個人嗎？

（見後文小結裏的HR相關文章）

鏈家

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

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

技術面

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

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

• Cookie 相關的頭字段和格式（ Set-Cookie：

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

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

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

• 手寫代碼，不產生新數組，刪除數組裏的重複元素（排序， splice() ）

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

• 你有什麼要問個人嗎？

（見後文小結裏的HR相關文章）

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

HR面

基本是天南海北地侃大山，家庭住址、經濟條件、寢室關係、參加過的競賽、作過的項目、職業規劃等都會關聯到……我可能在這個環節說錯話了。言多必失，不要太實誠，也不 要撒謊。

網易

網易的面試體驗挺不錯。它的微信公衆號會給你叫號，前臺小姐姐也會提醒你，每一面結束後均可以找前臺小姐姐查詢面試結果。並且食堂超級好吃！還能夠邊吃飯邊吸貓！面試地點在杭州研究院一樓大廳。環境溫馨，就是座位有點不夠用。

一面

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

• 某個項目的頁面佈局方式，緩存的設計和優化方式（本地存儲和協議相關的）

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

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

• 關於 ajax ,我再強調如下方面。

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

//能夠設定請求頭，包括自定義請求頭，比方說這樣：
xhr.setRequestHeader("MyHeader", "MyValue")；

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

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

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

• 別的不記得了……

二面

• 面試官：「你以爲你擅長CSS仍是JS？」

• 我：「JS。」

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

• 我：「？？？」

• CSS 三欄佈局，左右定寬，中間自適應（ flex ， grid 等）

• 解釋構造函數、對象、原型鏈之間的關係（看紅寶書）

• 手寫代碼，實現原型式繼承（看紅寶書）

• 手寫代碼，實現借用構造函數（看紅寶書）

• Vue 雙向綁定原理（事件監聽， getter 和 setter ）

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

• jQuery 鏈式調用的原理（知乎-jQuery鏈式調用）

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

• 關於反爬蟲，請求頭中的這兩個字段要修改。Host ：

• 發出請求的頁面所在的域。

Referer ：

• 發出請求的頁面的 URI 。

注意， HTTP 規範將這個頭部字段拼寫錯了，而爲保證與規範一致，也只能將錯就錯了（這個英文單詞的正確拼法應該是  referrer ）。

HR面

HR小姐姐彷佛對咱們學校挺熟悉的，但好像不是校友…… 談一談過去作過的項目、面對的難題（和UI的溝通問題，順便引出我後來自學了平面設計。

• 又提了提爬蟲

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

• 將來職業規劃（表示出你想在公司長久待下去，繼續進步就行）

• 具體的技術發展方向（我答的是「能支持上億用戶使用的前端架構」）

• 爲了往這個方向發展，你所作的努力（我答的是「在看《高性能網站建設》、自學後端，順便提了一下‘東北Java第一人’姜國海老師」）

• 預測一下前端將來的發展趨勢（我答的是「自動化」）

• 拿了哪家的offer？

（……仍是照實回答吧）

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

京東

京東的面試小哥哥有點逗。由於是臨時改爲電話面試，過程不太正規，題目直接用手機的攝像頭傳給我…… 初面已過，複試本來顯示待安排，後來估計是招滿人直接給我掛了。

一面

• 列舉塊級元素和行內元素（ div 等， span 等）

• absolute 依據的定位元素是？

（非 static 的祖先元素）

• 幾道 js 基礎題（多去牛客網刷題）

• Vue 裏 v-if 和 v-show 的區別？

（文檔）

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

（看紅寶書）

面試官對個人評價：基礎還能夠，作項目的能力是有的，但缺少深度，要多關注一些細節

去哪兒網

距離去哪兒網筆試快一個月了，我都覺得我涼了，結果在北京面騰訊的當天下午連續接到三個電話……只有一輪技術面+一輪HR面，而後就給我發了口頭offer，至關地乾脆利落……

去哪兒網好像更注重考察你對框架、工具的應用，對於基礎考得反而很少。並且還考了我 jQuery ,別的公司都不怎麼考的……

一面

• webpack 用過嗎？

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

（各類 loader ）

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

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

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

HR面

• 薪資

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

• 職業發展規劃（有節制地胡說八道）

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

搜狐

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

一面

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

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

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

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

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

• 函數節流和去抖，寫滾動監聽函數（函數節流和去抖）

• 你有什麼要問個人嗎？

（見後文小結裏的HR相關文章）

百度

雖然百度這幾年發展勢頭落後於AT，甚至快被京東遇上了，畢竟瘦死的駱駝比馬大，面試仍是至關有難度和水準的。本人很遺憾地掛在了二面。看來只能投奔網易的懷抱了~ 百度也是在牛客網上進行遠程視頻，流程和頭條差很少。

一面

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

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

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

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

• 求N的階乘末尾有多少個0，在線碼代碼或講思路（求因數，統計二、五、10的個數）

• 給一個小於一百萬的數，求和它最接近的 Fibo 數（個人思路是簡單地求數列而後求差，面試官說 Fibo 數超過34個之後就超過一百萬，能夠把34個數都求出來而後研究狀態轉換……）

一面面試官給個人評價：「基礎紮實，邏輯還能夠，但代碼風格不太好（ES5和ES6混用，封裝很差），將來發展方向不明確。能夠進入第二輪面試。」

二面

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

• CSS佈局（ Grid 和 flex 都考且考察細緻）

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

• 打亂數組

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

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

• 列舉「傳統」的異步（……這題啥意思？不會）

• Node 的多線程，高併發，安全（我都不會……問後端大佬吧）

• 據說過 PWA 嗎？

（沒據說過，不會……）

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

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

• 服務器如何強制更新後的文件替代客戶端緩存的文件（不太會……好像和MD5有關？

）

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

二面面試官給個人評價：「二面failed。學習能力不錯，反應快，知識的廣度有，但缺少深度，不夠系統。建議研讀V8引擎源碼，Node源碼，花半年時間。」原來我已經進步到能夠看源碼的程度啦？雖然掛了，但聽面試官這麼說還有點開心~

小結

看到這裏，相信讀者也已經感受到，許多面試題是有套路和重點難點的。我分享幾篇總結這些套路的文章。

• 大廠前端面試考什麼？^[6]
• 前端進階系列^[7]
• 這可能不僅是一篇面經^[8]
• diff算法^[9]
• 最後一面-HR面^[10]

都是前輩們留下的寶貴經驗，值得好好吸取。

個人找實習總結就寫到這裏，感謝你們閱讀。祝願你們能找到滿意的實習。