作者：Thescavenger

鏈接：https://www.nowcoder.com/discuss/163165

來源：牛客網

你需要的前端面經

個人情況

本科，成都雙非大學，大三開始正式學習前端，主攻 react，目前大四。已拿美團、字節跳動 offer，網易的正在等結果

博客原文

歡迎關注個人 github：https://github.com/lawler61/blog，在那上面會實時更新

字節跳動面經

一、筆試，2 個小時

一共 8 道問答題，有問答、編程、手擼原理等。當初以為全部是高難度算法，準備了好久的算法，結果考的很少。不得不說字節跳動的前端提前批挺人性的（單從我角度上看）

1、實現一個類可以完成事件 on, once, trigger, off

關鍵詞：訂閱-發布模式

2、發布新聞時需要提醒發布的時間。寫一個函數，傳遞一個參數為時間戳，完成時間的格式化。如果發布一分鐘內，輸出：剛剛；n 分鐘前發布，輸出：n分鐘前；超過一個小時，輸出：n小時前；超過一天，輸出：n天前；但超過一個星期，輸出發布的準確時間

3、談談計算機中原碼，反碼，補碼以及它們之間的轉換

關鍵詞：正數、負數、0

4、格式化數字。輸入：12345，輸出：12,234；輸入：2345.6789，輸出：2,345.6789。要求：使用正則和非正則兩種方式實現

5、給一段文本，將文本數組化，示例如下：

asd ehe rjr d erregrnt eruk rth sthst ar gae// 輸出 [asd, ehe, rjr] [d, erregrnt, eruk] [rth, sthst, ar, gae]

二、一面，視頻面，90 分鐘

筆試難度整體中等偏上，2 天后，hr 打電話說過了，約個面試時間

1、自我介紹

2、mobx 和 redux 區別

3、http 常用的請求方式，區別和用途

關鍵詞：get，post，put，delete...

4、http 常用的狀態碼和使用場景

關鍵詞：1x - 5x

5、http 緩存

關鍵詞：強緩和協商緩存

6、http2

關鍵詞：信道復用，server push

7、來寫寫代碼，好勒

• css div 垂直水平居中，并完成 div 高度永遠是寬度的一半（寬度可以不指定）
• 下面代碼執行順序，并解釋

async function async1() {console.log('async1 start');await async2();console.log('async1 end');}async function async2() {console.log('async2');}console.log('script start');setTimeout(function () {console.log('setTimeout');}, 0);async1();new Promise(function (resolve) {console.log('promise1');resolve();}).then(function () {console.log('promise2');});console.log('script end');

• 實現函數能夠深度克隆任何基本類型。附加題：實現對象中嵌套數組，數組中嵌套對象

8、前端性能優化

關鍵詞：html，js，服務器

個人感受：一面是北京的一個小姐姐面的，問的問題偏基礎，很中肯

三、二面，視頻面，70 分鐘

當前晚上就收到 hr 電話說過了，約個時間二面

1、講講訂閱-發布模式，有幾種實現方式

關鍵詞：listener、Object.defineProperty

2、事件流

3、事件是如何實現的

關鍵詞：訂閱-發布模式

4、mobx 實現原理

關鍵詞：Object.defineProperty，自定義數據類型提供操作 api

5、講講 redux 及其原理

關鍵詞：發布-訂閱模式 + reducer 純函數管理

6、react 生命周期

7、diff 原理，key 如何使用

關鍵詞：先根據 key 找，再遍歷查找

8、setState 是否異步，為什么。如果連續 setState 5 次，react 如何處理

關鍵詞：react 事件中 setState 淺合并

9、來寫寫代碼

• 實現這么一個類可以完成如下輸出（可以不用到類中的函數）

class Observer {$on() {}$emit() {}}const data = new Observer({ a: 1 });console.log(data.a); // 輸入: 1data.$on("a", (newValue, oldValue) => {console.log(newValue, oldValue);});data.a = 2; // 輸入: 2 1

