歸類總結金三銀四前端面試題，8個方面讓你在金九銀十識訓滿滿

前言

隨著4月份還有幾天的結束，金三銀四也要結束了， 小編想綜合一次面試題，把大家面試中問的面試題歸類總結，于是和參加了面試的小伙伴大致聊了一下面試情況（聊得不多），最后小編把面試題分為了8個方面，每個部分都會帶有面試題及部分參考答案，可能涉及到面試題范圍小，那么大家遇到的面試題也可以在評論區說說哦，給要參加金九銀十的小伙伴們做個參考，

8個面試題方面

（下面題目的🌟代表面試頻率出現過多次）

• JavaScript 基礎
• Css 以及優化
• vue 或 react 框架相關
• 前端打包等工程化
• 瀏覽器及常見安全問題相關
• 跨平臺技術
• 網路相關
• 少量演算法

其中并沒有 Html 相關的東西，一方面確實是相關的題目少，另外不會有太難的問題，平時開發時常見的情況基本可以解決，

還有很常見的 nodejs、serverless、GraphQL 等等面試題小編沒有總結到，但很有可能出現在你的題目里，相關題目要自行補課哦！

原生 JS 代碼

1. JavaScript 實作對上傳圖片的壓縮？

答：讀取用戶上傳的 File 物件，讀寫到畫布（canvas）上，利用 Canvas 的 API 進行壓縮，完成壓縮之后再轉成 File（Blob） 物件，上傳到遠程圖片服務器；不過有時候我們也需要將一個 base64 字串壓縮之后再變為 base64 字串傳入到遠程資料庫或者再轉成 File（Blob） 物件，

思路就是 File + Canvas 的 drawImage

**2. 談一談 JavaScript 的異步？**🌟

答： setTimeout、MutationObserver、postMessage、Promise、async、await、generator

從 MutationObserver、postMessage 會牽扯到 vue 的 $nextTick

從 generator 會聊到 co.js 實作

從 Promise 和 setTimeout 會聊到下面要說的事件回圈

3. 瀏覽器和 nodejs 事件回圈？ 🌟

答：執行堆疊，promise 是 microTask，setTimeout 是 task

需要說出來的點：首先 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 布局🌟

常用的 api 和兩列、三列布局等等，對于我來說稍微有點難度，之前專案對兼容性高，基本沒怎么用過 flex 布局，沒用過的建議用一用，幾個小時就會常見布局了，

2. 優化長串列滾動效果

transition 優化影片效果，分層渲染

后面分析了一下，可以用 transform 進行強制分層，第二種可以用 content-visibility 將看不見的元素不渲染，設定值為 auto 即可，第三個是對于某些影片效果，可以用 will-change 作用在父元素上進行 gpu 加速，使用后刪掉，

3. 回應式布局 🌟

答： 可能會涉及 css 函式，rem/em 區別，媒體查詢…

4. 什么是 BFC？

答： 塊級格式化背景關系，我布局總用！

問： 什么會形成 BFC？ 它的作用是什么？

答：

• body 根元素
• 浮動元素：float 除 none 以外的值
• 絕對定位元素：position (absolute、fixed)
• display 為 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

vue 或 react 框架相關

1. vue 回應式原理以及雙向系結實作代碼 ? 🌟

2. vue3 回應式原理，有什么不同？

3. vue 的 diff 演算法思路，怎么對比節點？

4. vue 的 compile 實作？ 🌟

5. vue 如何自定義指令？ 具體的 api 寫法？

6. vue3 對于 vue2 在性能上的優化（從 compile 和 runtime 兩方面）？

7. react 有什么不同？了解 hooks 嗎？

8. 用過 TypeScript 嗎？ 有什么優點，為什么用？ 具體的場景，使用 TypeScript 進行型別定義，

答：vue 專案多， ts 用的少，也用過，寫前端監控 sdk 時，對介面進行型別校驗，它像一個檔案，每一個介面都有定義，后面再翻看瞬間理解意思，（強型別好處還有很多，但是個人覺得寫起來超級麻煩，當然有人很喜歡很爽，）

9. vue 的 keep-alive 使用場景，以及原理？ 🌟

前端打包等工程化

1. webpack 和 rollup 使用？

2. tree-shaking 原理？ 🌟

3. webpack loader 和 plugin 怎么寫？

4. 你對 vite 熟悉，和 webpack 區別？

5. 給 vite 做的貢獻和在實際專案的使用？

• vite-electron-quick Git 地址

• 代碼被 merge 的 pr 歷史

瀏覽器及常見安全問題相關

1. 瀏覽器頁面加載程序，越詳細越好 🌟

2. 瀏覽器快取 🌟

3. 跨域問題及處理 🌟

4. v8 快陣列慢陣列，hidden class 或者其他模塊？

5. xss 和 csrc 的意思？如何防范？ 🌟

答： 美團的兩篇文章擺出來，面試官直接問下一題！

• xss 防范

• csrf 防范

跨平臺技術

1. electron 使用，如何實作小托盤功能？

2. flutter 的 widget stateFullWidget stateLessWidget 區別？

3. js Bridge 的原理 ？ 🌟

4. flutter 的渲染引擎？

網路相關

1. dns 相關，dns 服務器是什么，如何查詢 dns 的？ 🌟

2. Oauth2.0 和 jwt 單點登錄等

3. http/https 區別？ 為什么 https 更安全一點？ https 為什么也不是十分安全？

4. http1.x 和 http2.0 的區別？ http2.0 優點，以及某些情況會比 1.x 速度更慢？

5. https 加密原理？

6. http2.0 壓縮頭，以及并行請求原理？

7. tcp 的連接方式？

少量演算法

1.回文串，中心擴散法

2.冒泡，快排 🌟

3.二分查找 🌟

4.二叉樹 🌟

5.動態規劃

需要完整版前端面試題總結-綜合問題的PFD資料的小伙伴們，請點擊這里自行獲取哦

總結

• 框架原理真的深入某一部分具體的代碼和實作方式時，要多注意到細節，不要只能寫出一個框架，
• 演算法方面很薄弱的，最好多刷一刷，不然影響你的工資和成功率😯
• 在投遞簡歷之前，最好通過各種渠道找到公司內部的人，先提前了解業務，也可以幫助后期優秀 offer 的決策，
• 要勇于說不，對于某些 offer 待遇不滿意、業務不喜歡，應該相信自己，不要因為當下沒有更好的 offer 而投降，一份作業短則一年長則 N 年，為了幸福生活要慎重選擇！！！

小編這個只是做了小小的歸類總結，不夠全面，大家有遇到的奇葩的、印象深刻的等面試題也歡迎打在評論區哦，喜歡這篇文章文章的小伙伴們點贊+轉發支持，你們的支持是我最大的動力！