前端面試總結（at, md）

引入

面試過去了這麼久，把八月份面試題和總結髮一下吧，雖然年底大家可能都不換工作~ 還是可以看看的。

關於面試，引用葉老溼的一句話。你的簡歷是自己工作的答卷，專案經歷是你給面試官出的考綱。所以，我的面試一定是與我的簡歷、工作經歷相關的，一些面試題並不一定適用於任何人，但是你可以從中瞭解他們考察的點，以及側重點。基礎知識可以查漏補缺。

原文連結

moka

一家小型創業公司。因為同事有去面過的，他說面試感覺挺 diao 的，我就想去試一下啦，拿它先熱熱身，就從boss上投了簡歷。

一輪

• 用 setTimeout 實現 setInterval，可不必關心返回值的型別。

  我聽錯了條件，我以為要注意返回值的型別必須跟原生的一樣，也就是返回一個 number，並可以 clear。無清除定時器功能的馬上就寫出來了，但是加清除定時器，還有返回值的問題，就費了半天勁... 也沒弄明白。面試官比較著急了，跟我溝通的時候，我才知道返回值不一定非要跟原生的一樣。

• 給了一個栗子，結合 pdf.js 的示例程式碼，找出這個栗子中為什麼解析度很低。主要是看你通過除錯去解決問題的能力。

• 然後就各種結合專案各種問唄，如何解決問題的，如何團隊協作溝通的。

• 還給了我一個題，讓我回去用 React 實現一個群組的 CheckBox，其實最後看就是 treeselect 的雛形啊。我的實現

二面

• 自我介紹
• 最近做的一個專案，其中的難點，過程。
• 最近做沒做過技術調研，我撿我瞭解的說，比如redux和mobx的區別。
• 做技術分享的時候會關注哪幾個點， 答： 它的實現原理，簡單的一張圖。一個簡單的demo引入，並看一些實現。充分表現它的優勢，然後跟現有的技術棧是否能結合，快速上手。有什麼缺陷。
• 在第一家公司有沒有記憶深刻的專案，經歷。專案的話就是最開始的時候，讓我自己寫一個頁面的時候，在一週之內搞完。。有一個特效是在輪播圖上加放大鏡，用swiper和自己寫的放大鏡。當時各種努力工作終於把這個功能做完，但是忽略了相容性的問題。在ie8,9 是無法滾動的。然後立馬切換到另一個slide.js，替換上之後放大鏡失效了。當時好像是外掛內部阻止了冒泡行為，我那個放大鏡取不到事件了。 因為已經到deadline了，通過我們的leader跟運營人員溝通，先不要這個功能了。就上了。後來查的時候，swiper2的相容性比較好，ie8.
• 個人的缺點 。技術上就是還是比較low， 然後就是個人的毅力感覺一般，但是最近健身感覺自己很不錯。
• 怎麼算是分散式的應用呢，屬於自己挖坑。
• 問了我好多不是技術“點”的問題，都是大的面，細節很少。記不清了。

三四面

就是 hr 和 ceo 了，就是問一些離職原因，跟公司價值觀方面的問題了。

總結

無論是一面的 pdf，讓我實現一個功能，還是二面的問題，都是偏重於專案實戰的。他們想要的是入職就能幹活的人，先能負責某塊開發任務。並且在獨立解決問題，團隊分享方面有所表現。

騰訊 （omg）

一面

• 平常開發怎麼設計 react 元件的。比如 container 元件，業務元件等等的。
• 手寫一個觀察者，釋出訂閱模式。
• 什麼是函式式，跟物件導向有什麼區別，因為我簡歷寫了正在學習 fp。
• 科裡化，寫一個
• cache-control，http-only
• url輸入到伺服器中間發生
• redux原始碼
• vue跟angular像不像
• vue跟react的模板渲染分別是怎麼做的
• 實現垂直水平居中

二面

