前言
我在六月初裸辭，準備了一週，離開了青島，踏上去往杭州的求職之路。之後經歷了兩週半的面試，終於找到了一家心儀的公司，在這裏記錄一下面試過程中遇到的面試題，大家僅供參考。
受疫情影響，今年的行情沒有往年好，我也是年輕氣盛，沒有考慮這麼多就直接裸辭了，在這裏勸大家一定要找好下一家在辭職，不然壓力會很大。
杭州這邊面試流程會比較長，一面二面三面HR面，一二三面都是技術面，一面一般問的不是很難，都是基礎題，大廠會問的比較深入一些。有的公司二面三面是一起的，一般是技術主管/總監面試，會根據你的簡歷上的內容問一些東西，所以不會的東西一定不要寫在簡歷上，以免坑自己，二三面的問題會更加偏向於“爲什麼”，而不是“怎麼做”，所以在平時要更加註重一些技術實現的原理。
面試題
css方面
- 一個盒子如何做到水平垂直居中？出現頻率：高！
- css的一些選擇器有哪些？
- 說一下css的盒模型？出現頻率：高！
- px、em和rem的區別？
- 你遇到的一些IE8的兼容性問題如何處理？因爲我在簡歷上寫了做過兼容IE8的項目。
js方面
- js的數據類型有哪些？
原始數據類型：Null、Undefined、Boolean、String、Number、Symbol(ES6新增)
引用數據類型：Object 爲引用類型，包括：Array, Function, Date, RegExp - 由上一個問題引出，如何判斷數據類型？
typeof和instanceof - 由上一個問題引出，typeof和instanceof的區別？null爲什麼會判斷爲Object？
typeof和instanceof原理
一句話回答：
typeof原理： 不同的對象在底層都表示爲二進制，在Javascript中二進制前（低）三位存儲其類型信息。
在Javascript中二進制前（低）三位都爲0的話會被判斷爲Object類型，null的二進制表示全爲0，自然前三位也是0，所以執行typeof時會返回"object"。
instanceof：用來比較一個對象是否爲某一個構造函數的實例。只能用於對象，不適用原始類型的值。 - 如何判斷一個數組？除了instanceof說出幾種其他方式。
toString、isArray、constructor
在JavaScript中，如何判斷數組是數組？ - 說一下事件捕獲和事件冒泡？出現頻率：高！
事件冒泡：由最具體的元素接收，然後逐級向上傳播至最不具體的元素的節點。
時間捕獲：與事件冒泡相反
如何阻止事件冒泡：stopPropagation()、preventDefault()、@click.xxx.stop
你真的理解 事件冒泡 和 事件捕獲 嗎？ - 防抖函數和節流函數，如何實現以及區別？出現頻率：高！
簡單回答（入門級）：https://juejin.im/post/5b651dc15188251aa30c8669
深入理解（進階級）：https://juejin.im/post/5d1bf9edf265da1b7004c3e1 - 一個頁面從輸入url到加載的全過程？出現頻率：高！
https://juejin.im/post/5bf3ad55f265da61682afc9b
類似回答有很多，百度一下即可 - 由問題7引出，說一下瀏覽器的緩存？出現頻率：較高！
強緩存和協商緩存
強緩存規則：response headers 中的 Cache-Control，取值有，max-age（過期時間） 、 no-cache（不進行強緩存）、no-store （不強緩存，也不協商緩存）、private（僅瀏覽器可以緩存）、public（瀏覽器和代理服務器都可以緩存）
協商緩存：
ETag/If-None-Match：Etag就像一個指紋，資源變化都會導致ETag變化，跟最後修改時間沒有關係，ETag可以保證每一個資源是唯一的。If-None-Match的header會將上次返回的Etag發送給服務器，詢問該資源的Etag是否有更新，有變動就會發送新的資源回來
Last-Modified/If-Modified-Since：Last-Modified 表示本地文件最後修改日期，瀏覽器會在request header加上If-Modified-Since（上次返回的Last-Modified的值），詢問服務器在該日期後資源是否有更新，有更新的話就會將新的資源發送回來。
協商緩存Last-modified/Etag沒有過期時，服務端返回狀態碼304。
瀏覽器緩存 - 由問題7引出，說一下三次握手和四次揮手。
很經典的問題，一般不會問的很深入
面試官，不要再問我三次握手和四次揮手 - http和https的區別？
也是一個常規的問題，這個問題做過準備，但是我遇到的很少問。 - js實現繼承的方式？出現頻率：必問！
原型和原型鏈，老生常談的問題了
簡單理解
原型和原型鏈
JavaScript實現繼承的方式 - 問題11一般會延伸一下，es6的繼承。這個最好自己說出來，不要等面試官問。
關於es6的問題，推薦阮一峯老師的《ECMAScript 6 入門教程》，網上有電子版的，實體書也有
https://es6.ruanyifeng.com/ - 閉包瞭解嗎，詳細說一下？出現頻率：必問！
對閉包的理解
JavaScript 閉包
JavaScript 閉包入門（譯文）
閉包也是比較經典的問題了，各種分析數不勝數 - es6瞭解嗎，說一下你用過哪些？出現頻率：高！
es6那本書裏有 - promise瞭解嗎，詳細說一下？出現頻率：高！
同上 - 由promise引出Await/Async，說一下兩者的區別？這個最好也是自己引出來。
同上 - 前端的安全問題了解過嗎？csrf和xss，出現頻率：較高！
比較常見的是csrf和xss
csrf：跨站請求僞造，如何防止：Referer、Token、服務端增加多重安全校驗
xss：跨站腳本攻擊，如何防止：輸入驗證、定義域名白名單
更加詳細的解釋：「前端食堂」想進大廠必須要知道的Web安全問題 - 事件委託用過嗎？
同問題5 - 由14引出，普通函數和箭頭函數的區別？
主要是this區別，如果能答出其他方面就更好了
普通函數與箭頭函數的區別 - 爲什麼會產生跨域，如何解決？出現頻率：必問！
前端跨域方法論
補充：如果只是爲了解決開發環境的跨域，chrome插件也可以，這個比較冷門，看了很多博主的回答都沒有提過 - session和cookie的區別？
Cookie 和 Session 關係和區別 - javastring的垃圾回收機制瞭解嗎？
這個問題關聯的知識點比較多，棧和堆、執行上下文、內存回收機制。如果只是回答這個問題，那就是：引用計數和標記清除，具體瞭解
https://juejin.im/post/5dba7c24518825036974d707#heading-10 - eventLoop事件環。一般不會直接問，而是通過一些代碼的執行順序問，這個也比較重要。
帶你徹底弄懂Event Loop
是不是感覺自己理解了，來幾道題測試一下
【建議星星】要就來45道Promise面試題一次爽到底(1.1w字用心整理) - BFC知道嗎？
學習 BFC (Block Formatting Context)
前端進階之什麼是BFC？BFC的原理是什麼？如何創建BFC？ - 對於http請求有了解過嘛？常見的狀態碼都有那些？如果接下來問緩存，還會問強制緩存和協商緩存返回的狀態碼。
答一下get請求和post請求以及區別，還會問你做沒做過一些請求的封裝，按照實際情況回答，如果沒做過的話，先去了解下。狀態碼2xx、3xx、4xx、5xx
具有代表性的 HTTP 狀態碼 - 瀏覽器的迴流和重繪瞭解過嗎？如何避免？
你真的瞭解迴流和重繪嗎 - 深拷貝知道嗎？說一下具體實現？
淺拷貝比較簡單，使用Object.assign，對於二維數組的深拷貝可以使用JSON.parse(JSON.stringify(arr))
那更加複雜的對象的深拷貝呢：
自己來實現一個深拷貝函數
深拷貝的終極探索 - 圖片懶加載原理是什麼？
比較簡單，圖片懶加載原理
Vue方面
- vue的生命週期說一下？出現頻率：必問！
Vue 的生命週期指的是組件從創建到銷燬的一系列的過程，被稱爲 Vue 的生命週期，包括初始化–掛載–更新–銷燬過程，對應的鉤子函數：
beforeCreate（初始化界面前）
created（初始化界面後）
beforeMount（掛載前）
mounted（掛載後）
beforeUpdate（更新數據前）
updated（更新數據後）
beforeDestroy（卸載組件前）
destroyed（卸載組件後） - 在哪個階段可以獲取到Dom？
mounted - vue組件間的通訊方式有哪些？父子、隔代、兄弟組件通信。出現頻率：必問！
props 和 $emit、$parent 和 $children、vuex等等，更加詳細的回答：
vue組件間的通訊方式總結 - vue中常見的指令有哪些？出現頻率：較高！
v-if v-show v-bind v-for v-html v-text v-on v-model v-cloak - 由問題4引出，v-if和v-show的區別？
官網有解答，其實大部分問題官網都有，所以說迴歸官網文檔很重要，
v-if vs v-show - 談談你對vuex的理解？出現頻率：必問！
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含着你的應用中大部分的狀態 ( state )。
（1）Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地得到高效更新。
（2）改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化。
主要包括以下幾個模塊：
State：定義了應用狀態的數據結構，可以在這裏設置默認的初始狀態。
Getter：允許組件從 Store 中獲取數據，mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性。
Mutation：是唯一更改 store 中狀態的方法，且必須是同步函數。
Action：用於提交 mutation，而不是直接變更狀態，可以包含任意異步操作。
Module：允許將單一的 Store 拆分爲多個 store 且同時保存在單一的狀態樹中。
其實這種問題只要用過不難回到。 - vue的雙向數據綁定原理？出現頻率：必問！
通過數據劫持結合發佈訂閱模式的方式來實現的，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。
Vue雙向數據綁定原理（分析與代碼） - 一般由上一個問題引出，vue3.0的數據綁定了解過嗎？然後繼續問，vue3.0和2.x的區別？出現頻率：較高！
vue3.0 的響應式數據是通過es6 的Proxy來實現的
解析Vue2.0和3.0的響應式原理和異同(帶源碼)
vue2.0響應式到vue3.0響應式原理 - MVVM是什麼？出現頻率：較高！這個問題一般是第一個問的。
即Model-View-ViewModel
M - Model，Model 代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯
V - View，View 代表 UI 組件，它負責將數據模型轉化爲 UI 展現出來
VM - ViewModel，ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步 View 和 Model 的對象，連接 Model 和 View - computed和watch區別？
computed：計算屬性，它會根據你所依賴的數據動態顯示新的計算結果。計算結果會被緩存，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時纔會重新調用對應的getter來計算，computed是同步的
watch：更像是一個 data 的數據監聽回調，當依賴的 data 的數據變化，執行回調，在方法中會傳入 newVal 和 oldVal。可以提供輸入值無效，提供中間值 特場景。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。如果你需要在某個數據變化時做一些事情，使用watch。 - 由問題3引出，父組件到子組件所觸發的生命週期？
組件的調用順序都是先父後子,渲染完成的順序是先子後父。
組件的銷燬操作是先父後子，銷燬完成的順序是先子後父。
加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
子組件更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新過程
父 beforeUpdate -> 父 updated
銷燬過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed - webpack使用過嗎？說一下一個具體的例子？
這個回答的不是很好，有沒有大神可以補充一下 - vue-router使用過嗎？說一下hash和history模式區別？出現頻率：高！
url 展示上，hash 模式有“#”，history 模式沒有
刷新頁面時，hash 模式可以正常加載到 hash 值對應的頁面，而 history 沒有處理的話，會返回 404，一般需要後端將所有頁面都配置重定向到首頁路由。
兼容性。hash 可以支持低版本瀏覽器和 IE。 - 說一下vue-router的路由守衛？
beforeEach和afterEach，說了一下我在實際開發中的應用，導航守衛 - history模式需要後端配置一下，不然會404，知道爲什麼嗎？
Vue Router history模式的配置方法及其原理 - 說一下vue-router懶加載的實現？
寫法：路由懶加載
使用懶加載的優點： vue是單頁面應用，使用webpcak打包後的文件很大，會使進入首頁時，加載的資源過多，頁面會出現白屏的情況，不利於用戶體驗。運用懶加載後，就可以按需加載頁面，提高用戶體驗。 - 做過項目的優化嗎？具體說一下如何優化的？出現頻率：高！
首屏優化：提升90%加載速度——vuecli下的首屏性能優化
性能優化：Vue 項目性能優化 — 實踐指南（網上最全 / 詳細）
挑選你做過或者比較熟悉的幾點回答即可，回答的越多越好 - diff算法的理解？爲什麼要生成虛擬dom？虛擬dom和真實dom的差別？出現頻率：高！！
淺入淺出圖解domDIff
Vue中的虛擬DOM及diff算法 - vue如何實現自定義指令？
代碼實現的問題，不多做解釋，看官網即可 - vue和react的區別？因爲我的簡歷上寫了瞭解react，所以會問這個問題。
react使用的比較少，只回答了函數時編程、jsx，感覺回答得不太好，等待補充。。。 - nextTick知道嗎？出現頻率：高！
在下次 DOM 更新循環結束之後執行延遲迴調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。
Vue中$nextTick源碼解析
寫在最後
推薦一下優秀的面經：
霖呆呆的近期面試128題彙總(含超詳細答案) | 掘金技術徵文
2萬字 | 前端基礎拾遺90問-寫代碼像蔡徐抻
面試分享：兩年工作經驗成功面試阿里P6總結-子弈
「面試題」20+Vue面試題整理-童歐巴