科班小前端的大廠面經 | 掘金技術徵文

本人今年研一，兩年制碩士，今年實習。本科前半段迷茫在科班的基礎理論學習和課程做業中，大一大二對前端一無所知，沒想關心太多，只想保研就好。大二暑假參加一項學校項目，第一次接觸前端，一臉茫然，發現軟件工程還有不少值得探尋的地方。大三保研形勢已定，因而參加各類比賽，摸索本身的興趣所在，終於在一系列比賽種嚐到了前端的甜頭——原來好看的頁面這麼吃香（當時就是這麼粗淺的認識），因而決定正式入坑，帶着起初「前端能讓頁面好看」這般粗淺可笑的見識，打開新世界，一步步豐富自身，直到今年春招恰好兩年半。春招戰線很長，從二月中旬一直延續至今，賽程僅恰好過半，目前取得初步成果：

1. 網易雷火三輪技術+HR，拿到offer。
2. 字節跳動教育業務三輪技術+HR，拿到offer。
3. 美團兩輪技術，leader就給了經過，在等offer。
4. 阿里淘系目前三面結束，被大leader全方位調教，如今準備交叉面，不管成敗收穫都不少。——4月8日更新，交叉面和HR面都已經結束，收到意向書，相應的面經也已經更新下文中了。
5. 騰訊PCG到第四面，戰線很長，不知可否過關。——4月8日更新，沒有繼續面騰訊，淘系offer拿到後就推掉了這裏。

在這裏把分享面經，附帶我本身的簡要回答和思考。對於基礎問題，你們能夠查漏補缺，建議收藏；對於場景或者高層思考型問題，你們參考便可，這些都是面試官根據本身部門或每一個人的履歷定製的。輪次越多，問題也就越偏向高層，須要你們更多的總結思考，找到平衡，甚至再生產。

網易雷火三輪技術+HR

一面

一面通常都是基礎，在回答問題的基礎上，最好能主動發散廣度深度，面試官印象會很好。

• 介紹下本身並聊聊項目。

• 這個因人而異，要大方得體，講出重點。主要圍繞項目是什麼，爲什麼要作這個項目，解決了什麼痛點，你在其中負責了什麼工做，遇到並解決了什麼問題，如何和不一樣模塊合做，把控了多少架構。後兩點須要必定思考和積累，把前面的講清楚能知足一些面試官，可是大廠面試官經常會但願你說一些架構和總體方面的理解，是加分項。

• 如何用await和async寫一個睡眠函數？

function sleep(time){
    return new Promise(function(resolve,reject){    
        setTimeout(()=>resolve('over'),time);
    });
}

async function run(time){
    let result = await sleep(time);
    console.log(result);
}

run(3000);複製代碼

• 說說inline元素和inline-block元素的區別。
• CSS基礎題，我從佈局方面不換行和尺寸方面inline設置寬高無效，inline-block能夠來說，還發散了一些CSS元素體系講了講。
• inline元素的margin有用嗎？
• 是一個很刁鑽的切入口，你們經常忽略對inline元素的研究，還好我平時比較喜歡搗鼓CSS，其實再默認水平方向的文檔下，設定水平方向margin是有效的，垂直方向無效。
• 講講html如何添加事件監聽，事件處理有哪些階段？
• 添加事件監聽很簡單，document.addEventListener就能直接來，事件階段按時間順序有捕獲，目標，冒泡三段。
• 說出三個你知道的不經常使用的html標籤。
• 通常都問那些經常使用的，結果面試官反其道行之，很佩服。當時只答出<iframe><strong><i><audio>，能夠百度一下，其實有不少。

二面

由於我React技術棧比較多，因此這方面問題也多，你們按需食用。