• react 元件的結構，其實是問元件例項物件的結構，問題沒理解。我說在 children 裡就能看到。他問是嗎，是什麼樣的，你平常應該用過 children 啊，應該知道啊。我推測 children 是陣列，因為有 children.map 方法。他又問一定是嗎。

  這個問題上來就暴露了我對這些細節是沒有關注的，而他期望的是，你用 React，連它的例項都沒看過，children 可能是一個，可能是多個也不清楚。

• 那我再問一個特別簡單的問題，元件之間的通訊，比如父到子，子到父。再說一個兄弟元件怎麼通訊，巢狀了好多層呢？

  巢狀多層的他直接說有好幾種方法，你隨便說幾種吧。我從來木有總結過，整個人有點懵逼，也沒有回答好。後來整理了一下 React元件之間的通訊

• 再問一個稍微有難度的，元件的 state 巢狀多層的時候，我要讓最裡面那個 state 變化，怎麼做。我開始沒理解這是啥意思，他解釋說 state 是 { a: { b: { c: { d: 1 } } } 這樣，你 setState 的時候，怎麼改屬性 d 的。我說一層一層的找進去，setState 新物件。他又說那幾層是可以的，假如說一百層呢，也這樣嗎？我就懵逼了。

  他說 react helper裡面有個 immutable 的庫，就是用來處理這種情況的。

  immutable 我是知道的，但是我瞭解的是通常處理不可變資料的。後來查了一下，應該是這種操作。

  import { formJS } from 'immutable';
  const obj1 = { a: { b: { c: { d: 1 } } } }
  const obj2 = Immutable.fromJS(obj1).updateIn(['a', 'b', 'c', 'd'], value => value + 1)
  console.log(obj2.toJS); //{ a: { b: { c: { d: 2 } } } }
  
  複製程式碼

• 你簡歷上說你看過 redux 的原始碼，簡單說一下吧。 終於認可了我一次，說這個確實看過，能說出來。我有點尷尬了。

• 你說你讀過 《深入淺出 nodejs》，那你在專案中用過 node 嗎。

• 移動端做過嗎，適配問題。750px 的設計稿，你怎麼做適配，給幾種方案。

• rem的原理是什麼。這個答的也不好

• 然後就是讓我問了一些問題，還跟我說你工作才一兩年，你要的這個薪資肯定給不到，騰訊卡工作年限很嚴格，評級方面。最後就是現在不會直接給你面試結果，他們會橫向比較幾個候選人。

總結

騰訊面試的感覺就是，沒有那麼正式，都是部門的技術直接聯絡的你，然後二面就是部門負責人了，決定了是否入職。二面給我的感覺就是，他從 React 入手問一些基礎的問題（一些需要留心注意的）。如果沒有注意這些點，沒有總結，或者看過類似的總結文章，是很難有條理的回答出來的。其實我不太喜歡他這種，“我覺得很簡單... 你就應該會的” 的方式。但是這次我發現了自己的一個問題，就是面試的時候愛說一些瞭解的名詞，但是實際沒用過，恰好這個面試官都比較深入瞭解，也比較反感，他認為你這是 “不懂裝懂”。所以面大公司，不會的還是儘量要說不會，不要犯了面小公司的錯誤。自己也確實沒有做到注意總結，瞭解也確實比較淺顯，為自己以後的工作學習敲響警鐘。

阿里 （天貓）

一面

由於一面是電話面試，主要問了好多專案的問題，如何解決問題的。

• 比如問其中一個專案，查詢多欄位對應處理的問題，sql語句怎麼拼的，你的自定義配置是怎麼回事。
• session 和 cookie 的區別
• 使用 redux 和 mobx 的區別
• 什麼是 bfc
• node瞭解多少，用過嗎
• 演算法怎麼樣
• 好多問題，有點忘了，就是各種知識點... 其實百分之八九十能答出來，他也覺得不錯，讓我後面好好準備，架構方面，原理方面。

二面

面對面

• 介紹一下你的工作歷程（經驗）
• 我們找一個產品或者專案具體聊聊，讓我自己說。
• 介紹一下專案，技術棧，我是不會問的。
• 你用過 vue, react。你覺得他們有什麼區別。
• 說一下你是怎麼用的 redux
• 我自己提到了通常放在 container，他問了一個 connect 怎麼做到注入 state 的。我就說 connect 是一個高階元件，注入進來的 store，通過 state 維護？他又問那是怎麼實時 render 的？我說 connect 裡面應該有 監聽 store 的 changes 吧。最後就說沒看過 react-redux 的原始碼，只看過 redux 的原始碼。
• 看了我的一篇部落格，問了一個 this.children 是例項還是 class
• react router 的 hash ，history api 有什麼區別，我說了一些表層的區別，url 的不同，實現的原理不同。他繼續問還有什麼內部的不同嗎，我就說不了解了。
• mobile 端有接觸嗎，我說做的不多，主要還是 pc 端吧，我說你可以提問。問了一個viewport的，如果 width=device-width，iphone6 上頁面寬是多少，plus 是多少。如果 viewport 裡設為 width=375，plus上會縮小還是放大。

總結

讓我自己去聊專案，去考察我的組織、表達能力，以及溝通能力。而且這也最大程度上能瞭解到，關於這個專案，你自己思考了多少，主導程度。然後考察主要使用的技術棧，瞭解的深度如何。然後就是他們業務常用的點。剛面完，自己感覺其實還可以，因為都能回答出來，但是可能深度還不夠吧。天貓的要求還是比較高的，而且面試官是從杭州過來專門面試的，也有很多候選人同時面試，只能說明自己在這裡面還不夠出色，不能脫穎而出。

滴滴

一面

• 簡單介紹一下自己
• 上來就是一個陣列的建構函式上提供了什麼方法，然後我就一頓說，副作用的，增刪改的，map的
• indexOf和findIndex的區別，我說沒用過 findIndex
• 寫了一道題，是關於作用域的題。

  function fun(n, o) {
    console.log(o);
    return {
      fun: function(m) {
        return fun(m, n);
      }
    }
  }
  fun(0).fun(1).fun(2);
  let fn = fun(0).fun(1).fun;
  fn(2);
  fn(3);
  複製程式碼

  這種題好好看看一般能答出來。
• react 中的某個元件巢狀很深，怎麼傳遞 props，很不錯，之前整理過。
• redux 和 mobx 的區別。我就從實現的原理，使用方式，結合 react 等方面闡述了一下。
• 你剛提到了 observer，這覺得它們是怎麼實現的。redux（listerners），mobx（get，set） 的方式都說了一下。
• observer 是什麼模式。
• 還了解其他的設計模式嗎。我他媽一激動把物件導向說出來了，這當然不是設計模式了，是程式設計思維。
• js 模擬一個併發
• 實現兩個 setTimeOut之後再做什麼。1.原生實現一個序列的佇列。2. 用 promise 去封裝一下，然後用 promise.all/generator/async.
• 演算法，問我快速排序，說一下它的原理，我說忘了。
• 問 es6 主要用那些新語法，我說了幾個，箭頭函式，解構賦值，const 宣告等等... 他說最常用的不應該是 class 嗎...
• es5 實現一個繼承，我差點給他寫四五個。剛學 js 的時候整理過 link
• es6 怎麼判斷一個陣列？ isArray 啊。 [].isArray ? 我說 Array.isArray()，類上的靜態方法。
• css 清除浮動用什麼，我說就兩種，一個是 css 樹形 clear，一個觸發 bfc。
• css3 動畫有什麼，怎麼用。就是考察 transition，translate，animation 啥的。
• less 中的 & 代表什麼意思。這個倒沒關注打包後的程式碼，想了一下應該是上級作用域的選擇器...
• 自動化工具用什麼，我說打包的話就用 webpack，其中又有各種配置，預處理，編譯啥的。配置檔案自己寫過嗎，我說寫過。
• 搭建過 react 專案的架子嗎，當然。
• 最後一個問題是， function fun() {} 的原型指向哪裡 ？ Function.prototype。

二面

• 順了一下我的履歷，問這次為什麼打算跳槽，再上家公司時間也不長，期待一個什麼樣的工作。我說希望有一個技術都比我牛逼的團隊。
• 假如說團隊裡的大部分人技術都不如你，怎麼辦。我說那也挺好，我可以發揮我的長處，做一個技術 leader 的角色。又問那如果公司不給你一個 leader 的級別呢... 我就說那也挺好的，你可以成為一個重要的角色，不可或缺的人。
• 如果你作為一個 leader，你需要什麼樣的下屬。 我說一個不可或缺的人，一兩個技術比較好的。其他不需要那麼技術好，只要能勝任工作就行了。
• 你覺得你是容易相處的人嗎
• 看你是資訊與計算科學的，演算法應該不錯，手寫一下快速排序吧。?我說忘了，我可以寫一個冒泡或者插入，然後就寫了一個冒泡。
• 怎麼判斷一個物件是 object，還是 array。用 Object.prototype.toString.call() 吧。
• 寫一個節流的函式，我之前剛好看了，寫了這麼一個東西。

 
  const throttle = wait => fn => {
  var timer;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => timer = null, wait);
      return fn(...args);
    }
  }
}
複製程式碼

