如何經過前端面試

時間 2019-11-08

原文原文鏈接

本教程的目的是教你如何經過~~(個人)~~前端面試css

本文涵蓋了本人平常面試中常常問到的知識點, 面試對象爲2~10年工做經驗的前端工程師, 我始終認爲: 一個合格的前端工程師, 首先應該是一個合格的工程師, 故涉及到的內容不止於前端範疇, 甚至能夠說是全棧範疇了, 但願能夠給想得到提升的前端工程師一些幫助前端

本文的重點是列出值得思考的點, 而不是單純的羅列面試題目, 題目不會直接給出明確的答案, 部分題目自己就是開放性問題, 沒有固定答案, 但願你們能夠帶着思辨性思惟去閱讀vue

從上到下是一個大概的優先級順序, 越靠前的知識點, 面試評價佔比越高node

1. js基礎

js基礎問題通常是在整個面試過程當中穿插提問, 我我的並不會單獨集中提問這裏涉及到的問題, 一來這些問題能夠在面試溝通的字裏行間逐漸感覺到候選人的水平, 二來這些問題過於基礎, 默認來面試的人都應該已經會了, 重點提問會讓對方感受不被尊重(就像問一個數學系博士一元二次方程解法同樣滑稽), 但這並非說這些知識不那麼重要mysql

引用傳遞

引用傳遞是js基礎中最重要的幾個問題之一(若是這種問題不瞭解那這場面試基本就聊不下去了), 不熟悉引用傳遞這一特性的開發者會在代碼中埋下天坑, 這類隱藏bug極可能在測試階段矇混過關, 最終在線上爆發react

常規問題是:webpack

什麼是引用傳遞
什麼又是傳遞引用
什麼類型有這種行爲
什麼是包裝類型
怎麼從內存的角度解釋引用問題
什麼是深拷貝和淺拷貝
如何實現深拷貝
webworker之間傳遞數據是引用傳遞嗎

事件循環

事件循環不管在瀏覽器端仍是node場景, 都是最基礎的問題之一, 這一問題我會重點提問, 對事件循環不理解的開發者可能會寫出難以捉摸的bug, 或者濫用事件循環機制帶來性能損耗, 我遇到過一個候選人, 他遇到個棘手的問題最終包一層setTimeout 0 就解決了, 可是他本身也不明白爲何(這就很恐怖), 對於這一知識點, 合格的前端開發須要徹底明白事件循環的原理, 運做流程, 接觸過node開發的還應當知道node與瀏覽器中事件循環的差別, 對於高級一些的開發者, 則但願其對事件循環的設計作出一些評價, 例如: 爲何要區分microtask和macrotask, 這樣設計的目的是什麼?git

常規問題是:程序員

簡述瀏覽器/node的事件循環機制
什麼是 microtask 和 macrotask
瀏覽器環境下, 渲染dom會插在事件循環的哪個階段進行
setImmediate 和 setTimeout 的區別
Node.js 中 process.nextTick 的運行時機

做用域

做用域是寫任何代碼都須要考慮清楚的問題, 對做用域不熟悉的人, 每每會使用錯誤的方式寫出運行結果看似正確的代碼, 實際上潛藏的很大的隱患, 可能本身寫的模塊沒問題, 但實際上由於做用域的關係影響到了其餘的模塊卻不自知, 做用域的考察不會專門出題(由於不必並且題目很差設計), 但會夾在其餘題目內順帶考察es6

常規問題是:

什麼是變量提高
什麼是暫時性死區
什麼場景要使用閉包
let 與 var 的區別
try catch的做用域
什麼是詞法做用域

基本語法

語法沒什麼可說的, 須要面試者熟練掌握es6+的新語法特性, 瞭解新的數據類型(Map, Set, Symbol, WeakMap, WeakSet 等). Promise, Async/Await, 解構賦值, 擴展運算符, 箭頭函數這些極其經常使用的語法須要特別熟練, Generator, Reflect, Proxy, Class, Decorator等語法也要求會用.

常規問題是:

== 和 === 的區別
如何實現一個Promise
Promise/Async/Await中的錯誤處理
Class中的super方法的做用
箭頭函數中的this
const定義的對象中的值能夠修改嗎
rest運算符的使用場景
Set和數組的性能差別
WeakMap/WeakSet分別是什麼
如何編寫一個Decorator
如何實現一個相似Proxy的功能
什麼是Iterator
瞭解哪些TC39提案中的語法

代碼調試

