前端面試總結（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