• React中函數組件和類組件的區別。
• React16.9以後，加入了鉤子，給組件體系帶來了不少新變化，函數組件也擁有了生命週期方面的特性，useEffect鉤子其實就是對幾個生命週期的封裝定製。
• React是如何將redux包裝到組件上的？
• React的react-redux庫，經過給根組件包裝一層<Provider>，並將store綁定上去，須要進行狀態管理的組件經過connect包裝生成容器組件，並將狀態和事件映射到props上。redux其實有不少細節，能夠視狀況引伸。
• React類組件能在componentShouldUpdate中比較屬性是否改變來判斷是否應該從新render，那函數組件如何實現一樣功能？
• 函數組件經過React16.6的包裝函數React.memo()獲得一個優化後的組件。
• ES6的proxy講一下。
• 代理，攔截對象的各類類型操做如get和set等，經常在講到Vue3.0時，用來和Vue2.0的Object.defineProperty對比，其實提到proxy面試官就但願你提到Vue方面的變化。
• Object.defineProperty和Proxy對比，有什麼優劣？
• Proxy對整個對象進行代理，而且返回新對象，是單一職責原則的良好實踐，而Object.defineProperty不得不對對象每一個屬性進行重複的劫持操做，且沒法劫持數組的原生方法如push、pop等，只能使用hack的方式改變原型鏈。相比之下，Proxy就功能全面且不須要額外工做，內聚性良好。
• 如何實現文字溢出顯示點點點？

.container{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}複製代碼

• 講一下OAuth2.0認證的過程。
• 由於個人項目有用到Google的API，因此被問到，阮一峯老師博客講的很清楚：OAuth 2.0 的四種方式
• 講一下登陸以後，身份認證的過程。
• 使用cookie和session，用戶登錄後，後端session以鍵值對形式存儲用戶信息，將sessionId返回瀏覽器，瀏覽器只要在cookie種攜帶該sessionId，便可讓服務器確認用戶信息。固然這個過程並不安全，若是能引伸一些安全方面的看法，是加分項。
  

三面

• 項目中訪問其餘網站好比Google Drive須要登陸認證嗎，登錄一次後再次進入還要認證嗎？
• 用的是第三方受權形式，因此當時得不斷從新認證。和麪試官進行了一些交流。
• 你的項目是先後端分離嗎，架構描述一下。
• 不是，架構問題基於項目真實狀況回答便可，不須要由於本身的項目有些不足就避而不談，其實可以點出不足並進行思考，反而是不錯的答案。

• React中函數組件和類組件的區別。
• 又被問了，多是考察我這方面扎不紮實，也可能就是碰巧。
• Hook用過嗎，有什麼做用？
• 從代碼重構和性能優化來說鉤子。能夠看看官方文檔。
• Ref用過嗎，通常是用來幹什麼的？
• 得到組件實例，React雖然是數據驅動的，可是或多或少須要dom操做，這個時候經過ref實例便可獲得組件的真實dom。因而可知React，Vue早就不能稱爲MVVM了。
• 如何在父組件中得到子組件內部的ref？
• 可使用傳遞迴調函數或者React.forwardRef API的方式轉發ref。
• 你對React中組件的狀態管理有什麼良好實踐或看法？
• 狀態提高到父組件便於統一管理，使用redux等等之類。
• 跨域問題如何解決？
• 這個網上資料鋪天蓋地，除了傳統jsonp，CORS等回答以外，我還結合本身項目中的代理講了講。
• Restful接口規範瞭解嗎，狀態碼200表明什麼，201呢？
• 200就是GET獲取數據成功，當時沒背狀態碼，201這裏答不出來，後來看了知道是用戶新建或修改數據成功。
• 用過webpack嗎？
• 這是我一直用的很少的點，只提了提tree-shaking相關原理，面試官沒有繼續爲難。
• 用過什麼類型的服務器，用來幹什麼？
• 學院服務器，各類雲，都用過，用來作本身的項目，大概作了什麼也提了一點。

HR面

