2018 年初連續(xù)面試了十多家初級前端崗位，每次面試結(jié)束之后都會習(xí)慣性地記下來被問到的問題。最后歸納總結(jié)了一些題目和自己的經(jīng)驗，公布出來希望對入門新手有一點(diǎn)幫助。因為個人水平有限，所以遇到的都是一些很初級的問題，公開發(fā)表權(quán)當(dāng)拋磚引玉。

首先講講面試流程。對于沒有內(nèi)推的人來說，大部分公司的流程是首先自主投遞簡歷，通過初篩之后，有的公司會進(jìn)行一輪電話面試，OK 的話會邀請去公司做三輪 onsite 面試，一輪考察技術(shù)基礎(chǔ)，二輪boss面，前兩輪聊的不錯的話就可以和HR聊了。

怎么拿面試？

如果有內(nèi)推的話肯定是最好的，有人作背書至少可以拿到一個直接 onsite 的機(jī)會。當(dāng)然，我也知道剛畢業(yè)的學(xué)生或者需要換一個新的工作環(huán)境的小伙伴們可能沒有那么容易找到內(nèi)推機(jī)會。我也體會過瘋狂投簡歷但是一次面試都拿不到的感受，所以需要內(nèi)推的小伙伴可以拉到文章最后看看我們的簡介，直接私信發(fā)給我你的簡歷，我來幫你內(nèi)推。

沒有的話就網(wǎng)上自己投遞，我在拉勾上投了大約一百份簡歷，大約每6，7次投遞會拿到一個面試，效率也算很高了。

另一個拿面試的辦法是在互聯(lián)網(wǎng)上公開自己的簡歷，讓HR或者獵頭來找你。即使是缺乏工作經(jīng)歷的菜鳥，也是有HR／獵頭主動聯(lián)系的，所以一定要好好寫你的簡歷！最好保證自己的簡歷在主流的互聯(lián)網(wǎng)招聘平臺上都能夠被搜索到，我在幾個平臺上都收到過HR主動發(fā)的面試邀請。

簡歷的重點(diǎn)是什么？

面試官看簡歷的時候一般會聊三個部分，第一是工作經(jīng)歷，第二是做過的項目，第三是精通／熟悉的技術(shù)。對于前兩個部分最好是先自己總結(jié)好，面對任何人都能夠很自然地說出來，不然現(xiàn)場邊想邊說很難表達(dá)好自己。對于初學(xué)者來說，項目經(jīng)歷這一欄一般會寫模仿過的網(wǎng)站。但最好有一個自己模仿過的組件，面試中被問到的幾率很高。而第三部分，自己簡歷上寫的精通技術(shù)，一定要在面試前系統(tǒng)地復(fù)習(xí)一遍，如果自己寫了精通，但是被人問到發(fā)現(xiàn)不會就尷尬了。

其他注意事項

首先，一定記得自己打印好簡歷隨身帶上！個人經(jīng)驗是，大約每3，4次面試會就有1次面試官是沒有準(zhǔn)備簡歷的，所以隨身帶簡歷還是很有必要的。另外如果你英語水平還過得去的話，英語簡歷請務(wù)必準(zhǔn)備，同時也準(zhǔn)備好一套英文的自我介紹。這么多次面試中，我三次被人要求作英文自我介紹，兩次拿出了英文簡歷，雖然比例并不高，但總是有備無患。

自己做過的項目要好好總結(jié)，最好要做到能現(xiàn)場在白紙上把源碼寫出來的程度。面試官很喜歡考察這方面的深度，這個方面很能體現(xiàn)出一個人的思考深度。如果只是簡單地引用了第三方的庫的話，連續(xù)問幾個 follow up 問題就會漏出馬腳。所以對于自己做過的項目，先試著自己總結(jié)一下，看自己理解的深度是否足夠。

每次面試結(jié)束，立即記下所有的問題，當(dāng)天回去查資料找到最好的答案，多作總結(jié)。初級崗位問來問去也就那么些東西，頭一天被問到的問題完全有可能第二天又被問到，其次這也是一個自我學(xué)習(xí)的好機(jī)會。當(dāng)然面試多了，遇到一些奇葩公司屬于正常現(xiàn)象，要習(xí)慣于被人拒，也要學(xué)會拒絕。