開發者天天都在製造bug, 調試能力是影響開發者工做效率的重要因素, 我面試時會對調試能力有硬性要求, 不會使用調試工具的, 憑意念猜想碰運氣調試的選手必定會被掛掉, 正常開發者應當熟練使用chrome dev tool, 而且有嚴謹的邏輯思惟, 知道經過二分法, 控制變量法等方式快速定位問題

常規問題是:

簡述js中常見的錯誤類型
錯誤堆棧的查看方式
全局錯誤處理
如何使用斷點調試定位問題
如何排查內存泄漏問題
頁面白屏時間過長, 如何定位問題
如何判定一個問題是前端問題仍是後端問題
描述以前遇到過一個最棘手的bug, 如何解決的

2. 前端框架

當前時間點, 前端框架通常是指 vue/react/angular, 公司的技術棧總體偏向vue, 我面試的時候會稍微偏向提問vue的問題, 固然我本人是保持技術中立的, 面試者若是隻會react or angular, 也會對應換成react/angular的問題, 框架相關的面試問題傾向於底層原理, 框架實現的角度~~(畢竟用誰都會用)~~

框架使用

這一部分的問題一般是針對經驗較少的面試者, 校招, 外包面試或較初級的崗位面試會常常提到, 正常狀況下只涉及到vue和react, 國內開發者使用angular的不多, 面試遇到的很少, 這部分問題主要是考察面試者是否可以熟練使用框架開發前端應用, 是否能避免一些顯而易見的坑

常規問題是:

vue中計算屬性的做用
vue中$set的做用
vue中created與mounted的差別
vue如何實現自定義指令
vue如何實現一個下拉菜單組件
什麼是keep-alive組件
vuex使用方法
如何實現模塊按需加載
前端路由的常規用法
react setState何時是同步, 何時是異步
react shouldComponentUpdate的用法
react hoc使用場景
redux與vuex的區別
循環渲染中的key有什麼做用
數據中沒有惟一值字段怎麼指定key
如何作性能優化
prefetch preload

框架原理

正常的前端開發人員, 只會使用框架確定是不行的, 若是對框架的原理不瞭解, 會在不經意間踩到隱藏的坑, 熟悉框架原理也能幫助你更好的優化前端應用, 也能夠提高一我的的架構設計思惟能力, 前端面試中我會重點考察這一部分的能力, 這裏面也會涉及較多開放性問題, 與面試中探討交流之中我有時能夠學到知識, 也能夠很快判定一我的的綜合能力

常規問題是:

vue/react/angular橫向對比, 優缺點
vue雙向綁定實現原理
vue依賴收集原理
vue中的數組是怎麼實現響應式的
虛擬dom與diff算法解決了什麼問題
vue/react中diff算法的原理, 有什麼區別
vue nextTick方法是怎麼實現的
vue template是怎麼編譯的
vue style scope是怎麼實現的
vue插件機制原理, Vue.use方法的意義
vue eventbus傳數據是同步仍是異步
vuex中mutation爲何不推薦處理異步邏輯
前端路由是怎麼實現控制頁面切換的
當前的diff算法還有什麼優化空間
爲何react不須要依賴收集
react fiber原理
react任務時間分片機制
react中的錯誤邊界
什麼是數據不可變
redux的工做原理
mobx如何實現響應式
如何實現一個組件庫, 全量引入和按需引入分別怎麼實現
angular的依賴注入原理
rxjs是怎麼把事件處理成流的
Promise與Observable的區別
vue/react/angular當前還存在哪些缺陷, 如何改進

3. 網絡通訊

前端開發天天都會和網絡通訊技術打交道, 這部分知識點包括各類網絡協議, 瀏覽器中的一些特殊機制, 好比跨域等, 這些也是很基礎的知識點, 任何開發者都必須熟練掌握

網絡協議

關於網絡協議能夠考察的知識點很是多, 一般非計算機專業出身的前端對網絡協議這塊知識不瞭解, 推薦閱讀 Unix網絡編程這本書來補充知識點. 主要考察內容是http/https, 也會考察一些tcp/udp的知識, 尤爲是面試者作過nodejs開發的時候

常規問題是:

描述http通訊過程
http 302是什麼狀況下發生的
tcp與udp的區別
什麼是tcp粘包
https是怎麼保證通訊數據安全的
簽發ssl證書的機構起到什麼做用
http2有什麼新特性
什麼是多路複用, http1.1能夠實現多路複用嗎
cookie 和 session 有什麼區別
websocket如何使用
什麼是rpc

跨域問題