走到HR面通常穩住不浪就沒什麼問題了，千萬不要頭鐵，和「騰訊HR說不想去深圳」之類的話，或者聊一些公司的負面消息，你真沒興趣或者就是牛逼哪都求着你就當我沒說咯。在HR面，只要心平氣和了解公司，分享一些我的愛好，聊聊人生就好了。

• 你的前端學習途徑有哪些？
• 爲什麼選擇前端？
• 關於這個問題，我單獨寫過一段吐槽：HR終極一問：爲啥選擇前端？答：混口飯吃。卒。
• 職業規劃是什麼？
• 你的興趣有哪些？

字節跳動三輪技術+HR

字節很是注重基礎和編碼能力，幾乎全部問題都但願你能寫上幾筆，平時須要注重基礎能力的培養。

一面

• 介紹一下你本身和項目。
• TCP和UDP有什麼區別?
• UDP無鏈接，TCP有鏈接。更多細節見這篇專欄
• TCP創建鏈接和斷開鏈接的過程。
• 網絡基礎，也是web入門的一步，三次握手和四次揮手，都是爲了雙方互相確認狀態。
• GET和POST請求有何不一樣。
• 經典問題，其實就是語義不一樣，本質上都是發送http請求報文。
• 前端緩存講一下。
• 主要是http1.1的cach-control屬性，分三個遞進的狀況：no-store、no-cache和max-age，而後配合etag確認後端資源是否更新了。有興趣的還能夠把http1.0的expires和cach-control對比。
• js基本類型有哪些？
• 加上Symbol有六個。
• 盒子模型講一下。
• 當時講了不少CSS佈局標準，最後面試官說其實只想聽我說一下寬高，content-box和border-box就行。
• 寫代碼，寫一個閉包的應用。
• 你們發散思惟能夠有不少，我當時寫了個很簡單的單例函數。

function getInstanceFactory(instance){
  return function getInstance(){
    return instance;
  }
}

let getInstance = getInstanceFactory({a:1});
const instance = getInstance();
console.log(instance.a);複製代碼

• 寫代碼，判斷一個變量是否爲字符換或者數組。
• 用instanceof,constructor指向，Object.prototype.toString均可以。
• 寫代碼，顯示一個文檔樹的章節結構，附帶小節標號。
• 深度遍歷，當時寫完還有一點小節標號沒調好，面試撕代碼老是難以一遍過啊。

二面

• 平時經過什麼渠道學習前端，爲何選擇前端？
• 好幾道肉眼看代碼寫輸出結果的代碼題。
• 這種題每每乍一看沒什麼難度，實際上可出得很繞，平時沒事多玩玩原生js，否則容易被繞進去，好比this的指向、變量的做用域等等。
• 子元素寬度未知，如何居中子元素，寫CSS。
• 直接在面板上寫了tansform的方式
• 有哪些跨域方法？
• 重複的問題就略過了。
• Promise的all和race方法講一下？
• all是要全部子promise都完成才resolve，有一個失敗就馬上reject；race是隻要有一個promise返回結果，父promise立刻也會用子promise的成功返回值或失敗詳情做爲參數調用父promise綁定的相應句柄，當時甚至想寫一個原生js實現的race，不過面試官反而說不用。
• 寫代碼，寫一個事件監聽註冊器。
• 陰溝裏翻船，本覺得順利寫完，結果出了好幾個複製粘貼以及變量名寫錯的問題，看了半天，最後都沒有調好。吃了此次教訓，以後寫代碼更加謹慎了，提交前會先本身順着邏輯理一遍。後面才知道牛客網的面板能夠全屏，以前一直是縮小形式，寫起來很容易遺漏。
• 講講你在寫代碼的過程當中爲何出了bug，整個思路是什麼？
• 這是順着前一題出的bug，算是面試官給的一次機會，好好描述了下本身的思路和心理。

三面

