Web 中高級前端面試題集合（200+）

在現階段找到一份滿意的工做比較困難，在這裏分享這些天刷的一些比較典型的面試題，我面試的崗位是中高級前端，因此面試題會如下面幾種類型的面試題爲主：

1. 比較有難度的面試題；
2. 難度通常，頻率高；
3. 比較冷門，能掌握最好；

我面試時問到的一些技術問題大多數都包含在這些題目中，對我我的求職幫助仍是很大的。

原文地址

首先這些面試題大部分都是在各處蒐集來的，因此先貼出原文地址，原文的講解和題型都是最全面的，我在這裏只是作一個整理提煉而已，有充裕時間的話，強烈建議刷原文。

若是原做者【大佬】看到不容許轉載的內容，請私聊我一下，我這邊刪除相關內容，很是抱歉。

• 挑戰一輪大廠後的面試總結 (含六個方向) - 瀏覽器 篇
• 一年半經驗如何準備阿里巴巴 P6 前端面試
• 大揭祕！「恐怖」的阿里一面，我究竟想問什麼
• 如何經過餓了麼 Node.js 面試
• 面試完50我的後我寫下這篇總結
• 【1 月最新】前端 100 問：能搞懂 80% 的請把簡歷給我
• 中高級前端面試題（萬字長文）
• 前端面試常見的知識點（四處搜刮）💻
• 誠意滿滿的前端面試總結
• 年末面試-vue總結
• NodeJS有難度的面試題，你能答對幾個？
• (建議收藏)TCP協議靈魂之問，鞏固你的網路底層基礎
• 二月前端實戰面試

導讀

推薦閱讀順序（也是本文排版順序）：

• HTML 篇
• CSS 篇
• Javascript 篇
• 函數執行結果（考察知識點掌握）
• 源碼相關
• 網絡相關
• 設計模式
• 算法相關
• Nodejs 篇
• 未解答問題（無答案）
• 大廠面試題

HTML 篇

• 頁面導入樣式時，使用 link 和 @import 有什麼區別。
• 常見瀏覽器內核
• 簡述瀏覽器的渲染原理
• HTML5 的 form 的自動完成功能是什麼？
• 如何實現瀏覽器內多個標籤頁之間的通訊？
• 簡述前端性能優化
• 什麼是 webp

CSS 篇

• 介紹下 BFC 及其應用
• 怎麼讓一個 div 水平垂直居中
• 介紹下重繪和迴流（Repaint & Reflow），以及如何進行優化
• 分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景
• 簡述 CSS 盒模型
• 簡述 Rem 及其轉換原理
• 移動端視口配置
• 簡述僞類和僞元素
• 行內元素的 margin 和 padding
• CSS 中哪些屬性能夠繼承？
• CSS3 新增僞類有那些？（例如 nth-child）
• 用純 CSS 建立一個三角形
• min-width/max-width 和 min-height/max-height 屬性間的覆蓋規則？

Javascript 篇