10、new 一個構造函數發生了什么

關鍵詞：除了那 4 步，還可以從 EC，AO，VO 對象上說

個人感受：二面明顯難度加大許多，一面面基礎，二面面框架，就連手寫代碼都是 Vue 的基本實現原理。以為會涼，傷心好久

四、三面，視頻面，60 分鐘

過了兩天，hr 打電話說過了，約個三面時間，面試官忙，改到了下周

1、講下 MVVM 和 MVC

2、講下兩者的區別，什么場景下適合用

3、講下 angularJS 和 angular 的區別

4、為什么 angular 取消默認雙向綁定

5、還用過其他架構嗎（估計想問 MVP）

6、new 一個構造函數，如果構造函數返回 return {}、return null，會出現什么情況

關鍵詞：還可以試試 return 1; return true; 會出現什么情況

7、CDN 原理

關鍵詞：DNS 查詢，負載均衡

8、來寫寫代碼

• 順序發送 4 個請求 a，b，c，d，要求按照順序輸出，即如果先返回 b，則不輸出，再返回 a，輸出 a，b

9、V8 內存回收機制

關鍵詞：老生代，新生代。引用計數、標記清理

10、webpack 打包優化

關鍵詞：dll、多線程...

11、你認為 webpack 哪里打包慢

個人感受：面完后自閉了，三面是偏架構方面，一來就直接懟 MVVM，MVC，沒有準備這方面，還好其他問題大部分答上了，扳回一城吧

五、整體感受

字節跳動無論是前端、后端、移動端都難度都還是在線的，而且每次面試的注重點是明確的，層次是清晰的，難度是把控好的。整個過程中面試官也很給力，看得出來是提前看了簡歷的，根據之前的面試準備好了問題的。面試完后，會有專門的面試考評團對面試者進行考評，如果有沒有考察到的點可能會加一面，這我是第一次聽說，不過仔細想想這樣沒毛病，也體現了這個公司對面試者的重視。總的來說，面試層面上，字節跳動做的相當好

網易面經

網易我是沒有筆試，某部門直接打電話說面試的，說是補招

一、一面，視頻面，70 分鐘

一面也是個小姐姐，一本正經的

1、mobx、redux 區別

2、react diff 算法

關鍵詞：節點查找，同級比較

3、react 事件機制

關鍵詞：事件代理，冒泡

4、原生事件哪些不冒泡，react 如何處理

5、react-redux 原理

關鍵詞：context，provider，帶上 dispatch

6、父組件 C 有兩個子組件 A、B，B 有 C 傳來的 props。問如果 C 傳遞給 B 的 props 改變了，A 會怎樣的處理，執行哪些鉤子

7、講下 router

關鍵詞：鏈接和視圖同步

8、react 15 16 有哪些鉤子不同

9、http 緩存

10、前端安全有了解嗎

關鍵詞：xss，csrf

個人感受：網易一面難度整體略微比字節跳動二面低點（就我遇到的而言），感覺網易挺狠的呀，一面都這么難，以為要涼

二、二面，現場面，50 分鐘

兩天后 hr 打電話說一面過了，邀我去北京現場面，小激動

1、講講你用 three.js 做的這個項目

2、3D 的立體圖如何實現

關鍵詞：正方體形，球形

3、react 生命周期

4、componentWillMount 和 componentDidMount 的區別

關鍵詞：真實 dom

5、react 學習中遇到的難點

6、H5 項目如何適配

關鍵詞：vw，rem，fastclick...

7、node 中間件機制

關鍵詞：請求截獲，掛上屬性

8、generator, yield。附加題：co 模塊如何實現

關鍵詞：線程讓權，狀態機

9、xss 及防御

關鍵詞：儲存型、反射型、dom 型

個人感受：現場面等了好久，以為自己走錯房間了，我想如果面試官不稍微解釋下為啥遲到我就直接不面了。面試官也沒有提前準備，拿著簡歷看了一分多鐘才開始

