史上最全前端面經(jīng),收藏這一篇就夠了
趕在上海封控前換了工作，最近有空給大家整理了下自己的面試心得，也是一個自我學(xué)習(xí)和反省的過程。今年的大環(huán)境不太好（似乎每年都是這么說），但這次面試和以往自己確實感受到了很大的區(qū)別，各大公司更加注重算法和http基礎(chǔ)了。分大廠、獨角獸、互聯(lián)網(wǎng)+三類型的公司，分別給大家介紹自己的面試經(jīng)歷，總有一款適合你。
一、大廠篇
都是線上視頻面試，用的都他們公司自己研發(fā)的面試平臺。面試官很客氣，面試過程也是循序漸進(jìn)的，問到你不擅長的領(lǐng)域也是點到即止，不會讓你尷尬。本人只面到了第三輪，后來就沒有后續(xù)了。第一輪主要是js基礎(chǔ)、以及手寫代碼題。第二輪主要是框架源碼、以及算法題。第三輪主要是項目了。部分題目供大家查漏補缺
1、typeof進(jìn)行類型檢測的原理是什么
2、瀏覽器緩存的位置及其區(qū)別
3、CSRF、XSS攻擊及防御方法
4、為什么vue中引用一個組件需要注冊，而react不用
5、vue模板解析的過程
6、axios可以通過new Axios實列的形式使用，原理是什么？
7、手寫節(jié)流防抖函數(shù)
8、手寫快速排序的實現(xiàn)
9、實現(xiàn)簡單的emitter
10、http1.1和http2.0的區(qū)別
11、diff算法比較的過程（深度優(yōu)先、同層比較、首尾假猜）
12、async\awiat原理
13、手寫pluging\loader
14、webpack打包過程
基礎(chǔ)算法題：找出字符串中第一個只出現(xiàn)一次的字符。
用循環(huán)實現(xiàn)后會追問時間復(fù)雜度、空間復(fù)雜度更優(yōu)的解決方案
算法題大多數(shù)都是leetcode上的，我就不一一列舉了。主要涉及到二叉樹、鏈表、哈希表、棧和隊列等數(shù)據(jù)結(jié)構(gòu)，以及排序、查找、遞歸循環(huán)、分治、動態(tài)規(guī)劃、回溯等算法。在leetcode上刷題之前，建議大家還是先了解下基本的概念。
二、獨角獸篇
一二輪都是線上視頻面試，主要用的是騰訊視頻會議。
一般是兩輪線上技術(shù)面試，第三輪去公司與項目經(jīng)理和hr聊。面試的內(nèi)容和大廠基本差不多，算法方面會比大廠簡單一些，但框架原理方面會問的比較多一些。
1、vue2和vue3的區(qū)別
2、ts中type、interface的區(qū)別
3、優(yōu)化seo的多種方式
4、服務(wù)端渲染方面的內(nèi)容（服務(wù)端、客戶端生命周期的調(diào)用）（脫水、注水）
5、常見的js類型錯誤
6、npm發(fā)包流程
7、node事件機制、進(jìn)程等內(nèi)容
8、webpack熱更新原理，與5的區(qū)別
9、線上項目錯誤收集機制的實現(xiàn)
10、單元測試
11、file-loader、url-loader的區(qū)別
12、http和https的區(qū)別
13、webpack打包vue項目時做了哪些事情，分template、script、style三個部分介紹下
14、介紹下常用的設(shè)計模式，以及應(yīng)用場景
15、vue-cli幫我們做了哪些工作，是否可以自己實現(xiàn)一個腳手架
16、虛擬dom什么場景下減少的dom操作
17、微前端、低代碼等
18、實現(xiàn)簡單的promise
面試過程也是循序漸進(jìn)的，由易到難。問題都是你會的，或者是了解過的，但對理解深度要求比較高。平時如果不注重學(xué)習(xí)積累、僅憑工作中用到的那些技術(shù)是無法回答好這些問題的。
三、互聯(lián)網(wǎng)+篇
主要是電話初試+公司面試，一般都是一輪過。這些公司問到的內(nèi)容和我們平時開發(fā)中用到的技術(shù)就比較接近了，側(cè)重點在js基礎(chǔ)以及框架的使用。也會有一些原理方面的問題，用于拉開面試者的差距，方便定職級和薪水。只要你前面基礎(chǔ)問題都回答出來了，一般都能走到hr談薪水的環(huán)節(jié)。
1、父子組件生命周期執(zhí)行的順序
2、跨域、同源策略
3、es6數(shù)組操作的方法
4、數(shù)組遍歷的方法
5、forEach、map的區(qū)別
6、map是否可以修改原數(shù)組
7、數(shù)組去重的多種方法
8、數(shù)組平鋪的多種方法
9、自己實現(xiàn)一個flat()方法
10、vue自定義指定
11、vue組件之間通行的多種方式
12、小程序開發(fā)及發(fā)布過程，使用過那些框架（列如：uniapp）
13、hybrid與 原生通信的方式
14、vue2和vue3樣式穿透的區(qū)別
15、vue響應(yīng)式的原理
16、ui組件發(fā)npm包，如何實現(xiàn)按需加載
17、json數(shù)據(jù)類型
18、http響應(yīng)頭有哪些內(nèi)容
19、es6的set 、map類型（做算法題經(jīng)常用到）
20、keep-alive中組件生命周期觸發(fā)的過程，第一次進(jìn)入、第二次進(jìn)入
21、環(huán)境變量的注入
22、為什么vue中可以直接使用this
23、表單組件的實現(xiàn)、from表單觸發(fā)校驗的原理
24、this.nextTick()的原理
這些公司的面試官水平就參差不齊了，有些人面的過程中確實會讓人覺得不舒服，給人一種居高臨下的感覺。還有一些就是你能感覺到他是在網(wǎng)上找的題目，一道道問你，你回答出來了他也不深入的問。反正林子大了什么鳥都有，作為面試者的我們來說一定要戒驕戒躁。問到不會的，別自我是否定。問到過于簡單的，也別不屑一顧。用最近網(wǎng)上很流行的一句話來說就是“他橫由他橫，明月照大江”
四、總結(jié)
涉及到的前端知識大概有這些：
Js基礎(chǔ)
框架基礎(chǔ)及原理
http
打包工具webpack、vite等
es6
瀏覽器相關(guān)知識
數(shù)據(jù)結(jié)構(gòu)及算法
node.js
hybrid、小程序等
寫在最后：
面試是一個雙向選擇的過程，我們面試的時候不要把自己當(dāng)成一個被挑選的弱勢者。前端知識雜且多，有時面試結(jié)果不理想，不要懷疑自己。只是在某個方面自己還有欠缺，之后補上就可以了。我們不是在祈求別人給我們一份工作，我們只是在找尋一個適合我們的公司。不妄自菲薄更不驕傲自負(fù)，整理好心態(tài)，你一定能找到適合自己的公司?。?！
五一假期每晚20:00會在知乎上做“前端面經(jīng)”的分享直播，感興趣的可以關(guān)注下。也可以關(guān)注公眾號，找到我的私人微信，把你想了解的問題提前發(fā)給我