• 介紹項目。不斷追問，從技術使用到架構。
• 這種時候必定要撐住，從容思考，就算不會也要把思路講出來。
• 哪一個項目令你收穫最大？講講收穫。
• React項目中你遇到過什麼問題？如何解決的？
• 版本更新後的重構問題主要講了講。
• http請求有哪些方法？
• GET、POST、HEAD、PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH。當時之說出來五個。
• 用過什麼ajax請求的庫？
• 只說了antd和axios，後面和麪試官交流了一些庫封裝問題。
• 寫代碼，js算法題，老師給孩子分餅乾，最多能知足多少孩子。寫完以後問爲何要這樣寫。

HR面

小姐姐很活潑愛笑，還懂技術，全程輕快交流。

• 描述一下大前端。
• 和HR交流大前端感受很獨特，沒法言喻。
• 你以爲前端就是界面嗎？
• 爲何選擇前端？
• 發現每一個公司必問至少一次，出現頻率最高的問題非他莫屬。
• 平時怎麼學習前端？

美團兩輪技術

一面

• 介紹下本身和項目。
• 平時學習前端有什麼方式？
• 寫代碼，寫一下js中的各類繼承方式。
• 主流三套方式：ES6中class的extends；原型鏈；經過call方法借用別的構造函數；
• 默寫react的生命週期函數。
• 可是默寫了一下，mount階段4個，update階段5個，umount階段1個，異常狀況有個componentDidCatch。
• 描述一下React的數據流傳遞方式。
• 單向數據流，父組件到子組件單向，數據到視圖單向。
• 描述一下redux的數據流。
• 最外層Provider上掛載一個store，從上到下以瀑布流的形式傳遞，途經的每一個組件均可以取得數據並添磚加瓦，可是不能直接修改，只能經過dispatch。
• React的setState以後如何進行更新和渲染的？
• 新舊版本React更新由同步變爲異步，儘可能把兩種版本對比着講，講出爲何要進行異步更新，而且引入新的數據結構Fiber。
• 描述一下MVC模式。
• 畫了一下M,V,C三者之間的數據流向圖。

二面：

原本二面是交叉面，不過直接跳到了主管面。

• 介紹下你的項目。也是被不斷追問。
• Angularjs如何進行前端渲染？
• 講講雙向綁定，髒檢查那套。
• 主流前端框架機制講一下？
• 很大的話題，從React入手，講了它的渲染機制和優化。
• 平時怎麼學習前端？

阿里淘系三輪技術

一面（提早批）

• 介紹下本身的項目。
• AngularJS和React、Vue有什麼區別？結合開發經歷描述。
• 這個純看理解和我的發揮了，面試官估計仔細看了個人簡歷，三個框架都用過因此這麼問。當時扯了好久關於框架的看法，在這種方面，千萬不要背MVC或MVVM之類的概念。
• 項目中遇到什麼問題，如何解決的？
• Node.js用過麼，講一講。
• 用的很少，就把node的事件循環講了下，nextTick和setImmediate跳出來說了講。
• 平時用哪些渠道進行學習？

二面

突擊面試，不約時間，11點來電就直接開始了。這種沒有準備的狀況下必定要冷靜，能夠先讓面試官稍等片刻本身準備下設備，同時調整下狀態。

• 近兩年在前端領域有什麼成果和貢獻？
• 頗有魄力的問題，突擊面試外加上來就丟這個問題頗有壓迫感。講了本身release的項目，實驗室的項目，社區博客（開始學前端就在寫CSDN博客，近期遷到掘金）分享，flutter等等。
• 請講講三大框架爲什麼會產生？
• 很寬廣同時又很精確的主觀題，從前端技術史講起，各大公司的立足點和開發訴求。
• 你對前端框架的發展方向有什麼本身的看法？
• 很普遍，從動態化，兼容性入手，有時間想談談新編碼下的JIT和AOT。
• 玩過IOT一類的嵌入式開發嗎？
• 玩過樹莓派，之前在學校搞太小車競賽。
• 解決過哪一個技術問題最令你大呼過癮？
• 技術上從0到1最痛快，好比在一張白紙的狀況下完成Google OAuth2.0認證，調通接口。
• 你在技術方面最佩服或最感謝的人
• 身邊的人。
• 你有什麼想一想我瞭解的？
• 問了不少問題，關於淘系如今的結構組成，阿里在Flutter、BFF、Serverless方面的生態建設，還問了下當天淘寶IOS出現的S1級事故。學到了不少。