他說，怎麼沒有清定時器。我說節流函式分兩種的吧，舉個例子，我這個是按鈕點選後，500ms 後的點選才會執行。還有一種是兩個點選間隔 500ms 之內，只執行一次，防止連續快速點選。後面的沒寫，大概是這樣

const throttle = wait => fn => {
  var timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, wait)
  }
}
複製程式碼

• 什麼是科裡化，怎麼實現一個 curry。curry 利用了什麼特性，他說是其實就是閉包

• 設計模式瞭解嗎？說一下觀察者，我說我簡單寫一個實現吧。就寫了一下。

• react 的生命週期介紹一下

• 現在的薪資

• 你有什麼問題

  我問了一個很扯的問題，我能給團隊來帶什麼？面試官說，不能說帶來什麼吧。一些本來就存在的問題，很難說加入一個人就帶來質的改變什麼的。最主要的還是能夠獨當一面吧，能夠負責一個模組。

三面

• 前兩面的感覺如何。
• 有沒有什麼遺憾的地方？就是前兩面沒大好的地方。
• 15年畢業，你的第一家公司是 xxx，在那主要收穫了什麼？
• 我提到了不斷自驅，學習。
• 最近解決的一個棘手的問題，前端拼 sql
• react 的生命週期
• 現在的薪資，期望薪資
• 你有什麼問題，問了一下面試官的職位，聊團隊，以及我加入的專案要做的東西。
• 最後，玩遊戲嗎，不玩。打籃球嗎，不打。在健身

