前端面經有哪些

今天就跟大家聊聊有關前端面經有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

面試之前

先說好，問題的答案都不是唯一的， 大部分只提供題目哈 ，后面有答案會慢慢補上！當時回答的都不是特別完全。面試過程比較長，從年初開始斷斷續續面試，沒有做太詳細的規劃，有些答案也不記得當時怎么回答的。

年初面試的公司還是比較多的，美團、頭條、阿里、快手、滴滴、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 框架相關

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. vue 響應式原理以及雙向綁定實現代碼 ? :star2:

3. vue3 響應式原理，有什么不同？

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

5. vue 的 compile 實現？:star2:

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

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

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

答：（雖然我不會，但我可以說點別的，比如 vue3 也有 hooks，它的使用和一些優點？）

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

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

1. vue 的 keep-alive 使用場景，以及原理？:star2:

前端打包等工程化

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. webpack 和 rollup 使用？

3. tree-shaking 原理？:star2:

4. webpack loader 和 plugin 怎么寫？

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

6. 給 vite 做的貢獻和在實際項目的使用？

• vite-electron-quick Git 地址

• 代碼被 merge 的 pr 歷史

1. 如何統一對錯誤進行捕獲的？vue 的異步錯誤如何捕獲？

• 自己寫的 JS 錯誤捕獲 SDK Git 地址

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

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 瀏覽器頁面加載過程，越詳細越好 :star2:

3. 瀏覽器緩存 :star2:

4. 跨域問題及處理 :star2:

5. v8 快數組慢數組，hidden class 或者其他模塊？

6. xss 和 csrc 的意思？如何防范？:star2:

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

• xss 防范

• csrf 防范

跨平臺技術

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. electron 使用，如何實現小托盤功能？

3. flutter 的 widget stateFullWidget stateLessWidget 區別？

4. js Bridge 的原理 ？:star2:

5. flutter 的渲染引擎？

網絡相關

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. dns 相關，dns 服務器是什么，如何查詢 dns 的？:star2:

3. Oauth3.0 和 jwt 單點登錄等

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

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

6. https 加密原理？

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

8. tcp 的連接方式？

少量算法

• 回文串，中心擴散法

• 冒泡，快排 :star2:

• 二分查找 :star2:

• 二叉樹 :star2:

• 動態規劃 （沒遇到考這個的，可能難度太高，面試官看我簡單的半天才拿下，這個直接不考慮了，大佬可以關注一下）

面試中的項目題

大概就是讓你去設計一個系統的技術選型，或者是如何設計組件庫，設計一個系統。個人猜測對于渣渣的我，這種題就是看看有沒有 owner 意識，而且也可以看一下我對哪些技術更感興趣？

除了系統，還有某些場景的設計方案，比如如何用鑒權控制登陸時間設計 保持七天登錄狀態 。

因為我簡歷中幾乎沒有涉及 nodejs 服務端的東西，但面試官總想問一問...

只能說做過自己博客的服務端...

服務端代碼 Git 地址

但是很簡陋...只能說開發過:joy:

總結

• 對于框架原理只能說個大概，真的深入某一部分具體的代碼和實現方式就只能寫出一個框架，許多細節注意不到。

• 算法方面還是很薄弱，好在面試官都很和藹可親，擅長發現人的美哈哈哈...（最好多刷一刷，不然影響你的工資和成功率:hushed:）

• 在投遞簡歷之前，最好通過各種渠道找到公司內部的人，先提前了解業務，也可以幫助后期優秀 offer 的決策。

• 要勇于說不，對于某些 offer 待遇不滿意、業務不喜歡，應該相信自己，不要因為當下沒有更好的 offer 而投降，一份工作短則一年長則 N 年，為了幸福生活要慎重選擇！！！

第一次跳槽十分忐忑不安，和沒畢業的時候開始找工作是一樣的感受，真的要相信自己，有條不紊的進行。 如果有我能幫忙的地方歡迎隨時找我，比如簡歷修改、內推、最起碼，可以把煩心事說一說 ，人嘛都會有苦惱的～

看完上述內容，你們對前端面經有哪些有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。