三面

面試官是P9的前端團隊大leader，什麼都會，什麼都比你深，只能穩住別慌，盡力發揮。

• 講一下你價值最大的一個項目。
• 講了大三實習的項目AngularJS+.Net Framework。
• 我看見你還用Flutter，講一講Flutter的原理吧。
• 底層有一個用於跨端的嵌入層，中層用C++實現自繪引擎，封裝成dart ui庫，上層用dart開發，對象化組件化。
• Flutter和ReactNative比，性能孰優孰劣？
• RN首屏性能相對弱，組件重繪代價大，JSBridge涉及進程切換，這個固有代價致使RN的渲染性能弱於Flutter，因此RN纔有了架構重建計劃，將JSBridge替換爲JSI。
• 微信小程序的結構和原理又是什麼樣的？
• 回答的很差，印象中的小程序也是和RN相似的派系，可是底層實現ui的方式我犯迷糊了。
• 如今的Flutter確定是直接不能用於大項目開發的，你以爲它的瓶頸在何處？
• 講講Flutter在狀態管理方面的不足，提到了大廠在Flutter方面的定製。
• 你有什麼要問個人？
• 趕忙問下以前小程序原理的問題，面試官說上層是用html，js那套web跑在瀏覽器內核（如V8，JSCore等），再往下層是用webview，外加一些native code實現對webview作得不太好的組件的補充。
• 還問了一直關注的severless問題，面試官高屋建瓴，分兩點進行教學：
• 基礎設施方面，雲原生的支持必須達到足夠高的穩定性，知足擴容收縮等硬性要求才能將關鍵基礎鏈路演化爲severless，目前還存在必定差距，不過一些非關鍵業務鏈路已經完成遷移。
• 人的方面，應用工程師得擁有該方面的維護技術和解決問題的能力。雖然還有不少細節不甚理解，但認真聽完仍是收穫滿滿。

四面（交叉面，釘釘）

• 你收穫最多的項目是什麼？
• 大三外企實習項目，全棧開發，讓我對架構和服務化甚至是敏捷開發的項目把控和工程實踐有了很多的體驗和理解。
• 項目中使用websocket開發，在和後端對接以前如何進行開發？
• 這個問題被問住了，由於項目比較小前端用完mock數據，甚至連mock服務器都沒有就直接和後端對接，後端推送數據也是在前端直接查看，就老老實實和麪試官交流了一陣。
• 關於網站性能優化問題，SPA過大致使首屏時間太長怎麼解決？
• 性能優化問題我一直沒有特地去「背誦」，畢竟本身的項目都沒到前端性能的瓶頸。談了談懶加載、打包策略。
• 若是老闆和你說網站首屏加載時間太長，但不知道什麼緣由，你如何一步步定位並解決問題？
• 先要定位問題，打開控制檯看timeline，若是那些階段佔用過長時間就會有長條的瀑布圖顯示。結果面試官追問若是timeline看起來很正常怎麼辦？我只能回答可能出現頁面報錯，js文件出錯沒能正確進行一些dom操做，致使元素沒有正常顯示。
• 若是某個js文件必須在header中被加載，而它又操做了body中才有的dom元素，怎麼辦？
• 能夠在該js文件以前加一個適配的js文件，手動append一個可供該文件選擇的dom元素，而後再頁面onload以後刪除適配該元素。

HR

• 目前的offer有哪些，想如何選擇？
• 你作前端的目標是什麼？
• 在學校的學習成績怎麼樣？
• 對工做地點有要求嗎？
• 這個不能頭鐵亂講，想穩拿offer就老實回答杭州。