三、三面，現場面，30 分鐘

由于二面直接過了，二面的面試內容還沒有上傳上去（因為是現場），三面的面試官同樣也沒有準備，像是 hr 臨時拉上去的，看了簡歷一分鐘才開始。面試過程中還不停用手機催促趕緊發來一、二面內容。所以也沒問些啥

1、mobx、redux 區別

2、H5 項目都干了些啥

3、做的項目流程是怎樣的

4、如何規劃一個項目功能

5、印象深刻的 eslint 規則

6、react 15 16 的區別

關鍵詞：鉤子，移除模塊，createProtal...

個人感受：現場面有點失望，我一直是網易的死忠粉，或許是期望越大失望越大。不過我看網易的現場面確實準備的不充分，等了很久的人不止我一個，甚至還有人來到現場都給安排的視頻面，可能是面試官太忙吧，或者出差啥的

四、整體感受

網易整體面試難度還是有的，就是現場面處理的不是很好。作為死忠粉的我還是要說一句，可能確實是因為面試官太忙了，三面的面試官說面了我馬上就急著有事去做。另外在現場等待時，網易的小哥哥小姐姐們也很養眼，顏值在線。嗯，就扳回到這吧

美團面經

由于美團是去年秋招拿的 offer，當時覺得自己還是很菜就沒發了，能想到多少是多少吧

1、講講 promise

關鍵詞：promise A+

2、防抖和節流

3、flex 布局

關鍵詞：justify-content, align-items, basic, shrink, grow

4、xhr，fetch，axios 的區別

5、用 promise 實現一個請求超時功能

關鍵詞：promise.then 與 setTimeout 并行

6、three.js 如何創建一個 mesh

7、講講你了解的 three.js 原理

8、哪些常用排序算法，大概如何實現

小技巧

當面試官問，有什么問題問我時，這兩個問題我通常是必問的

1、如果我很有幸來到了 XX 公司，作為實習生 / 應屆生的我，公司會有怎樣的安排

像面試官表現你心中的渴求和對這個公司的喜愛，順便聽下公司業務線自己喜不喜歡

2、對于剛剛的面試，面試官覺得我有哪些地方不足，或者說可以改進的地方

注意！不是讓你問 “面試官呀，你覺得我面的怎么樣啊，能過不啊”。而是詢問就他的工作經驗而言，作為一個實習生，自己哪些地方不足，有待加強的地方，無關乎面試結果。但是通過面試官的回答你還是可以大致判斷出你給他留下的印象，以及通過的可能性
例如：
字節跳動二面面試官回答的：嗯，你基礎還是可以，代碼弱了點。
有些面試官會答的很全面，有些則是一句帶過。從這里話里是能看出，我是有一定過的可能性
字節跳動三面面試官：你看的東西確實很多，但還是要注重實踐。
可以看出還是有過的可能性

最后

1、歡迎關注個人 github：https://github.com/lawler61/blog，在那上面會實時更新。近期也會抽時間把題目的解答放上去。歡迎大家來一起討論，共同進步

2、去年的今天我一樣也是愣頭青，硬著頭皮上戰場，然后落得慘敗。不過自己還是拼命努力，狂懟基礎，硬看源碼，每天練習，最后斬獲 offer。極少人會在意你的出身（可能你自己算一個），雙非依然可以進大廠，只要你足夠優秀，能面的面試官閉嘴（指當前階段的問題中，沒有什么能難倒你），那么你就可以反過來選擇大廠

3、加油吧少年！你能行的！

與作者交流：https://www.nowcoder.com/discuss/163165

更多筆經面經：https://www.nowcoder.com/discuss?order=0&type=2

總結

以上是生活随笔為你收集整理的fetch 不是xhr_春招｜前端2019应届春招：不是被大厂选，而是选大厂（字节跳动，美团，网易）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。