總結

來滴滴面試的時候，很自信，所以自我感覺良好。一面是特別注重基礎，各個知識點的問答，想起什麼來問什麼。看你對基礎的掌握情況吧。二面我感覺更多的在看你的情商如何了，當然我的情商不是很高，面試官最後也說了，如果我更 open 一些，會更好。說我的簡歷上也能看出自己嘗試了很多東西，可以去突破一下。當然也問了一些技術的問題。三面是團隊的前端負責人，從價值觀，個人的成長規劃，解決問題的能力去考察，也瞭解了一下期望薪資。最後的問題就是看有沒有共同的愛好吧...

相對 tmall，tx 來說，didi 考察基礎，但是又沒那麼深入，主要是對應聘者的級別要求不一樣吧。tmall 的社招不僅是看你幹活能力，更多的是你會不會去 push 一些東西，其實就是找亮點，你一定要有積極性，比如說推動某個技術在專案的應用，落地。做出一些好的工具，做一些深入的研究，對業務帶來了積極影響。

騰訊 （興趣閱讀）

只有一面

• 各種專案各種問，問的特別細，每一個地方的實現，問你的思考 ?，以及怎麼做規劃排期，怎麼去處理 bug 等等。

  這塊就平常自己專案中，做的足夠細緻就行了，有時候你提到一個點，他都會對這個點進行深挖，看你對專案的細節是否足夠了解，另外還有專案整體上的瞭解。