面試題歸納

JavaScript

• Event loop 是什么？這個問題問完了一般會補(bǔ)充下面幾個問題。
• 下面代碼的打印結(jié)果是什么？

setTimeout(function(){console.log(1)}, 0);

new Promise(function executor(resolve, reject){
  reject(false);
  for(var i=0; i<10000; i++){
    i === 9999 && resolve(true);
  }
  console.log(2);
}).then(function(){
    console.log(3);
  }, function(){
  console.log(4)});
console.log(5);

// 類似的題目還有很多，要能講出為什么是這個順序

• setTimeout(cb,0), callback 一定會在0秒之后執(zhí)行嗎？
• Promise 是什么？
• Promise 的 resolve 和 reject callback 會進(jìn)入 event queue 嗎？
• 閉包是什么？
• 閉包的好處和壞處是什么？
• 下列代碼的打印結(jié)果是什么？

(function(){
  var i = 3;
  while(i--){
    setTimeout(function(){
      console.log(i);
    }, 0);
  }
})();

• 如何用 prototype chain 實現(xiàn)繼承？一般會讓寫個例子。
• 如何 deep copy？
• JS 作用域？
• 作用域 follow-up，問輸出結(jié)果

var a = 1;
var obj = {
  a: 0,
  compute: function(){
    return this.a + a; 
  }
}

obj.compute();
var f = obj.compute;
f();

f.call({a: 2});

• Object.defineProperty() 了解嗎？
• Iterator 是什么？
• This 是啥？
• 如何改變 this？
• 串行 AJAX？
• 并行 AJAX？
• Hoisting 例題

var num = 0;

function f(){
  var num = num + 1;
}

f(); // output?

• if(!flag){console.log('hello')};, flag為哪些可能值時會打印hello？

  • null
  • undefined
  • 0
  • false
  • []
  • {}
  • ""

• 0 || "123" 結(jié)果是什么

• JS 有哪些基礎(chǔ)類型

• string.substring() vs string.slice()?

• 基礎(chǔ)類型 string 為什么可以調(diào)用 method？

• string 有哪些方法？

• Array.slice() vs Array.splice()?

• Array.pop, push, shift, unshift

• 函數(shù)節(jié)流是什么？

• 如何生成 0 到 n 之間不重復(fù)的隨機(jī)整數(shù)

• ES6 都有啥新東西？

• Node.js 為什么可以跑在后端？

• 如何判斷一個變量的數(shù)據(jù)類型？

• Map, Set 了解嗎？

• 如何自己實現(xiàn) setInterval 函數(shù)？

• 有一個數(shù)組，里面裝的都是單詞，如何將他們排序？

• 如何只用 NodeJS 原生 API 創(chuàng)建 server ？

• NodeJS middleware 寫過嗎?

• Fork, clone 和 exec 有什么不同?

CSS

• clear float / BFC
• Relative and absolute position
• 盒模型是啥
• 從里到外排序, height, paddding, border, margin 屬性
• 排序下列 selector: !important, inline style, id, class, attribute, tag
• CSS selector 性能排序: id, class, tag, attribute
• 水平居中？垂直居中？
• Bootstrap 有哪些優(yōu)勢？
• span 有寬高嗎？

DOM Manipulation

• 如何發(fā)出 AJAX request？
• 什么是跨域？
• 事件冒泡是什么？
• 事件委托是什么？
• 你自己工作中使用過事件委托嗎？
• 如何從一個 node 訪問所有 dom node?
• 如何找出一個 document 里面最常出現(xiàn)的 class ？
• 如何改變一個 dom element 寬度？
• 如何刪除一個 dom element？

Network