跨域自己應當屬於網絡協議的內容, 但前端開發會很頻繁遇到這個問題, 因此單獨拉出一節來說, 這也是很重要的基礎知識之一, 任何開發者都必須熟悉跨域的出現場景, 如何解決跨域等

常規問題是:

什麼是同源策略
常規的跨域解決方案
什麼是cors
什麼是簡單請求/非簡單請求
什麼是options請求
服務端如何響應options請求
跨域如何發送cookie
jsonp的原理
如何經過代理避免跨域

DNS

dns問題在前端面試中不常見, 一般面試者作過服務端開發, 或是面試node職位會重點考察, 對於高級的前端開發人員, 也須要了解其中的一些原理, 來輔助排查或規避問題, 或是找到一些問題的解決方案或優化方案

常規問題是:

dns尋址過程
什麼是hosts
dns變動生效時間
什麼是dns prefetch

網絡安全

網絡安全是個大問題, 很容易產生嚴重的事故, 但大多數前端人員對此缺少了解, 一個合格的前端工程師, 應當瞭解常見的網絡安全漏洞, 瞭解常規攻擊手段和對應手段, 可以敏銳的察覺代碼中的安全問題

常規問題是:

如何發起csrf攻擊, 如何防範
什麼是dns劫持
什麼是http劫持
如何保證cookie的安全性
如何設計安全的鑑權機制
什麼是jwt
什麼是OAuth 2.0, 工做流程是怎樣的
什麼是內容安全策略(CSP)

4. 工程化

工程化能力是現代前端開發很重要的能力之一, 高級前端開發須要有本身搭建前端工程腳手架的能力, 這其中包括了 webpack, babel, eslint, npm等不少相關工具, 這些工具要求熟練使用, 同時懂原理會有很大加分

webpack

webpack周邊生態很複雜, 插件繁多, webpack自己功能也多, 想了解原理並不容易, 通常只考察經常使用的功能的使用, 部分功能最好懂得原理

常規問題是:

webpack起到什麼做用
loader和plugin的區別
loader的執行順序
什麼狀況下loader能夠並行執行
如何編寫一個loader or plugin
webpack分包加載
require和import的模塊的差別
manifest.json是什麼, webpack如何生成manifest.json
code splitting 如何實現
什麼是 tree shaking
hmr運行機制
什麼是dev server

babel

babel一般搭配webpack使用, 通常做爲webpack loader爲前端項目服務, 一般考察常規用法與其中的工做原理

常規問題是:

babel如何實現es6 -> es5的轉譯
babel preset是什麼
什麼是stage 0, stage 2
什麼是babel polyfill
爲何須要polyfill
babel是如何處理vue template / react jsx 的

eslint

eslint能夠考察的內容不多, 通常是搭建工程腳手架使用到, 考察方向偏應用, 不考察原理

常規問題是:

爲何要使用eslint
如何強制約束開發者使用同一套eslint規則
eslint如何檢查非js代碼(例如vue template jsx pug)

npm

npm和前端工做息息相關, 通常是兩種用法, 一個是使用依賴包, 一個是開發依賴包, 對於高級的前端開發人員, 我但願他能夠理解npm工做原理, 可以本身搭建私有npm倉庫, 並基於此制定一系列包的使用規範, 瞭解npm常見問題, 對於依賴包的管理有必定看法

常規問題是:

npm下載的包放在哪裏, 若是是依賴的依賴包會放在哪裏
package-lock文件的做用
全局安裝的包放在哪裏, 如何查找
npm cache機制
什麼是npm link
什麼是npx
如何開發npm包並上傳
如何搭建私有npm
如何管理包的下載
如何檢查依賴是否存在漏洞
如何處理循環依賴
什麼是peerDependencies

docker

docker是如今最流行的容器引擎, 不管是前端仍是後端開發, 都應該對此有必定了解和使用經驗, 一個積極主動的前端工程師應當主動探索這些流行的技術可以給前端開發帶來什麼幫助, 目前主要應用於node服務, 部署開源工具, 持續集成等方面

常規問題是:

docker容器之間如何通訊
什麼是docker-compose
如何清理無用鏡像
什麼是k8s
如何使用docker打包node服務

Linux

開發工具時會常常與Linux打交道, 開發node服務也會每天登陸服務器處理問題, Linux基礎是前端工程師必備的能力, 面試中不會重點考察, 但會穿插在其餘問題中間接提問, 若是對Linux基本操做不熟悉, 可能會致使前端項目編譯時出現問題不知道如何解決, 甚至一些基本的軟件安裝, 環境配置都搞不定, 更差的狀況還會誤刪文件, 搞壞服務器等