• mobx redux 的區別，從簡歷上挖掘出的點，去看你是否總結。

  mobx 我做過簡單的總結。

• 自己做過的前端優化。經典的面試題，回答的點還是很多的，從 web 來說，從[瀏覽器] 發起一個 [請求]，伺服器[返回]，[頁面渲染]，[css渲染]，都有的說，我也有簡單的總結

• react 和 vue 有什麼區別啊，特別注重考察個人的總結；

• 對前端安全的認識

• 劫持遇到過嗎，主要有什麼。我說了一個 dns 劫持。

• webpack都是怎麼用的

• webpack.dll ？ context這個引數是幹嘛的，我忘了...

• react的效能優化有沒有了解過啊，你都是怎麼做優化的。 說實話，react 的優化我很少做 - -，通常 react 的 diff-dom 帶來的便利很少關注它的效能問題。不過面試我當然不會說這個，就說了幾個點，shouldUpdate，pureComponent，immutable 等等的。不過他似乎不是很滿意，繼續問我有沒有更深入的，全面的優化。我就說侷限於此了。

• 問我 angular 用的怎麼樣，我說專案中沒用過。

• 最後聊了一些他們日常的工作，主要是後臺管理，運營去推送閱讀等。專案目前是 angular 做的，後期會像 React 轉。

總結

自己覺得能回答上來個 70% 左右，他最終告訴我，今天的表現能打個七八分吧（滿分十分）。然後他就去跟他的 leader 溝通了，回來也沒直接拒絕我，就給了我一些建議，要對專案整體的把控多一些，專案的思考，橫向多去了解，跟你配合的同學（rd ?）做了哪些工作，還說不過也不著急，畢竟你還年輕。黑人問號臉。

自己的確沒有去帶整個專案的經歷，更多的是個人負責一個模組，雖然對其他人的工作也有了解，技術上的架構也略知一二，不過還是平常的思維有侷限性吧，對整體的思考太少，不過我覺得這雖然是今後發展的方向，但是目前還是專精某些點，縱向多做一些深入工作吧。

美團 （商超）

一面

• 從html，css開始
• 瞭解盒模型嗎，現在給定一個 width：200px的盒子，他的width，padding，border，margin都是怎樣的
• html的標籤分哪幾種，列舉一些
• img是哪種？ 我回答行內。
• 然後他就問一個img和一個span，裡面一段文字，怎麼排列。我說上下，img不是行內嗎，怎麼會上下。。
• 如果實現文字環繞排列 img，應該怎麼做。圖片 float
• 這個圖片不定寬高，怎麼實現在盒子內垂直水平居中。
  1. flex 2. transform: translate(-50%, -50%) 3. display:table-cell
• 說一下float這個屬性
• 你提到了bfc，有兩個盒子，margin重疊的問題，怎麼解決
• 有一個input，怎麼統計他的輸入 0/50，除了事件還能怎麼統計
• css3瞭解嗎，主要用什麼，animation，transition，translate，transform 這四個是幹嘛的
• 實現一個進度條載入，從0 到100
• 'use strict' 是怎麼解析的
• setTimeout，setInterval。它的引數，如果在setInterval裡5ms不斷呼叫，會有什麼問題嗎
• setImmediate 和Process.nextTick 的區別
• 寫一個檢測資料型別的方法。直接寫了個 Object 的 toString
• js 裡面的資料型別，把布林忘了- -
• 什麼是柯理化啊
• jquery 用過嗎，
• https 瞭解嗎
• https 一定安全嗎，然後怎麼解決呢。實現一個站點從 http 到 https 的遷移
• localstorage 的跨域問題，最大儲存是多少，超出了會怎麼辦
• 跟 cookie 的區別
• sessionStorage 的區別
• http的狀態碼，200，500，301，302，304
• 一個url從瀏覽器輸入到解析經歷了什麼
• 你提到了三次握手，四次揮手是幹嘛的
• 忘了...