騰訊PCG三輪技術

一面

幾乎全部前端問題都問了一遍，刷新面試時長記錄，記錄幾個我回答的很差或者印象深的。

• 從 URL 輸入到頁面展示到底發生什麼？
• 經典問題，用於全面考驗一個前端的網絡基礎，甚至能看出是否具備必定全棧能力，標準回答能夠直接百度，而後能夠結合一些本身的項目。
• 父元素和子元素寬高不知道的狀況如何居中子元素？
• 這個問題其實和父元素高度知不知道無關，由於文檔流中父元素默認包裹子元素，高度是由子元素撐開的。
• Webpack用過嗎，講一講。
• 如何用ES5實現promise？
• 有各類版本的，思想就是then的鏈式調用先返回promise，而後將具體回調推入隊列等待延遲執行，延遲執行經過setTimeOut模擬。
• 前端性能優化有哪些方式？
• 掘金上有一篇文章：2018 前端性能優化清單

二面

幾乎沒問基礎知識問題，一直考驗對問題的解決能力，問了不少特定的場景題，也和麪試官的團隊負責內容相關。

• 平時怎麼學習前端？
• 富文本編輯器怎麼實現？
• 給標籤設置contenteditable屬性，而後使用瀏覽器支持的document.execCommand 命令模式API
• 富文本編輯器會面臨怎麼樣的攻擊風險？如何避免？
• 就是變相問網絡安全，把XSS和CSRF具體到場景裏去做答。
• 若是要實如今離線狀況下編輯且不丟失數據，怎麼辦？
• 先回答的是使用localStorage，回答以後不斷追問，還問了可否直接用對象存，後面扯到了引擎方面的問題。
• 如何實現一個可編輯的能夠無限延伸的表格？
• 這裏只能受虐了，盡力講講本身的想法，好比延時加載，滾動節流等等，可是仍然被不斷追問直到沒轍。
• CSS基礎好麼，知道DEN麼？
• CSS基礎還能夠，可是DEN真不知道。。。
• Webpack用過麼？裏面的tree-shaking什麼原理？
• tree-shaking是由於import靜態引入的能力，得以對文件內容進行淺層比較，去掉未被使用的代碼。
  
• 如何衡量一個軟件的質量？如何保證產品的質量？
• 講了一些軟甲工程的思想，又講了些敏捷中的測試驅動開發，科班的知識終於在這裏用到一點。
• 寫過測試麼？有沒有用過測試的框架？
• 程序員本身寫的測試能叫測試嗎（狗頭）。
• 你以爲本身對比其餘人的優點在哪裏？
• 此問讓人很慌，只能不害臊地稍微講講本身的優勢。

三面

• 介紹本身的項目。
• 你的項目怎麼實現後端推送？
• websocket那一套。
• 除了websocket外還有什麼方法能實現後端推送？
• 只能回答輪詢了。
• 開發過微信小程序麼，你感受小程序和傳統web以及Flutter,ReactNative之間的關係是什麼？
• 一個很廣的話題，從html靜態頁面開始提及，講講前端發展歷史和趨勢。
• 看你框架用得不少，說說React和Vue的區別？
• 直接從原理上，React是setState那一套本身實現的更新體系，Vue是nextTick，而且每一個屬性都被劫持（2.0）或代理（3.0），能夠精肯定位，觸發watcher。
• http2知道麼，講講它和http1的區別，有什麼新特性。
• 多路複用、新的二進制編碼、頭壓縮、服務端推送等。
• 你還有什麼本身的項目或者開源貢獻講一講？
• 本身寫的flutter項目，博客以及在關注的新技術新方向都講了一遍。這種問題就是考察技術熱情和活躍程度。

最後

但願本身不斷總結，完善自身。也祝願全部看到此文的人能獲得幫助，收穫理想的offer。

附：個人CSDN博客，有着從入坑到如今的技術分享。