• Vue 的響應式原理中 Object.defineProperty 有什麼缺陷？爲何在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？
• （滴滴、餓了麼）寫 React / Vue 項目時爲何要在列表組件中寫 key，其做用是什麼？
• [['1', '2', '3'].map(parseInt) what & why ?](https://github.com/a102956322...
• （挖財）什麼是防抖和節流？有什麼區別？如何實現？
• 介紹下 Set、Map、WeakSet 和 WeakMap 的區別？
• ES5/ES6 的繼承除了寫法之外還有什麼區別？
• setTimeout、Promise、Async/Await 的區別
• （頭條、微醫）Async/Await 如何經過同步的方式（形式）實現異步
• 簡述一下 Generator 函數
• （滴滴、挖財、微醫、海康）JS 異步解決方案的發展歷程以及優缺點。
• 簡述瀏覽器緩存讀取規則
• 爲何 Vuex 的 mutation 和 Redux 的 reducer 中不能作異步操做？
• （京東）下面代碼中 a 在什麼狀況下會打印 1？
• 在 Vue 中，子組件爲什麼不能夠修改父組件傳遞的 Prop，若是修改了，Vue 是如何監控到屬性的修改並給出警告的。
• 實現一個 sleep 函數
• 雙向綁定和 vuex 是否衝突
• call 和 apply 的區別是什麼，哪一個性能更好一些
• 爲何一般在發送數據埋點請求的時候使用的是 1x1 像素的透明 gif 圖片？
• （百度）實現 (5).add(3).minus(2) 功能
• 操做題（考察數組基礎）
• 操做題（考察消息隊列）
• 箭頭函數與普通函數（function）的區別是什麼？構造函數（function）可使用 new 生成實例，那麼箭頭函數能夠嗎？爲何？
• redux 爲何要把 reducer 設計成純函數
• ES6 代碼轉成 ES5 代碼的實現思路是什麼？
• Vue 的父組件和子組件生命週期鉤子執行順序是什麼
• react-router 裏的 Link 標籤和 a 標籤有什麼區別
• vue 在 v-for 時給每項元素綁定事件須要用事件代理嗎？爲何？
• 談談對 MVC、MVP、MVVM 模式的理解
• 簡單說說 js 中有哪幾種內存泄露的狀況
• 跨域問題如何解決
• instanceof 的實現原理
• react 組件的生命週期
• 簡述 Flux 思想
• 簡述執行上下文和執行棧
• 簡述瀏覽器與 Node 的事件循環
• 什麼是 CSP？
• 什麼是 CSRF 攻擊？如何防範 CSRF 攻擊？
• 談一談你理解的函數式編程？
• 什麼是尾調用，使用尾調用有什麼好處？
• Vue 組件間如何通訊？
• Vue 中 computed 和 watch 的差別？
• 簡述一下 PWA
• 介紹下 CacheStorage
• Vue 雙向數據綁定原理
• 頁面的可用性時間的計算
• 簡述一下 WebAssembly
• 談談移動端點擊
• 談談 Git-Rebase
• 簡述懶加載
• webpack 中 loader 和 plugin 的區別是什麼？

函數執行結果

• 第一題（考察 This 指針）
• 第二題（考察對象應用）
• 第三題（考察事件循環/異步）
• 第四題（考察 React 的使用）
• 第五題（考察做用域）
• 第六題（考察做用域）
• 第七題（考察數組）
• 第八題（考察賦值表達式）
• 第九題（考察賦值表達式）

源碼相關

• 如何實現函數的柯里化？
• 手寫 bind、call、apply
• 模擬 new 的實現
• 請使用 Proxy + Fetch 實現相似於 axios 的基礎 API
• 手寫 Promise
• 聊聊 Redux 的源碼實現
• 聊聊 redux-thunk 是如何實現異步 action 的？
• 簡單聊聊 new Vue 之後發生的事情
• 介紹下 webpack 熱更新原理，是如何作到在不刷新瀏覽器的前提下更新頁面的
• 簡述一下 React 的源碼實現

網絡相關

• HTTP1.0 和 HTTP1.1 有什麼區別？
• （網易）簡單講解一下 http2 的多路複用
• 介紹 HTTPS 握手過程
• HTTPS 握手過程當中，客戶端如何驗證證書的合法性
• 介紹下如何實現 token 加密
• 介紹下 HTTPS 中間人攻擊
• 說出幾個你知道的 HTTP 狀態碼及其功能
• 從輸入URL到頁面加載的全過程
• 簡述 HTTP2.0 與 HTTP1.1 相較於以前版本的改進
• SSL 鏈接斷開後如何恢復？
• 什麼是 CDN 服務？

設計模式

• 什麼是設計模式？設計模式如何解決複雜問題？
• 什麼是白箱複用和黑箱複用？
• 介紹下觀察者模式和訂閱-發佈模式的區別，各自適用於什麼場景
• 簡述面向對象的設計原則
• 簡述你瞭解的設計模式及應用場景

算法相關

• 使用迭代的方式實現 flatten 函數
• 介紹下深度優先遍歷和廣度優先遍歷，如何實現？
• （攜程）編寫一個程序將數組扁平化去併除其中重複部分數據，最終獲得一個升序且不重複的數組
• 給定兩個數組，寫一個方法來計算它們的交集
• 數組編程題
• 如何把一個字符串的大小寫取反（大寫變小寫小寫變大寫），例如 ’AbC' 變成 'aBc' 。
• 實現一個字符串匹配算法，從長度爲 n 的字符串 S 中，查找是否存在字符串 T，T 的長度是 m，若存在返回所在位置。
• 算法題「旋轉數組」
• （京東、快手）週一算法題之「兩數之和」
• （bilibili）編程算法題
• （阿里巴巴）如何實現數組的隨機排序？

<!-- ### 正則相關

• 檢測郵箱格式合法性 -->

Nodejs 篇

• 介紹一下 Node 裏的模塊是什麼?
• 請介紹一下 require 的模塊加載機制
• 請介紹一下 Node 中的內存泄露問題和解決方案
• 在 Node 中兩個模塊互相引用會發生什麼？
• Node 如何實現熱更新？
• 爲何 Node.js 不給每個.js文件以獨立的上下文來避免做用域被污染?
• Node 更適合處理 I/O 密集型任務仍是 CPU 密集型任務？爲何？
• 聊一聊 Node 的垃圾回收機制
• 簡單聊聊 Node 的異步 I/O
• Node 如何建立子進程？
• 進程當前的工做目錄是什麼？有什麼做用？
• console.log 是同步仍是異步? 如何實現一個 console.log？
• 父進程或子進程的死亡是否會影響對方? 什麼是孤兒進程?
• 簡單介紹一下 IPC
• 什麼是守護進程？Node 如何實現守護進程？
• 簡單介紹一下 Buffer
• 簡單介紹一下 Stream
• 什麼是粘包問題，如何解決？
• cookie 與 session 的區別? 服務端如何清除 cookie?
• hosts 文件是什麼？

<!-- ### 消息隊列

• 消息隊列的應用場景有哪些？ -->

未解答問題

• 請分別用深度優先思想和廣度優先思想實現一個拷貝函數？
• 實現 React Hooks 中的 useState 和 useEffect
• （阿里巴巴）快速排序
• （阿里巴巴）反轉鏈表

大廠面試題

• （bilibili）編程算法題
• （攜程）編寫一個程序將數組扁平化去併除其中重複部分數據，最終獲得一個升序且不重複的數組
• （阿里巴巴）介紹下深度優先遍歷和廣度優先遍歷，如何實現？
• （網易）簡單講解一下 http2 的多路複用
• （挖財）什麼是防抖和節流？有什麼區別？如何實現？
• （頭條、微醫）Async/Await 如何經過同步的方式實現異步
• （滴滴、挖財、微醫、海康）JS 異步解決方案的發展歷程以及優缺點。
• （兌吧）情人節福利題，如何實現一個 new
• （京東）下面代碼中 a 在什麼狀況下會打印 1？
• （百度）實現 (5).add(3).minus(2) 功能
• （滴滴、餓了麼）寫 React / Vue 項目時爲何要在列表組件中寫 key，其做用是什麼？
• （阿里巴巴）簡述執行上下文和執行棧
• （阿里巴巴）Vue 組件間如何通訊？
• （阿里巴巴）簡述前端性能優化
• （阿里巴巴）如何實現數組的隨機排序？
• （阿里巴巴）介紹下 CacheStorage
• （阿里巴巴）Vue 雙向數據綁定原理
• （阿里巴巴）頁面的可用性時間的計算
• （阿里巴巴）簡述一下 WebAssembly
• （阿里巴巴）談談移動端點擊
• （阿里巴巴）談談 Git-Rebase
• （阿里巴巴）簡述懶加載
• （騰訊）webpack 中 loader 和 plugin 的區別是什麼？
• （阿里巴巴）談談對 MVC、MVP、MVVM 模式的理解