一年半經(jīng)驗的前端面經(jīng)總結(jié)
面試之前
先說好，問題的答案都不是唯一的，大部分只提供題目哈，后面有答案會慢慢補上！當(dāng)時回答的都不是特別完全。面試過程比較長，從年初開始斷斷續(xù)續(xù)面試，沒有做太詳細的規(guī)劃，有些答案也不記得當(dāng)時怎么回答的。
年初面試的公司還是比較多的，美團、頭條、阿里、快手、滴滴、Shopee等等以及幾個不知名小公司。從各種前輩的經(jīng)驗來說，是先拿小公司溫故而知新一下哈，把自己的知識通過一次一次小面試歸納在一起。但實際上我遇到的情況是，小公司并不問太深的框架原理和基礎(chǔ)（可能會有注重的公司，只是我沒遇到），基本會著重于做過的項目經(jīng)歷，所以這幾次面試并沒有新的技術(shù)提升（畢竟每次面試都是在學(xué)習(xí)，從面試技巧來說，起碼后面的時候你可以把自己做的項目說的更精彩...）。
對于大廠的面試，我只能說還是挺難的，首先和快手面試溝通的時候，最初的幾個問題也比較緊張，回答的不在點上，面試官帶個鴨舌帽，基本上沒看我，偶爾和我對視一眼，從一開始就一副對我沒有興趣的樣子，收到了十分大的打擊，當(dāng)時對快手很有好感，特意請了一天假準(zhǔn)備面試，沒想到慘淡收場??。
其他的面試，面試官都很nice，雖然有的過了有的沒過，起碼體驗上還不錯，而且也學(xué)到了很多東西。因為面試題都是比較類似的，會針對你的簡歷去發(fā)問，基本上 20 分鐘左右會講項目，20 分鐘討論技術(shù)原理和基礎(chǔ)，最后時間會手寫幾道題，算法還是程序題跟面試官喜好有關(guān)，起碼個人覺得沒有特別為難的題。
同時因為面試題類似，也就沒有特意區(qū)分題目是來自于哪家公司，希望同學(xué)自行腦補...
下面是我盡力回憶的面試題，以及雖然沒考，但是很有可能會考的題目，希望能幫助最近有想要跳槽的同學(xué)！
面經(jīng)部分
僅供參考，僅供參考，僅供參考！??！
因為幾乎沒有 React 相關(guān)經(jīng)歷，問我最多的 React 問題就是你覺得和 vue 有什么區(qū)別？
啊...從這一點來說，簡歷環(huán)節(jié)確實很關(guān)鍵。其實我做過，但我不精通，簡歷上不寫，所以我不會，別問...
下面的面經(jīng)部分被我分為了八個方面：（下面題目的??代表面試頻率出現(xiàn)過多次）
JavaScript 基礎(chǔ) Css 以及優(yōu)化 vue 或 react 框架相關(guān) 前端打包等工程化 瀏覽器及常見安全問題相關(guān) 跨平臺技術(shù) 網(wǎng)絡(luò)相關(guān) 少量算法
其中并沒有 Html 相關(guān)的東西，一方面確實是相關(guān)的題目少，另外不會有太難的問題，平時開發(fā)時常見的情況基本可以解決。
并且因為是從自己的簡歷來發(fā)問，所以有些也很常見的 nodejs、serverless、GraphQL 等等都不在我的面試題里，但很有可能出現(xiàn)在你的題目里，相關(guān)題目可以自行補課！
原生 JS 代碼
JavaScript 實現(xiàn)對上傳圖片的壓縮？
答：讀取用戶上傳的 File 對象，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮之后再轉(zhuǎn)成 File（Blob） 對象，上傳到遠程圖片服務(wù)器；不過有時候我們也需要將一個 base64 字符串壓縮之后再變?yōu)?base64 字符串傳入到遠程數(shù)據(jù)庫或者再轉(zhuǎn)成 File（Blob） 對象。
思路就是 File + Canvas 的 drawImage
可以看看張鑫旭大佬的文章 HTML5 file API加canvas實現(xiàn)圖片前端JS壓縮并上傳
談一談 JavaScript 的異步？??
答：setTimeout、MutationObserver、postMessage、Promise、async、await、generator
從 MutationObserver、postMessage 會牽扯到 vue 的 $nextTick
從 generator 會聊到 co.js 實現(xiàn)，代碼不長，意思也好理解，但讓我寫還真沒寫出來，建議兄弟們好好看一遍！
從 Promise 和 setTimeout 會聊到下面要說的事件循環(huán)
瀏覽器和 nodejs 事件循環(huán)？??
答：執(zhí)行棧，promise 是 microTask，setTimeout 是 task
其中很多的階段，可以從這里看到完整的模型介紹：html.spec.whatwg.org/multipage/w…
需要說出來的點：首先 setTimeout 并沒有特殊，也是一個 task。另外每次的執(zhí)行過 task 和 大量的 microtask（不一定在一次循環(huán)全執(zhí)行完）后，會進行 renderUi 階段，雖然不是每次事件循環(huán)都進行 renderUi ，但每次間隔，也就是傳說中 60hz 的一幀 16ms。
nodejs 事件循環(huán)略有不同...多了 process.nextTick 等
手寫 Promise 或者 Promise 的靜態(tài)方法
答：手寫 Promise 盡量寫出來 Promise 的狀態(tài)，靜態(tài)方法以及 .then，.catch。當(dāng)然更細節(jié)的還原可以看 Promise A+ 規(guī)范。
靜態(tài)方法指 Promise.allSettled Promise.all Promise.race 等等。
手寫節(jié)流與防抖 ??
答：老生常談，原理很簡單，主要還是看會不會封裝函數(shù)，以及封裝的高級與否，考慮的情況是否全面。
手寫 bind 函數(shù)
答：同上。
service worker 使用
答：緩存，漸進式應(yīng)用，攔截處理
聊到 worker 可能還會聊到 web worker， shared worder 等等，如果有自信，或者工作對這方面有深入理解，可以秀一下。能體現(xiàn)出自己的優(yōu)勢...
嚴格模式
答：this 的 undefined，禁止 with，arguments 不允許更改，給只讀對象賦值拋異常，變量需要先聲明，call，apply 第一個參數(shù)不會被轉(zhuǎn)換...
能答出來一些就行。
原型鏈以及繼承
答：很常問，但隨便找個贊數(shù)高的講解，看一遍就懂了，記住?？键c即可。
正則表達式匹配規(guī)則？
答：這個真沒辦法，只能是對正則表達式的規(guī)則進行系統(tǒng)學(xué)習(xí)，當(dāng)然?？嫉目赡苁?nbsp;郵箱，url 匹配。
css 以及優(yōu)化
flex 布局 ??
答：阮一峰老師的 flex 文章，清晰易懂。
常用的 api 和兩列、三列布局等等，對于我來說稍微有點難度。之前項目對兼容性高，基本沒怎么用過 flex 布局。沒用過的建議用一用，幾個小時就會常見布局了。
優(yōu)化長列表滾動效果
沒答上來，說了幾個 js 的方案沒答對點上。
面試官答曰：transition 優(yōu)化動畫效果，分層渲染
后面分析了一下，可以用 transform 進行強制分層，第二種可以用 content-visibility 將看不見的元素不渲染，設(shè)置值為 auto 即可。第三個是對于某些動畫效果，可以用 will-change 作用在父元素上進行 gpu 加速，使用后刪掉。
響應(yīng)式布局 ??
答：可能會涉及 css 函數(shù)，rem/em 區(qū)別，媒體查詢...
什么是 BFC？
答：塊級格式化上下文，我布局總用！
問：什么會形成 BFC？它的作用是什么？
答：
body 根元素 浮動元素：float 除 none 以外的值 絕對定位元素：position (absolute、fixed) display 為 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll)
作用嘛，為了布局??（千萬別這么答哈，具體可以看下面文章）
推薦一篇 BFC 文章
vue 或 react 框架相關(guān)
vue 響應(yīng)式原理以及雙向綁定實現(xiàn)代碼 ? ?? vue3 響應(yīng)式原理，有什么不同？ vue 的 diff 算法思路，怎么對比節(jié)點？ vue 的 compile 實現(xiàn)？?? vue 如何自定義指令？具體的 api 寫法？ vue3 對于 vue2 在性能上的優(yōu)化（從 compile 和 runtime 兩方面）？ react 有什么不同？了解 hooks 嗎？
答：（雖然我不會，但我可以說點別的，比如 vue3 也有 hooks，它的使用和一些優(yōu)點？）
用過 TypeScript 嗎？有什么優(yōu)點，為什么用？具體的場景，使用 TypeScript 進行類型定義。
答：vue 項目多， ts 用的少，也用過，寫前端監(jiān)控 sdk 時，對接口進行類型校驗，它像一個文檔，每一個接口都有定義，后面再翻看瞬間理解意思。（強類型好處還有很多，但是個人覺得寫起來超級麻煩，當(dāng)然有人很喜歡很爽。）
vue 的 keep-alive 使用場景，以及原理？??
前端打包等工程化
webpack 和 rollup 使用？ tree-shaking 原理？?? webpack loader 和 plugin 怎么寫？ 你對 vite 熟悉，和 webpack 區(qū)別？ 給 vite 做的貢獻和在實際項目的使用？
vite-electron-quick Git 地址 代碼被 merge 的 pr 歷史
如何統(tǒng)一對錯誤進行捕獲的？vue 的異步錯誤如何捕獲？
自己寫的 JS 錯誤捕獲 SDK Git 地址
順便求個 git 小????
瀏覽器及常見安全問題相關(guān)
瀏覽器頁面加載過程，越詳細越好 ?? 瀏覽器緩存 ?? 跨域問題及處理 ?? v8 快數(shù)組慢數(shù)組，hidden class 或者其他模塊？ xss 和 csrc 的意思？如何防范？??
答：美團的兩篇文章擺出來，面試官直接問下一題！
xss 防范 csrf 防范
跨平臺技術(shù)
electron 使用，如何實現(xiàn)小托盤功能？ flutter 的 widget stateFullWidget stateLessWidget 區(qū)別？ js Bridge 的原理 ？?? flutter 的渲染引擎？
網(wǎng)絡(luò)相關(guān)
dns 相關(guān)，dns 服務(wù)器是什么，如何查詢 dns 的？?? Oauth2.0 和 jwt 單點登錄等 http/https 區(qū)別？為什么 https 更安全一點？https 為什么也不是十分安全？ http1.x 和 http2.0 的區(qū)別？http2.0 優(yōu)點，以及某些情況會比 1.x 速度更慢？ https 加密原理？ http2.0 壓縮頭，以及并行請求原理？ tcp 的連接方式？
少量算法
回文串，中心擴散法 冒泡，快排 ?? 二分查找 ?? 二叉樹 ?? 動態(tài)規(guī)劃 （沒遇到考這個的，可能難度太高，面試官看我簡單的半天才拿下，這個直接不考慮了，大佬可以關(guān)注一下）
面試中的項目題
大概就是讓你去設(shè)計一個系統(tǒng)的技術(shù)選型，或者是如何設(shè)計組件庫，設(shè)計一個系統(tǒng)。個人猜測對于渣渣的我，這種題就是看看有沒有 owner 意識，而且也可以看一下我對哪些技術(shù)更感興趣？
除了系統(tǒng)，還有某些場景的設(shè)計方案，比如如何用鑒權(quán)控制登陸時間設(shè)計保持七天登錄狀態(tài)。
因為我簡歷中幾乎沒有涉及 nodejs 服務(wù)端的東西，但面試官總想問一問...
只能說做過自己博客的服務(wù)端...
服務(wù)端代碼 Git 地址
但是很簡陋...只能說開發(fā)過??
總結(jié)
對于框架原理只能說個大概，真的深入某一部分具體的代碼和實現(xiàn)方式就只能寫出一個框架，許多細節(jié)注意不到。 算法方面還是很薄弱，好在面試官都很和藹可親，擅長發(fā)現(xiàn)人的美哈哈哈...（最好多刷一刷，不然影響你的工資和成功率??） 在投遞簡歷之前，最好通過各種渠道找到公司內(nèi)部的人，先提前了解業(yè)務(wù)，也可以幫助后期優(yōu)秀 offer 的決策。 要勇于說不，對于某些 offer 待遇不滿意、業(yè)務(wù)不喜歡，應(yīng)該相信自己，不要因為當(dāng)下沒有更好的 offer 而投降，一份工作短則一年長則 N 年，為了幸福生活要慎重選擇?。?！
第一次跳槽十分忐忑不安，和沒畢業(yè)的時候開始找工作是一樣的感受，真的要相信自己，有條不紊的進行。如果有我能幫忙的地方歡迎隨時找我，比如簡歷修改、內(nèi)推、最起碼，可以把煩心事說一說，人嘛都會有苦惱的～
祝愿大家都有美好的未來，拿下滿意的 offer。
作者：黃梵高
https://juejin.cn/post/6944687690398826503
- EOF -