你須要的2019春招前端面經。字節跳動、網易、美團 offer

你須要的前端面經

我的狀況

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

博客原文

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

字節跳動面經

1、筆試，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]
複製代碼

2、一面，視頻面，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，服務器

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

3、二面，視頻面，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); // 輸入: 1
  data.$on("a", (newValue, oldValue) => {
    console.log(newValue, oldValue);
  });
  data.a = 2; // 輸入: 2 1
複製代碼

10. new 一個構造函數發生了什麼

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

我的感覺：二面明顯難度加大許多，一面面基礎，二面面框架，就連手寫代碼都是 Vue 的基本實現原理。覺得會涼，傷心很久

4、三面，視頻面，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，沒有準備這方面，還好其餘問題大部分答上了，扳回一城吧

5、總體感覺

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

網易面經

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

1、一面，視頻面，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

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

2、二面，現場面，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 型

我的感覺：現場面等了很久，覺得本身走錯房間了，我想若是面試官不稍微解釋下爲啥遲到我就直接不面了。面試官也沒有提早準備，拿着簡歷看了一分多鐘纔開始

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

因爲二面直接過了，二面的面試內容尚未上傳上去（由於是現場），三面的面試官一樣也沒有準備，像是 hr 臨時拉上去的，看了簡歷一分鐘纔開始。面試過程當中還不停用手機催促趕忙發來1、二面內容。因此也沒問些啥

1. mobx、redux 區別

2. H5 項目都幹了些啥

3. 作的項目流程是怎樣的

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

5. 印象深入的 eslint 規則

6. react 15 16 的區別

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

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

4、總體感覺

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

美團面經

因爲美團是去年秋招拿的 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. 字節跳動二面面試官回答的：嗯，你基礎仍是能夠，代碼弱了點。

有些面試官會答的很全面，有些則是一句帶過。從這裏話裏是能看出，我是有必定過的可能性

2. 字節跳動三面面試官：你看的東西確實不少，但仍是要注重實踐。

能夠看出仍是有過的可能性

最後

1. 歡迎關注我的 github：github.com/lawler61/bl…，在那上面會實時更新。近期也會抽時間把題目的解答放上去。歡迎你們來一塊兒討論，共同進步

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

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