常規問題是:

什麼是環境變量
Linux中的文件系統
如何檢查Linux服務器的負載狀況
如何查找服務器上的大文件
磁盤是怎麼掛載的
什麼是TTY
簡述Linux的帳戶系統
開發命令行工具如何讀取命令行參數
shell腳本中如何處理字符串, 好比解析json
ssh key驗證機制

構建發佈

這裏主要考察自動化構建發佈相關知識, 指望開發者能夠了解自動化運維的工做流程, 或者能夠自行搭建總體的持續集成, 持續交付體系, 但並不要求全部人都會這些, 簡歷提到必問

常規問題是:

什麼是gitlab CI/CD
什麼是jenkins
如何實現自動部署腳本
如何實現發佈回滾機制
如何設計持續集成流程
如何保證編譯服務器每次編譯環境都一致
怎樣利用緩存加快編譯速度

5. 前端相關語言

這部分主要是前端常規的一些預處理器(sass/less) 或者一些js擴展語言 (ts/cs),一般開發者都應該掌握其中幾種或所有, 來提高本身的開發效率, 同時也是考察面試者的技術廣度和主動學習能力

TS

ts是當前時間點(2019年底), 全部前端程序員都須要會的技能, 若是你尚未開始學習ts, 那你已經落後於時代不少了, 一般我都會詢問面試者是否會用ts, 若是是熟悉ts的開發, 我會把ts的熟練程度當作一個重點的加分項

常規問題是:

什麼是d.ts, 如何生成它
interface和type的區別
枚舉的使用方法
何時使用類型斷言
什麼是雙重斷言
什麼是Freshness
readonly的使用場景
如何使用泛型
協變與逆變的區別
什麼是雙向協變
解釋類型守衛機制

Scss/Less

css預處理方言不少, 這裏通常選最多見的兩種考察, 一般狀況下會應用便可, 瞭解底層原理也會有必定加分

常規問題是:

Scss/Less的區別
mixin的使用場景
使用變量的好處

6. 計算機基礎

其實這部分重要性本應該很高的, 排到這裏主要是由於前端開發廣泛對這塊不重視, 不瞭解, 若是要求太高就會招不到人了, 很無奈只能將它的優先級定在這裏. 但對於想要得到自我提高, 有很高追求的前端工程師, 這些也是必須很是很是熟練掌握的技能

數據結構

數據結構這個話題顯得有些學院派, 和前端重視應用的場景格格不入, 實際上若是能夠很是熟悉數據結構的知識, 能夠幫助你寫出性能更優的前端應用, 同時也是提高一我的編程思惟的重要途徑, 我面試中通常會考察這些知識, 並做爲很大的加分項

常規問題是:

什麼是鏈表, 雙向鏈表
js中的堆和棧分別存儲哪些數據
如何實現一個先入先出隊列
散列表是怎樣的數據結構, 如何實現
js中的數組底層是用什麼數據結構實現的
js中字符串在底層是如何實現的

算法

算法也是很重要但不少人不會的技能, 目前前端面試考察算法的公司也愈來愈多了, 我面試時也會適當考察幾個簡單算法題目, 重點是看面試者的思惟能力, 分析和解決問題的能力

常規問題是:

排序算法
求一組數中的質數
推算時間複雜度
最小空間複雜度翻轉數組
合併鏈表
前序遍歷, 中序遍歷, 後序遍歷
翻轉二叉樹
求樹的深度
編輯距離
動態規劃

編譯原理

面試問的很少, 通常是面試者提起或簡歷有提到纔會問, 掌握編譯原理的開發者能夠經過更多的視角去看待編程問題, 思惟也更加縝密理性, 這種面試者會大大加分

常規問題是:

詞法分析和語法分析
如何設計文法
解釋什麼是二義性文法
如何實現自編譯
編譯時如何作尾遞歸優化
source map的原理
js在編譯的角度看還存在哪些缺陷

7. 服務端開發

任何一個合格的前端工程師, 他都不該當只是個前端, 掌握必定的服務端開發技能是一個工程師必須作到的, 常規狀況下你們學node比較多, 也有一部分前端工程師掌握至少一門服務端開發語言, 一般狀況下, 簡歷提到服務端相關的知識, 我都會詳細詢問, 這在必定程度上能夠體現一個前端面試者的技術廣度, 和學習的主動性, 同時瞭解服務端開發也能夠在工做中更順暢的與其餘服務端開發合做, 或者承擔一些前端組內工具服務的開發工做