• TCP / IP 是什么？
• TCP 特性?
• 比較 local storage and cookie
• XSS and CSRF 是啥？如何防御？
• 常用性能優(yōu)化手段
• 前端工程化
• Restful API HTTP 有哪些 methods?
• Update request 能攜帶數(shù)據(jù)在 request body 嗎?
• Differnce between session and cookie?
• Status codes 都有啥?
• 如果服務(wù)器掛了怎么看 log？
• CDN 有了解嗎？
• Host 這個 Header 是干嘛的？
• keep-alive 這個 Header 是干嘛的？
• 用戶在瀏覽器中輸入 URL 之后發(fā)生了什么？

React Framework

• Component lify cycle
• Redux 是干嘛的？
• MVVM 是什么？
• Is React MVVM?
• HOC 自己寫過組件嗎
• 自己寫過哪些通用組件？
• shouldComponentUpdate 怎么用?
• controlled vs uncontrolled component?
• 讀過 React or redux 源碼嗎？
• RxJS?
• SSR？
• React 對比其他框架 ／ React 好處？
• 自己封裝過組件嗎？
• 自己寫過 HOC 嗎？
• 當(dāng) props 里調(diào)用的 Object 某一 value 發(fā)生改變，會出發(fā)rerender嗎？

Tools

• webpack 有啥缺點(diǎn)？
• webpack 你常用的loader？
• 自己寫過 webpack loader嗎？
• webpack loader 和 plugin 區(qū)別？
• gulp, grunt 會嗎
• 抓包用過嗎？
• Chrome devTools 會用嗎？

Algorithms & Data Structures

• DP?
• bubble sort
• selection sort
• merge sort
• quick sort
• 如何去除一個數(shù)組里面所有重復(fù)的元素？
• 找出一個排好序的數(shù)組中頭3個最小元素。例如：[1,2,2,3,3,3,4,5],返回[1,2,3]
• 找到3個最常用tag in a document
• Implement strStr(), 參見leetcode
• 如何找到一個 string a 里面所有的 substring b？
• Binary Tree Paths (見leetcode）
• Implement trie (leetcode 208)
• 36 車， 6車道，無計時器，如何找出6個最快的。

System Design

• 如何設(shè)計一個app，繪制UML圖，連接實現(xiàn)兩個框功能？

Java

• StringBuffer VS StringBuilder
• Abstraction, inheritance and polymorphism
• override vs overload
• interface vs abstraction class?
• multi-threading
• class loader

DB

• 哪些語句可以被 index 優(yōu)化？
• 優(yōu)先順序？[select][from][where][order by][group][having][limit]
• 如何選出滿足 xxx 條件的第二個 record？

OS

• 你知道哪些鎖？
• signal 是干啥的？
• read write lock? Mutex lock?

Misc

• 函數(shù)式編程是什么？你如何運(yùn)用在工作中的？
• Hash知道嗎？如何解決 collision？
• observer pattern 知道嗎？寫個例子。
• 如何知道當(dāng)前進(jìn)程 id？
• 如何找出3天前修改的文件？
• 頻繁查找一個大數(shù)組里面的obejct, 例如: [{}, {}...],如何提高效率？
• 一根不規(guī)則的繩子可以燒1個小時，你如何用它計時15分鐘？
• 小張是賣鞋的老板，一雙鞋進(jìn)貨20元，賣30元。客人給了50元，可小張沒零錢，所以把那50元拿去向鄰居換五張10元的，找回20元給客人。后來鄰居發(fā)現(xiàn)50元是假鈔，小張不得不賠鄰居50元。問小張共虧了多少錢？

Behaviroal

• 自我介紹（中／英）
• 你是如何理解前端的 ／ 好前端的特質(zhì) ／ 好前端需要哪些技能？
• 為什么選擇前端方向？
• 為什么離職？
• 工作中遇到的困難，怎么克服的？
• 你是如何學(xué)習(xí)新知識的？另一個問法，請給我介紹一個學(xué)習(xí)途徑。
• 業(yè)余時間喜歡干什么
• 同事加班，你工作完成了，你怎么辦？
• 在目前工作量大，已經(jīng)需要加班的情況下，還要不要做全面的測試？
• 最喜歡哪門課？
• 你的性格是怎么樣的？在團(tuán)隊中是什么角色？
• 期望薪資是多少，為什么？