二面

• 各種優化
• 之前做的專案大概介紹一下，技術棧等等
• 各種專案裡的問題
• 有沒有什麼優化的經驗，方案。不侷限於打包。
• webpack 打包的優化
• 最近專案解決的一個技術難點
• 最近在學什麼，對什麼感興趣
• 最近做的最成功的一次分享是什麼
• 是不是熱衷於團建。
• 現在已有 getData(id, callback) 方法，根據 id 發一個請求，並把 data 傳給 callback。你寫一個getDataCache的方法，實現相同的id，只發一次請求，即資料可以被快取起來。
• 說一下http快取，其實就那幾種。
• 你們用的哪種，我說 304 多一些，為什麼不用 200，效率方面 200 更高一些啊。我說的確，我們也是通過 hash 給檔案打版本號，結合 maxage，讓瀏覽器判斷要不要重新請求的。
• 怎麼學習前端知識啊
• 最近在看什麼書
• 除了寫blog，還有什麼其他的，工作之外做的
• 還有幾個忘了

三面

三面是一個技術總監，感覺人挺不錯的。

• 看你之前都是一年一跳槽，是什麼考慮呢
• 為什麼要從事前端呢
• 看你學的是數學，為什麼最後學前端。為什麼上大學的時候沒好好學
• 對美團怎麼看
• 問你一個演算法題 規律是這樣的：

A B C D ... Z AA AB AC ... AZ BA BB ... CA ... ZA ... ZZ AAA AAB ...
對應：
1 2 3 4 ... 26 27  
複製程式碼

做一個程式，讓輸入一個數字，輸出具體的值。比如輸入 27，輸出 AA。這個問題我也描述不太清，其實就是一個類似進位制轉化的問題。

• '192.168.0.1'把它轉化成位數。進位制的偏移問題

• 你覺得自己有什麼缺點

• 你覺得你之前做的一件最酷的事情是什麼

• 你有什麼想問的。大概瞭解了一下美團超市是幹嘛的，介紹的時候還問，想不想做我們的這個商超，感興趣嗎。當然說感興趣

總結

第一面特別細，之前很少問到的 html，css，還有 jQuery，都問了。這些地方還是多少能記著一些的，能回答個差不多。並沒有問你專案中使用的框架，可能關注的點不同，他們更關注基礎吧。二面其實就關注效能優化比較多了，還問了很多學習，分享方面的，估計是想看你是不是熱愛學習啊，學習方法，喜歡分享的話能給團隊帶來新鮮度，大部分團隊都是有每週的分享的。他問的問題我都是比較喜歡的，開放性的話題更多一些，你能更好的展現自己。三面問了一些基礎的計算機問題，這些是我不擅長的，不過大概說了一下思路，並用 js 去實現。還有很多就是面試常問的問題啦，面試前一定要考慮，做準備。比如說做過最酷的一件事，無論是什麼事，只要你自己覺得酷就行了，個性面試官。總結下來就是，對這個部門的面試感覺，覺得不錯，進去做的工作是移動端，這也是我之前很少做的，也不用什麼 react。這個部門是一個新成立的，團隊也是從 0 開始，這種團隊也有好處也有壞處，好處是大家都是新人，專案也是全新的，適合你發揮。不好處就是太新了，加班是肯定的，壓力也會大一些，你長時間都會處於業務中。

最後

硬廣。我們團隊在招高階前端開發，大部門是平臺技術部下的平臺前端，我們負責的方向是專快司乘運營等大型管理系統，會用 React 是硬性條件，期待有 node 開發經驗，基礎好，愛學習是基本，要有積極主動的推動能力。另外，不喜歡做 pc，不用 react 的，或者有其他喜歡的部門，也可以推薦。先發郵件帶簡歷聯絡我吧。

郵箱：sunyongjian0108@gmail.com