作者：Thescavenger

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

來源：牛客網(wǎng)

你需要的前端面經(jīng)

個(gè)人情況

本科，成都雙非大學(xué)，大三開始正式學(xué)習(xí)前端，主攻 react，目前大四。已拿美團(tuán)、字節(jié)跳動 offer，網(wǎng)易的正在等結(jié)果

博客原文

歡迎關(guān)注個(gè)人 github：https://github.com/lawler61/blog，在那上面會實(shí)時(shí)更新

字節(jié)跳動面經(jīng)

一、筆試，2 個(gè)小時(shí)

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

1、實(shí)現(xiàn)一個(gè)類可以完成事件 on, once, trigger, off

關(guān)鍵詞：訂閱-發(fā)布模式

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

3、談?wù)動?jì)算機(jī)中原碼，反碼，補(bǔ)碼以及它們之間的轉(zhuǎn)換

關(guān)鍵詞：正數(shù)、負(fù)數(shù)、0

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

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

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

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

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

1、自我介紹

2、mobx 和 redux 區(qū)別

3、http 常用的請求方式，區(qū)別和用途

關(guān)鍵詞：get，post，put，delete...

4、http 常用的狀態(tài)碼和使用場景

關(guān)鍵詞：1x - 5x

5、http 緩存

關(guān)鍵詞：強(qiáng)緩和協(xié)商緩存

6、http2

關(guān)鍵詞：信道復(fù)用，server push

7、來寫寫代碼，好勒

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

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');

• 實(shí)現(xiàn)函數(shù)能夠深度克隆任何基本類型。附加題：實(shí)現(xiàn)對象中嵌套數(shù)組，數(shù)組中嵌套對象

8、前端性能優(yōu)化

關(guān)鍵詞：html，js，服務(wù)器

個(gè)人感受：一面是北京的一個(gè)小姐姐面的，問的問題偏基礎(chǔ)，很中肯

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

當(dāng)前晚上就收到 hr 電話說過了，約個(gè)時(shí)間二面

1、講講訂閱-發(fā)布模式，有幾種實(shí)現(xiàn)方式

關(guān)鍵詞：listener、Object.defineProperty

2、事件流

3、事件是如何實(shí)現(xiàn)的

關(guān)鍵詞：訂閱-發(fā)布模式

4、mobx 實(shí)現(xiàn)原理

關(guān)鍵詞：Object.defineProperty，自定義數(shù)據(jù)類型提供操作 api

5、講講 redux 及其原理

關(guān)鍵詞：發(fā)布-訂閱模式 + reducer 純函數(shù)管理

6、react 生命周期

7、diff 原理，key 如何使用

關(guān)鍵詞：先根據(jù) key 找，再遍歷查找

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

關(guān)鍵詞：react 事件中 setState 淺合并

9、來寫寫代碼

• 實(shí)現(xiàn)這么一個(gè)類可以完成如下輸出（可以不用到類中的函數(shù)）

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 一個(gè)構(gòu)造函數(shù)發(fā)生了什么

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

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

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

過了兩天，hr 打電話說過了，約個(gè)三面時(shí)間，面試官忙，改到了下周

1、講下 MVVM 和 MVC

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

3、講下 angularJS 和 angular 的區(qū)別

4、為什么 angular 取消默認(rèn)雙向綁定

5、還用過其他架構(gòu)嗎（估計(jì)想問 MVP）

6、new 一個(gè)構(gòu)造函數(shù)，如果構(gòu)造函數(shù)返回 return {}、return null，會出現(xiàn)什么情況

關(guān)鍵詞：還可以試試 return 1; return true; 會出現(xiàn)什么情況

7、CDN 原理

關(guān)鍵詞：DNS 查詢，負(fù)載均衡

8、來寫寫代碼

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

9、V8 內(nèi)存回收機(jī)制

關(guān)鍵詞：老生代，新生代。引用計(jì)數(shù)、標(biāo)記清理

10、webpack 打包優(yōu)化

關(guān)鍵詞：dll、多線程...

11、你認(rèn)為 webpack 哪里打包慢

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

五、整體感受

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

