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