一年半前端人總結(jié)的大廠高頻面經(jīng)（附學(xué)習(xí)資源）
一年半前端人的求職路
“剛剛
跳槽????，這里分享一波個(gè)人學(xué)習(xí)資源。想看
跳槽之路的可以點(diǎn)點(diǎn)：一年半前端人的求職路。先贊再看，養(yǎng)成習(xí)慣，感謝各位大佬??
一、簡(jiǎn)歷
“一定要有
亮點(diǎn)！??！名校、大廠、工作經(jīng)驗(yàn)、個(gè)人博客、開(kāi)源項(xiàng)目等等。如果說(shuō)都沒(méi)有，來(lái)，
現(xiàn)成的，把我的博客fork一份拿去自己用，搭建教程博客也有（完全免費(fèi)），求個(gè)start?？〗俚牟┛?GitHub。下面是個(gè)人認(rèn)為比較重要的點(diǎn)，有不同見(jiàn)解的，評(píng)論區(qū)
battle一下??
1、總體
不要花里胡哨的，可以用重點(diǎn)顏色標(biāo)記自己擅長(zhǎng)的技能，簡(jiǎn)歷模板一定要簡(jiǎn)潔，字體大小，行距要看的舒服，不要一大段一大推文字的來(lái)，用1234來(lái)描述自己負(fù)責(zé)的事情，產(chǎn)出的結(jié)果，社招簡(jiǎn)歷不要低于兩頁(yè)。
投遞簡(jiǎn)歷最好找靠譜的內(nèi)推，能根據(jù)你的經(jīng)驗(yàn)，給你推業(yè)務(wù)較為匹配的部門(mén)，同時(shí)能跟進(jìn)進(jìn)度。不然就找獵頭給你推，最后boss聯(lián)系hr也行。（大部分公司有簡(jiǎn)歷檔案，一般半年起步不能再投，除非有人撈你）
2、項(xiàng)目經(jīng)驗(yàn)
社招最重要的部分，類(lèi)似的項(xiàng)目經(jīng)驗(yàn)可以濃縮下，根據(jù)項(xiàng)目熟悉度，排序?qū)憽](méi)啥寫(xiě)的就編一些你知道的解決方案，前提是自己要搞清楚，很多面試官會(huì)逮著你的項(xiàng)目經(jīng)驗(yàn)細(xì)問(wèn)。
項(xiàng)目經(jīng)驗(yàn)中，要加入一些個(gè)人思考，是不是這個(gè)項(xiàng)目不讓你做，結(jié)果也一樣？有沒(méi)有考慮過(guò)每個(gè)需求的合理性，擴(kuò)展性？有定制化需求如何處理？你的價(jià)值在哪里？你做過(guò)哪些方案調(diào)研，架構(gòu)設(shè)計(jì)，產(chǎn)品設(shè)計(jì)?遇到過(guò)什么難題?技術(shù)方案怎么落地？新技術(shù)如何推進(jìn)？
3、工作經(jīng)歷
工作時(shí)間可以自己算一下，標(biāo)注一下幾年幾個(gè)月。自己在公司擔(dān)任的職位，負(fù)責(zé)的事情，做出的產(chǎn)出。獲得過(guò)什么什么獎(jiǎng)項(xiàng)都可以寫(xiě)寫(xiě)。
4、基本信息
姓名、年齡、電話、居住地、幾年經(jīng)驗(yàn)、個(gè)人博客、GitHub鏈接等等。照片的話，對(duì)自己有自信的，美一美搞一個(gè)。學(xué)校好的，可以重新起一欄寫(xiě)，不好的就一筆帶過(guò)吧。
二、面試高頻問(wèn)題
“2月初面試遇到的一些問(wèn)題，
不全面，但是比較真實(shí)。
1、JavaScript
講講 js數(shù)據(jù)類(lèi)型？基本和引用的區(qū)別？symbol和bigint講一講應(yīng)用場(chǎng)景？判斷數(shù)據(jù)類(lèi)型的方法？ instanceof原理?判斷空對(duì)象？typof null？typeof NaN？var/let/const 區(qū)別？ 暫時(shí)性死區(qū)？塊級(jí)作用域？const a = {}; a.x = 1 能不能修改？說(shuō)說(shuō)你對(duì) 函數(shù)式編程的理解？函數(shù)柯里化的理解？平時(shí)的使用場(chǎng)景？防抖、節(jié)流的含義，使用場(chǎng)景？手寫(xiě)一下？call、apply、bind區(qū)別？ bind實(shí)現(xiàn)？bind之后還能修改this指向嗎？為什么？閉包概念，最主要的還是問(wèn) 閉包的場(chǎng)景？用 es5實(shí)現(xiàn)es6類(lèi)的繼承？各種繼承問(wèn)的挺多的深拷貝與淺拷貝？常用方法？手寫(xiě)一個(gè) 深拷貝函數(shù)？說(shuō)說(shuō)你知道的JavaScript 設(shè)計(jì)模式？觀察者和發(fā)布訂閱的區(qū)別？手寫(xiě)一個(gè)發(fā)布訂閱？我真的寫(xiě)了說(shuō)說(shuō)對(duì)你對(duì)JavaScript 異步編程的理解？ES Module與CommonJS模塊的差異？?jī)烧呋ハ嗉虞d的方式？一般會(huì)扯到AMDPromise.all、race、allSettled 概念、手寫(xiě)？很多手寫(xiě)題都會(huì)用到，比如用promise實(shí)現(xiàn)請(qǐng)求并發(fā)個(gè)數(shù)限制？
2、Css
水平垂直 居中？兼容性？不知道寬高情況下？BFC概念？作用？ 常用場(chǎng)景？Flex？注意 flex：1的含義，一般會(huì)給你個(gè)場(chǎng)景題盒模型概念，如何切換盒模型？實(shí)現(xiàn) 1px邊框？1px線條？偽類(lèi)和偽元素區(qū)別？使用場(chǎng)景？
3、Http && 瀏覽器
瀏覽器 緩存？http緩存？主要要講一講強(qiáng)緩存、協(xié)商緩存、preload、prefetch、Service Worker等，304的含義？協(xié)商緩存e-tag是怎么生成的？Last-Modified是基于什么生成的？?jī)烧邔?duì)比一下？優(yōu)先級(jí)哪個(gè)高？什么是 跨域？什么情況下會(huì)跨域？瀏覽器根據(jù)什么字段判斷是否允許跨域？跨域的解決方案有哪些？options請(qǐng)求了解過(guò)嗎？說(shuō)說(shuō)CORS中的簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求？form表單提交會(huì)跨域嗎？講一講瀏覽器事件循環(huán) Event Loop？node事件循環(huán)描述一下？http2有哪些新特性？http2還有哪些缺陷？http3的一些了解？從輸入 URL 到頁(yè)面加載完成的過(guò)程，一般要很詳細(xì)的描述：包括DNS查詢，緩存查詢，3次握手，4次揮手，瀏覽器渲染進(jìn)程等，面試官會(huì)從里面再挑幾個(gè)問(wèn)題深入問(wèn)，比如為什么是3次握手4次揮手？渲染進(jìn)程中的GUI渲染線程、JS引擎線程、事件觸發(fā)線程等等？可能會(huì)問(wèn)到進(jìn)程線程的區(qū)別？瀏覽器為什么是多進(jìn)程？js為什么是單線程？怎么支持多線程？等等https 加密原理？主要是講對(duì)稱(chēng)加密和非對(duì)此加密結(jié)合使用的一個(gè)過(guò)程。什么是中間人攻擊？和http區(qū)別？
4、Vue
生命周期？那個(gè)生命周期可以獲取到 真實(shí)DOM？修改data里面的數(shù)據(jù)，會(huì)觸發(fā)什么生命周期？組件data為什么是一個(gè) 函數(shù)？vue 組件通信？一般說(shuō)了 vuex，就會(huì)問(wèn)vuex用法？action和mutations區(qū)別？實(shí)現(xiàn)原理等？vue 導(dǎo)航守衛(wèi)，分全局和組件的，一般用于權(quán)限控制，這個(gè)就可能扯到項(xiàng)目中的一些鑒權(quán)問(wèn)題。$nextTick作用？實(shí)現(xiàn)原理？微任務(wù)向宏任務(wù)的降級(jí)處理，經(jīng)常被問(wèn)到說(shuō)出幾種宏任務(wù)，微任務(wù)。vue響應(yīng)式原理？基本都會(huì)問(wèn)vue scoped屬性作用？實(shí)現(xiàn)原理？vue router有幾種模式？實(shí)現(xiàn)方式？key的作用？沒(méi)有key的情況，vue會(huì)怎么做？會(huì)引出diff的問(wèn)題vue diff過(guò)程，和react diff區(qū)別？vue 2.x defineProperty缺陷？業(yè)務(wù)代碼里面怎么處理？$set原理？vue是怎么重寫(xiě)數(shù)組方法的？考察你是不是真的看過(guò)源碼vue 3.0 proxy優(yōu)缺點(diǎn)？怎么處理vue3不支持IE？computed和watch的區(qū)別和運(yùn)用的場(chǎng)景？除了基本的，看你能不能說(shuō)出三種watcher的區(qū)別
“vue原理相關(guān)的可以參考我的另外一篇文章：vue2.x高階問(wèn)題，你能答多少
5、React
生命周期詳細(xì)描述一下？官方為什么改變？說(shuō)說(shuō)你對(duì) 虛擬DOM的理解？直接全量更新和diff哪個(gè)快（這個(gè)問(wèn)題要分情況）？什么是 HOC？React里面用過(guò)哪些？可能讓你實(shí)現(xiàn)一個(gè)add(1)(2)(3)的函數(shù)Fiber干了什么事情？requestIdleCallback了解多少？react性能優(yōu)化？hooks出現(xiàn)的意義？類(lèi)組件和函數(shù)組件之間的區(qū)別是什么？為什么 不要在循環(huán)、條件語(yǔ)句或者嵌套函數(shù)中調(diào)用hooks？記住官網(wǎng)的一句話，Not Magic, just ArrayssetState 同步還是異步？比較常問(wèn)，問(wèn)的可能也比較深入如何避免組件的 重新渲染？memo/useMemo、PureComponent？useMemo和useCallback區(qū)別？
“拉鉤之前有個(gè)一塊錢(qián)的課【深入淺出搞定 React】修言大佬的課，有興趣的可以去看看（也可以借號(hào)??）
6、其他
簡(jiǎn)歷寫(xiě)的了解，問(wèn)的很少。即使現(xiàn)在公司用node做中間層，也基本沒(méi)問(wèn)node的問(wèn)題，所以這塊我就簡(jiǎn)單寫(xiě)寫(xiě)
常用的一些模塊， fs/path/http等等EventEmitter概念，使用場(chǎng)景，錯(cuò)誤捕獲Stream概念？使用場(chǎng)景？常見(jiàn)的Stream？
webpack基本也是必問(wèn)，得系統(tǒng)學(xué)習(xí)一下
webpack 構(gòu)建流程？打包原理？項(xiàng)目中做的一些 優(yōu)化？loader和plugin的區(qū)別？有沒(méi)有寫(xiě)過(guò)？常用哪些loader和pluginwebpack 熱跟新原理？tree-shaking？對(duì)于 CommonJS，tree shaking怎么辦？webpack loader的 執(zhí)行順序？從左到右？從上到下？
其他
項(xiàng)目做過(guò)的一些性能優(yōu)化， 基本必問(wèn)長(zhǎng)列表渲染怎么優(yōu)化？各種 懶加載的實(shí)現(xiàn)原理？路由？圖片？Typescript 中的 interface和type到底有什么區(qū)別等等，很多 低頻率的想不起了
“其他的一些東西，主要還是看你簡(jiǎn)歷上
寫(xiě)了什么，或者你的回答有什么面試官感興趣的詞。盡量突出自己的優(yōu)勢(shì)，發(fā)揮好就行，結(jié)果對(duì)自己的檢驗(yàn)，不是對(duì)自己的否定，加油????
三、資源分享
1、博客
阮一峰的個(gè)人網(wǎng)站 持續(xù)更新，沒(méi)事就去看看，阮大的風(fēng)格就是 很容易看懂字節(jié)飛書(shū)的學(xué)習(xí)計(jì)劃 - 超清楚（必看） 字節(jié)前端知識(shí)梳理，很清楚， 建議收藏冴羽的博客 淘寶大神總結(jié)的 前端基礎(chǔ)Gridea Gridea 是一個(gè) 靜態(tài)博客寫(xiě)作客戶端，幫助你更容易地構(gòu)建并管理博客或任何靜態(tài)站點(diǎn)vuepress-theme-reco 一款簡(jiǎn)潔而優(yōu)雅的 vuepress 博客 & 文檔 主題。我的個(gè)人博客基于這個(gè)搭建的，有興趣的可以了解下,博客也有 搭建教程前端知識(shí)每日3+1 學(xué)習(xí)大佬的姿態(tài)，我也搞了個(gè) 每日學(xué)習(xí)打卡，各位大哥可以搞起來(lái) （俊劫的個(gè)人博客）有贊技術(shù)團(tuán)隊(duì) 干貨滿滿
2、社區(qū)
掘金 有必要寫(xiě)一下的，還有SegmentFault、CSDN、博客園等等，就不一一寫(xiě)了 開(kāi)源中國(guó) 沒(méi)事去逛逛，看看 業(yè)界大哥們都在搞什么vue中文社區(qū) 不知道是不是正版，基本都是 vue的相關(guān)生態(tài)印象中文 算是一個(gè) 導(dǎo)航，資源匯總
3、算法
leetcode 我一般只刷 簡(jiǎn)單和中等的，難的我知道我搞不出來(lái)??人人都能看得懂的Leetcode力扣刷題教程合集 不錯(cuò)的算法 視頻講解，跟著做，算法問(wèn)題不大力扣加加 努力做西湖區(qū)最好的 算法題解用JavaScript實(shí)現(xiàn)的算法和數(shù)據(jù)結(jié)構(gòu) 看名字就知道很強(qiáng)了，沒(méi)事練練
4、開(kāi)源項(xiàng)目
深入淺出 Webpack 真 深入淺出Promise 小書(shū) 面試都被 promise錘過(guò)吧？這里有很全面的講解大廠面試題每日一題 沒(méi)事就來(lái)刷一刷 大前端面試寶典 - 圖解前端 圖解，懂吧前端面試每日 3+1 以面試題來(lái)驅(qū)動(dòng)學(xué)習(xí)，提倡每日學(xué)習(xí)與思考，每天進(jìn)步一點(diǎn)。 有點(diǎn)卷，但是沒(méi)辦法??前端面試 里面也有每日一題，可以持續(xù)打卡， 還是卷~??七天學(xué)會(huì)NodeJS 算個(gè)入門(mén)教程吧，挺全面的 若依后臺(tái)管理框架 若依官網(wǎng) vue后臺(tái)系統(tǒng)，感興趣的可以了解下TypeScript 中文手冊(cè) 學(xué)習(xí) TypeScript必備
5、React
React高頻面試題梳理，看看面試怎么答？（上） React 生命周期圖 大神之作，畫(huà)的很清楚35 道咱們必須要清楚的 React 面試題 問(wèn)題和答案都有 這可能是最通俗的 React Fiber(時(shí)間分片) 打開(kāi)方式 React 入門(mén)兒 京東凹凸實(shí)驗(yàn)室出品，非入門(mén) 成都房協(xié)網(wǎng)數(shù)據(jù)分析 React + TS可以學(xué)習(xí)一波React 中文風(fēng)格組件庫(kù) 很 有意思的開(kāi)源項(xiàng)目
6、Vue
Vue.js 技術(shù)揭秘 ustbhuangyi大佬的課，講的很清楚vue 源碼分析 視頻，帶你從頭實(shí)現(xiàn)一個(gè)vue一次關(guān)于Vue的自我模擬面試 百度大佬的夢(mèng)，學(xué)習(xí)一波，也去做個(gè)夢(mèng) vue2.x高階問(wèn)題，你能答多少 我寫(xiě)的，摻個(gè)水圖解 Vue 響應(yīng)式原理 圖解，懂了吧，思路很清晰
7、效率&工具
寫(xiě)文檔專(zhuān)用 各種技術(shù)文檔寫(xiě)作 用來(lái)生成好看的代碼塊的 mac風(fēng)格的代碼塊 Markdown Nice 美化markdowm樣式，很多模板可用 reveal.js制作網(wǎng)頁(yè)版PPT 之前寫(xiě)了一個(gè)，聊一聊前端性能與體驗(yàn)的優(yōu)化 在線PPT展示，點(diǎn)擊直達(dá)
8、其他文章
一個(gè)合格(優(yōu)秀)的前端都應(yīng)該閱讀這些文章 合格&優(yōu)秀 前端常見(jiàn)跨域解決方案（全) 跨域的問(wèn)題，就一篇 搞定吧2021年，我是如何從一名Vueer轉(zhuǎn)崗到React陣營(yíng)！ 目前個(gè)人也在 vue轉(zhuǎn)react，后續(xù)也會(huì)出一篇個(gè)人的感受拯救你的年底KPI：前端性能優(yōu)化 個(gè)人對(duì)前端性能優(yōu)化相關(guān)的總結(jié)，有興趣的可以看看，文章里有 在線PPT可以看可視化拖拽組件庫(kù)一些技術(shù)要點(diǎn)原理分析 加深自己對(duì) 可視化的一些認(rèn)識(shí)10 個(gè) GitHub 上超火的前端面試項(xiàng)目 面試相關(guān)的， 收藏搞起來(lái)前端面試常見(jiàn)的手寫(xiě)功能 準(zhǔn)備面試，至少 來(lái)寫(xiě)一遍無(wú)頭瀏覽器 Puppeteer 初探 Puppeteer可以幫我們做很多服務(wù)端的事情，不知道的同學(xué)去了解下。也可以看看我用Puppeteer做的產(chǎn)出：Egg + Puppeteer 實(shí)現(xiàn)Html轉(zhuǎn)PDF 在線預(yù)覽：html轉(zhuǎn)pdf2021年前端面試必讀文章 梳理的很全面，每個(gè)知識(shí)點(diǎn)對(duì)應(yīng)的都有 文章鏈接，有些基礎(chǔ)的知識(shí)點(diǎn)建議看MDN，對(duì)某些東西，每個(gè)人都有自己的理解。圖解 HTTP 緩存 政采云前端出品，講的挺清楚的瀏覽器渲染機(jī)制 講的 很全