前端面試總結（at, md）

時間 2019-11-06

標籤前端面試總結欄目快樂工作简体版

原文原文鏈接

引入

面試過去了這麼久，把八月份面試題和總結髮一下吧，雖然年末你們可能都不換工做~ 仍是能夠看看的。javascript

關於面試，引用葉老溼的一句話。你的簡歷是本身工做的答卷，項目經歷是你給面試官出的考綱。因此，個人面試必定是與個人簡歷、工做經歷相關的，一些面試題並不必定適用於任何人，可是你能夠從中瞭解他們考察的點，以及側重點。基礎知識能夠查漏補缺。css

原文連接html

moka

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

一輪

用 setTimeout 實現 setInterval，可沒必要關心返回值的類型。vue

我聽錯了條件，我覺得要注意返回值的類型必須跟原生的同樣，也就是返回一個 number，並能夠 clear。無清除定時器功能的立刻就寫出來了，可是加清除定時器，還有返回值的問題，就費了半天勁... 也沒弄明白。面試官比較着急了，跟我溝通的時候，我才知道返回值不必定非要跟原生的同樣。java
給了一個栗子，結合 pdf.js 的示例代碼，找出這個栗子中爲何分辨率很低。主要是看你經過調試去解決問題的能力。node
而後就各類結合項目各類問唄，如何解決問題的，如何團隊協做溝通的。react
還給了我一個題，讓我回去用 React 實現一個羣組的 CheckBox，其實最後看就是 treeselect 的雛形啊。個人實現jquery

二面

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

三四面

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

總結

不管是一面的 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