你需要的2019春招前端面經。位元組跳動、網易、美團 offer

lawler61發表於2019-03-15
前端

你需要的前端面經

個人情況

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

部落格原文

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

位元組跳動面經

一、筆試，2 個小時

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

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

關鍵詞：訂閱-釋出模式

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

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

關鍵詞：正數、負數、0

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

  2. 給一段文字，將文字陣列化，示例如下：

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...

  1. http 常用的狀態碼和使用場景

關鍵詞：1x - 5x

  1. http 快取

關鍵詞：強緩和協商快取

  1. http2

關鍵詞：通道複用，server push

  1. 來寫寫程式碼，好勒

  • 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');
複製程式碼
  • 實現函式能夠深度克隆任何基本型別。附加題：實現物件中巢狀陣列，陣列中巢狀物件
  1. 前端效能優化

關鍵詞：html，js，伺服器

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

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

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

  1. 講講訂閱-釋出模式，有幾種實現方式

關鍵詞：listener、Object.defineProperty

  1. 事件流

  2. 事件是如何實現的

關鍵詞：訂閱-釋出模式

  1. mobx 實現原理

關鍵詞：Object.defineProperty，自定義資料型別提供操作 api

  1. 講講 redux 及其原理

關鍵詞：釋出-訂閱模式 + reducer 純函式管理

  1. react 生命週期

  2. diff 原理，key 如何使用

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

  1. setState 是否非同步，為什麼。如果連續 setState 5 次，react 如何處理

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

  1. 來寫寫程式碼
  • 實現這麼一個類可以完成如下輸出（可以不用到類中的函式）
  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
複製程式碼
  1. 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; 會出現什麼情況

  1. CDN 原理

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

  1. 來寫寫程式碼
  • 順序傳送 4 個請求 a，b，c，d，要求按照順序輸出，即如果先返回 b，則不輸出，再返回 a，輸出 a，b
  1. V8 記憶體回收機制

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

  1. webpack 打包優化

關鍵詞：dll、多執行緒...

  1. 你認為 webpack 哪裡打包慢

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

五、整體感受

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

網易面經

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

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

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

  1. mobx、redux 區別

  2. react diff 演算法

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

  1. react 事件機制

關鍵詞：事件代理，冒泡

  1. 原生事件哪些不冒泡，react 如何處理

  2. react-redux 原理

關鍵詞：context，provider，帶上 dispatch

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

  2. 講下 router

關鍵詞：連結和檢視同步

  1. react 15 16 有哪些鉤子不同

  2. http 快取

  3. 前端安全有了解嗎

關鍵詞：xss，csrf

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

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

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

  1. 講講你用 three.js 做的這個專案

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

關鍵詞：正方體形，球形

  1. react 生命週期

  2. componentWillMount 和 componentDidMount 的區別

關鍵詞：真實 dom

  1. react 學習中遇到的難點

  2. H5 專案如何適配

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

  1. node 中介軟體機制

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

  1. generator, yield。附加題：co 模組如何實現

關鍵詞：執行緒讓權，狀態機

  1. xss 及防禦

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

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

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

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

  1. mobx、redux 區別

  2. H5 專案都幹了些啥

  3. 做的專案流程是怎樣的

  4. 如何規劃一個專案功能

  5. 印象深刻的 eslint 規則

  6. react 15 16 的區別

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

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

四、整體感受

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

美團面經

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

  1. 講講 promise

關鍵詞：promise A+

  1. 防抖和節流

  2. flex 佈局

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

  1. xhr，fetch，axios 的區別

  2. 用 promise 實現一個請求超時功能

關鍵詞：promise.then 與 setTimeout 並行

  1. three.js 如何建立一個 mesh

  2. 講講你瞭解的 three.js 原理

  3. 哪些常用排序演算法，大概如何實現

小技巧

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

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

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

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

注意！不是讓你問 “面試官呀，你覺得我面的怎麼樣啊，能過不啊”。而是詢問就他的工作經驗而言，作為一個實習生，自己哪些地方不足，有待加強的地方，無關乎面試結果。但是通過面試官的回答你還是可以大致判斷出你給他留下的印象，以及通過的可能性 例如：

  1. 位元組跳動二面面試官回答的：嗯，你基礎還是可以，程式碼弱了點。

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

  1. 位元組跳動三面面試官：你看的東西確實很多，但還是要注重實踐。

可以看出還是有過的可能性

最後

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

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

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

相關文章