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