網(wǎng)易面經(jīng)

網(wǎng)易我是沒有筆試，某部門直接打電話說面試的，說是補(bǔ)招

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

一面也是個(gè)小姐姐，一本正經(jīng)的

1、mobx、redux 區(qū)別

2、react diff 算法

關(guān)鍵詞：節(jié)點(diǎn)查找，同級比較

3、react 事件機(jī)制

關(guān)鍵詞：事件代理，冒泡

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

5、react-redux 原理

關(guān)鍵詞：context，provider，帶上 dispatch

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

7、講下 router

關(guān)鍵詞：鏈接和視圖同步

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

9、http 緩存

10、前端安全有了解嗎

關(guān)鍵詞：xss，csrf

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

二、二面，現(xiàn)場面，50 分鐘

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

1、講講你用 three.js 做的這個(gè)項(xiàng)目

2、3D 的立體圖如何實(shí)現(xiàn)

關(guān)鍵詞：正方體形，球形

3、react 生命周期

4、componentWillMount 和 componentDidMount 的區(qū)別

關(guān)鍵詞：真實(shí) dom

5、react 學(xué)習(xí)中遇到的難點(diǎn)

6、H5 項(xiàng)目如何適配

關(guān)鍵詞：vw，rem，fastclick...

7、node 中間件機(jī)制

關(guān)鍵詞：請求截獲，掛上屬性

8、generator, yield。附加題：co 模塊如何實(shí)現(xiàn)

關(guān)鍵詞：線程讓權(quán)，狀態(tài)機(jī)

9、xss 及防御

關(guān)鍵詞：儲存型、反射型、dom 型

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

三、三面，現(xiàn)場面，30 分鐘

由于二面直接過了，二面的面試內(nèi)容還沒有上傳上去（因?yàn)槭乾F(xiàn)場），三面的面試官同樣也沒有準(zhǔn)備，像是 hr 臨時(shí)拉上去的，看了簡歷一分鐘才開始。面試過程中還不停用手機(jī)催促趕緊發(fā)來一、二面內(nèi)容。所以也沒問些啥

1、mobx、redux 區(qū)別

2、H5 項(xiàng)目都干了些啥

3、做的項(xiàng)目流程是怎樣的

4、如何規(guī)劃一個(gè)項(xiàng)目功能

5、印象深刻的 eslint 規(guī)則

6、react 15 16 的區(qū)別

關(guān)鍵詞：鉤子，移除模塊，createProtal...

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

四、整體感受

網(wǎng)易整體面試難度還是有的，就是現(xiàn)場面處理的不是很好。作為死忠粉的我還是要說一句，可能確實(shí)是因?yàn)槊嬖嚬偬α?#xff0c;三面的面試官說面了我馬上就急著有事去做。另外在現(xiàn)場等待時(shí)，網(wǎng)易的小哥哥小姐姐們也很養(yǎng)眼，顏值在線。嗯，就扳回到這吧

美團(tuán)面經(jīng)

由于美團(tuán)是去年秋招拿的 offer，當(dāng)時(shí)覺得自己還是很菜就沒發(fā)了，能想到多少是多少吧

1、講講 promise

關(guān)鍵詞：promise A+

2、防抖和節(jié)流

3、flex 布局

關(guān)鍵詞：justify-content, align-items, basic, shrink, grow

4、xhr，fetch，axios 的區(qū)別

5、用 promise 實(shí)現(xiàn)一個(gè)請求超時(shí)功能

關(guān)鍵詞：promise.then 與 setTimeout 并行

6、three.js 如何創(chuàng)建一個(gè) mesh

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

8、哪些常用排序算法，大概如何實(shí)現(xiàn)

小技巧

當(dāng)面試官問，有什么問題問我時(shí)，這兩個(gè)問題我通常是必問的

1、如果我很有幸來到了 XX 公司，作為實(shí)習(xí)生 / 應(yīng)屆生的我，公司會有怎樣的安排

像面試官表現(xiàn)你心中的渴求和對這個(gè)公司的喜愛，順便聽下公司業(yè)務(wù)線自己喜不喜歡

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

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

最后

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。