本文首發於17張思維導圖，2021年作為一名前端開發者需要掌握這些，前端面試複習資料參考大綱，轉載請聯絡作者

前言

2020年最後一個月了，熬夜多天整理出17張思維導圖，對前端面試複習知識點進行了最全的總結，分享給大家。每個知識點都儘量找到最好的文章來解釋，通過思維導圖的形式進行展示。

給大家準備了高清的思維導圖和食用更加方便的PDF文件，全部聚合思維導圖一張，分類思維導圖17張，涉及前端開發的方方面面面，JS基礎，工程化，效能優化，安全，框架等。如果您是準備面試，或者享擴充套件前端知識，都可以通過這個目錄進行學習。

廢話不多說，下面分類展開來說，收藏起來吧

完整思維導圖實在太大，可關注公眾號「前端複習課」回覆“思維導圖”獲取高清大圖，總共18張，還有整理好的PDF哦。

1-Javascript

內建型別

• 介紹一下JS內建型別有哪些

  • JavaScript 資料型別和資料結構

• 介紹一下typeof區分型別的原理

  • JavaScript中typeof原理探究？

• 介紹一下型別轉換

  • 深入理解JS的型別、值、型別轉換

作用域

• 說說你對javascript的作用域的理解

  • JavaScript深入之詞法作用域和動態作用域

• 什麼是作用域鏈

  • JavaScript深入之作用域鏈

• 解釋下 let 和 const 的塊級作用域

  • ES6塊級作用域

執行上下文

• 說說你對執行上下文的理解

  • JavaScript深入之執行上下文棧
  • 深入理解JavaScript執行上下文和執行棧

閉包

• 對閉包的看法，為什麼要用閉包？說一下閉包原理以及應用場景

  • JavaScript閉包的底層執行機制
  • 對閉包的看法，為什麼要用閉包？說一下閉包原理以及應用場景
  • 發現 JavaScript 中閉包的強大威力

• 閉包問題及優化

  • 閉包問題及解決
  • 為什麼閉包不會被垃圾回收清除

this指向

• 如何確定this指向

  • 徹底搞懂js this指向問題

• 改變 this 指向的方式都有哪些

• 介紹箭頭函式的 this

  • 什麼時候你不能使用箭頭函式？

原型/繼承

• 說一下對原型鏈的理解，畫一個經典的原型鏈圖示

  • 進階必讀：深入理解 JavaScript 原型
  • 最詳盡的 JS 原型與原型鏈終極詳解，沒有「可能是」。（一）
  • 最詳盡的 JS 原型與原型鏈終極詳解，沒有「可能是」。（二）
  • 最詳盡的 JS 原型與原型鏈終極詳解，沒有「可能是」。（三）

• 舉例說明js如何實現繼承

  • 做完這48道題徹底弄懂JS繼承

• ES5/ES6 的繼承除了寫法以外還有什麼區別

  • ES5/ES6 的繼承除了寫法以外還有什麼區別？

事件迴圈

• 你對事件迴圈有了解嗎？說說看！

  • Event Loop的規範和實現
  • 徹底吃透 JavaScript 執行機制
  • 前端中的事件迴圈eventloop機制

• 微任務和巨集任務有什麼區別

• 瀏覽器和Node 事件迴圈的區別

  • 瀏覽器與Node的事件迴圈(Event Loop)有何區別

非同步程式設計

• 非同步解決方案有哪些

  • 還在找什麼，JavaScript的非同步程式設計解決方案全在這裡了

• Promise

  • 實現一個Promise
  • 實現Promise.all，race，allSeleted等
  • async/await

2-DOM

事件

• 事件冒泡、捕獲等理解

  • 你真的理解 事件冒泡 和 事件捕獲 嗎？

• 介紹下瀏覽器事件委託

  • 事件委託

• 實現一個自定義事件

  • 建立自定義事件

dom操作

• 原生JS DOM操作方法彙總

位置與大小

• JavaScript獲取DOM元素位置和尺寸大小

  • JavaScript獲取DOM元素位置和尺寸大小

3-CSS

BFC

• BFC 是什麼？觸發 BFC 的條件是什麼？有哪些應用場景？

  • 前端面試之BFC
  • 怎麼回答當面試官問你什麼是BFC

1px

• 如何解決移動端 Retina 屏 1px 畫素問題

  • 移動端1px解決方案

position

• position 有哪些屬性

• position: sticky 用過沒，有啥效果

  • 殺了個回馬槍，還是說說position:sticky吧

flex

• flex:1 的完整寫法是？分別是什麼意思？

  • Flex 佈局教程：語法篇

重繪迴流

• 介紹下重繪和迴流（Repaint & Reflow），以及如何進行優化

  • 介紹下重繪和迴流（Repaint & Reflow），以及如何進行優化

• 說說你對GPU的理解，舉例說明哪些元素能觸發GPU硬體加速？

  • Web 效能優化-CSS3 硬體加速(GPU 加速)

常見佈局

• 居中

  • 面試官：你能實現多少種水平垂直居中的佈局（定寬高和不定寬高）

• 單列布局

• 兩列自適應佈局

• 三欄佈局

• 粘連佈局

  • 幾種常見的CSS佈局

動畫實現

• css 如何實現動畫

  • CSS3動畫實踐
  • CSS動畫的效能優化

• 使用純CSS程式碼實現動畫的暫停與播放

  • 純 CSS 方式實現 CSS 動畫的暫停與播放！

• 使用css3動畫代替js的動畫有什麼好處？

  • 使用CSS3動畫代替JS動畫的好處

盒模型

• CSS盒模型詳解（圖文教程）

4-瀏覽器

跨域

• 跨域通訊有哪些方式

  • 前端跨域通訊的幾種方式
  • CORS 簡單請求+預檢請求（徹底理解跨域）

• 表單可以跨域嗎

  • 為什麼form表單提交沒有跨域問題，但ajax提交有跨域問題？

從輸入URL到頁面展示，這中間發生了什麼？

• 一文摸透從輸入URL到頁面渲染的過程
• 從輸入 URL 到頁面展示到底發生了什麼？看完吊打面試官！
• 從輸入 URL 到頁面展示，這中間發生了什麼？
• 從輸入URL到頁面展示，這中間發生了什麼？
• 前端經典面試題: 從輸入URL到頁面載入發生了什麼？

HTML、CSS和JavaScript，是如何變成頁面的？

• 瀏覽器的工作原理
• 從 8 道面試題看瀏覽器渲染過程與效能優化

chrome僅僅打開了1個頁面，為什麼有4個程序？

• 僅僅打開了1個頁面，為什麼有4個程序？
• 僅僅打開了1個頁面，為什麼有4個程序？

localstorage

• 關於客戶端儲存的前端面試題總結

cookie

• 聊一聊cookie

5-網路

HTTP

• 你知道哪些http頭部

  • 詳解 HTTP 頭部資訊

• 說一下 Http 快取策略，有什麼區別，分別解決了什麼問題

  • 瀏覽器快取知識小結及應用
  • 淺談 Web 快取

TCP

• 請描述處TCP的三次握手和四次揮手

  • 面試官，不要再問我三次握手和四次揮手
  • 兩張動圖-徹底明白TCP的三次握手與四次揮手

• 為什麼瀏覽器要限制tcp的連線最大個數？

  • 瀏覽器允許的併發請求資源數是什麼意思？

HTTP2

• HTTP2.0 特點

  • HTTP/2 相比 1.0 有哪些重大改進？

• 說一下 HTTP2.0 多路複用原理，多路復⽤有哪些優勢？

  • HTTP 2.0 的二進位制幀、流、多路複用

HTTPS

• 簡述https原理，以及與http的區別

  • 一個故事講完https
  • 一次安全可靠的通訊——HTTPS原理
  • HTTPS系列2——證書的信任鏈校驗：certificate trust chain

CDN

• CDN 是什麼？描述下 CDN 原理？為什麼要用 CDN?

  • 關於 cdn、回源等問題一網打盡

DNS

• DNS 查詢的過程，分為哪兩種，是怎麼一個過程

  • 淺析DNS域名解析過程

6-框架

vue

• 你知道Vue響應式資料原理嗎？Proxy 與 Object.defineProperty 優劣對比

  • 深入 Vue 響應式原理，活捉一個 MVVM
  • Vue3 的響應式和以前有什麼區別，Proxy 無敵？
  • 面試官: 實現雙向繫結Proxy比defineproperty優劣如何?
  • Vue3 中的資料偵測

• Vue2.x元件通訊有哪些方式

  • vue中8種元件通訊方式

• Vue 中的 computed 和 watch 的區別在哪裡

  • Vue 裡的 computed 和 watch 的區別

• 元件中的data為什麼是一個函式

  • Vue-元件的data屬性為什麼必須是函式？
  • 元件中的data為什麼是一個函式而不是一個物件

• nextTick的實現原理是什麼

  • Vue.nextTick，瞭解一下？

• 說說你對keep-alive元件的瞭解

  • Vue keep-alive深入理解及實踐總結

• 你都做過哪些Vue的效能優化

  • Vue 專案效能優化 — 實踐指南

• vue3.0介紹

  • Vue3新特性一篇搞懂

• Composition API 的出現帶來哪些新的開發體驗，為啥需要這個

  • Vue3快速上手指南-CompositionAPI

• vuex

  • 什麼情況下使用 Vuex

    • 什麼時候該用vuex?

  • 可以直接修改state的值麼

    • vuex直接修改state 與 用dispatch／commit來修改state的差異

  • 為什麼 Vuex 的 mutation 中不能做非同步操作

    • vuex中為什麼把把非同步操作封裝在action，把同步操作放在mutations？

  • v-model和vuex有衝突麼

    • 表單處理

• router

  • 路由懶載入是什麼意思？如何實現路由懶載入

    • 路由懶載入

  • Vue-router 導航守衛有哪些

    • 導航守衛

  • vue路由hash模式和history模式實現原理分別是什麼，他們的區別是什麼

    • 前端路由簡介以及vue-router實現原理

react

• React 事件繫結原理

  • 深入理解React：事件機制原理

• React中的setState缺點是什麼呢

• React元件通訊如何實現

  • React 元件通訊的五種方式

• 類元件和函式元件的區別

  • React 函式式元件和類元件的區別，不是隻有state和效能！

• 請你說說React的路由是什麼

  • 從路由原理出發，深入閱讀理解react-router 4.0的原始碼

• React有哪些效能優化的手段

  • 21個React效能優化技巧
  • React效能優化的8種方式瞭解一下？

• React hooks用過嗎，為什麼要用

  • 為什麼需要React Hooks?
  • 一文徹底搞懂react hooks的原理和實現

vue/react

• 虛擬DOM的優劣如何

  • 虛擬 DOM 到底是什麼？
  • 虛擬DOM的優劣如何

• v-for迴圈中key有什麼作用？

  • Vue2.0 v-for 中 :key 到底有什麼用？
  • 寫 React / Vue 專案時為什麼要在列表元件中寫 key，其作用是什麼？

• React 和 Vue 的 diff 時間複雜度從 O(n^3) 優化到 O(n) ，那麼 O(n^3) 和 O(n) 是如何計算出來的

  • React 和 Vue 的 diff 時間複雜度從 O(n^3) 優化到 O(n) ，那麼 O(n^3) 和 O(n) 是如何計算出來的？
  • React 和 Vue 的 diff 時間複雜度從 O(n^3) 優化到 O(n) ，那麼 O(n^3) 和 O(n) 是如何計算出來的？

• 聊聊 Redux 和 Vuex 的設計思想

  • Vuex、Flux、Redux、Redux-saga、Dva、MobX

7-工程化

腳手架

• 你知道什麼是腳手架嗎？

  • 前端腳手架，聽起來玄乎，實際呢？
  • 自制前端腳手架

• 你們公司有自己的腳手架工具麼，他是怎麼工作的

構建工具

• webpack

  • webpack的核心思想是什麼

    • Webpack原理淺析
    • 理解webpack原理，手寫一個100行的webpack

  • Loader和Plugin的區別

    • webpack 中 loader 和 plugin 的區別是什麼

  • 有哪些常見的Loader和Plugin，簡單聊一聊各自的作用

    • Webpack 入門以及常見 Loader 和常用外掛的使用

  • 說一下 Webpack 的熱更新原理吧

    • Webpack HMR 原理解析

  • 如何優化 Webpack 的構建速度

    • 優化 Webpack 的構建速度

  • 自己寫過Loader和Plugin麼

    • webpack loader和plugin編寫
    • Writing a Loader

  • 程式碼分割的本質是什麼？有什麼意義呢

    • 程式碼分離
    • 詳解webpack code splitting

  • 說下 tree-shaking 的原理

    • Webpack Tree shaking 深入探究

  • babel原理

    • 一文徹底讀懂Babel

專案部署

• 你們公司專案釋出流程是什麼樣的

• 前端資源釋出路徑怎麼實現非覆蓋式釋出（平滑升級）？

  • 前端開發體系建設日記

• SSR專案是如何釋出的

內部包

• 你有釋出過自己的npm包嗎？流程是怎樣的？

• 介紹下 npm 模組安裝機制，為什麼輸入 npm install 就可以自動安裝對應的模組？

  • 每一個前端工程師都應該掌握的 npm install 原理

• 你會搭建私有的npm倉庫嗎？怎麼搭建？

  • 分分鐘教會你搭建企業級的 npm 私有倉庫

開發規範

• eslint

運維

• nginx
• cdn

git

構建優化

• Webpack 為什麼慢，如何進行優化

  • 優化 Webpack 的構建速度

8-效能

頁面是否可以快速載入

• 網路優化

  • http2
  • CDN

• 程式碼大小

  • 程式碼分割
  • 程式碼壓縮
  • tree-shaking

• SSR

  • 徹底理解服務端渲染 - SSR原理

• 離線

  • h5 秒開方案大全
  • Hybrid App 離線包方案實踐（附開原始碼）
  • 極致的 Hybrid：航旅離線包再加速！

• 快取

  • 瀏覽器快取知識小結及應用
  • 淺談 Web 快取

是否允許使用者快速開始與之互動

• 渲染優化

  • 從 8 道面試題看瀏覽器渲染過程與效能優化

• web worker

  • 使用Web Worker優化程式碼

滾動和動畫是否流暢

• 如何優化大資料列表（10萬+）的效能？說說你的方案

  • 「前端進階」高效能渲染十萬條資料(虛擬列表)

• requestAnimationFrame

• 動畫效能如何檢測

• js動畫和css動畫有什麼區別

• 分離圖層做動畫有什麼好處呢

  • css3動畫優化

• 重繪重排

  • Web 效能優化-CSS3 硬體加速(GPU 加速)

圖片優化

• 圖片壓縮

• 圖片懶載入

  • 圖片懶載入從簡單到複雜

骨架屏+合理的loading

• 網頁骨架屏自動生成方案（dps）
• 一種自動化生成骨架屏的方案

9-監控

異常

• 專案中如何進行異常捕獲

  • 前端開發不得不知道的異常捕獲技巧

• 為什麼會有那麼多Script Error錯誤

  • Script error.全面解析

效能

• 前端是如何監控效能的

  • 騰訊前端團隊是如何做web效能監控的？
  • 螞蟻金服如何把前端效能監控做到極致?

埋點

• 頁面埋點怎麼實現

  • web 埋點實現原理了解一下

為什麼通常在傳送資料埋點請求的時候使用的是 1x1 畫素的透明 gif 圖片

• 為什麼通常在傳送資料埋點請求的時候使用的是 1x1 畫素的透明 gif 圖片？

sendbeacon

10-安全

- [2020全網最全前端安全綜述](https://mp.weixin.qq.com/s/Qm_YI9pxfWQJpSLwbSFKbw)

xss

• 如何防止XSS攻擊？

csrf

• 如何防止CSRF攻擊？

網路傳輸安全

• 一次安全可靠的通訊——HTTPS原理000046a5fdc7802a15f7508b556413
• HTTPS中間人攻擊實踐（原理·實踐）

介面加簽

• API 介面的引數加密簽名設計思路（引數加密+超時處理+私鑰驗證+Https）

介面加密

介面防重放

• Api 介面安全-防篡改,防重放理解總結

環境檢測

程式碼加密混淆

無處不在的驗證碼s

• 驗證碼WEB端產品調研（一）：Google reCAPTCHA
• 驗證碼WEB端產品調研（二）：極限驗證

瀏覽器為什麼要阻止跨域請求？如何解決跨域？每次跨域請求都需要到達服務端嗎？

• 為什麼瀏覽器要限制跨域訪問?

11-Node

node 事件迴圈

• Node.js 事件迴圈-比官方更全面

談談 node 的記憶體洩漏

• 如何分析 Node.js 中的記憶體洩漏

node 中間層怎樣做的請求合併轉發

pm2 怎麼做程序管理，程序掛掉怎麼處理

SSR

• SSR解決了什麼問題？有做過SSR嗎？你是怎麼做的？

  • 徹底理解服務端渲染 - SSR原理

• SSR這麼好為啥不大規模使用了，基本公司專案還走的是前端渲染

GraphQL

• 使用過GraphQL麼，解決了什麼問題

• 和普通介面相比GraphQL有什麼優勢呢

  • GraphQL-BFF：微服務背景下的前後端資料互動方案

12-跨端

Hybrid App

• 說一下H5和native之間是如何進行互動的，知道jsbridge麼

  • 小白必看，JSBridge 初探
  • Hybrid App技術解析 -- 原理篇
  • Hybrid App技術解析 -- 實戰篇

Weex

• weex實現大致原理

  • 深入理解weex核心原理

RN

Flutter

13-微信開發

公眾號

• 微信授權流程

  • 微信掃碼登入的幾秒鐘裡，到底發生了什麼

小程式

• 瞭解微信小程式的底層實現嗎

  • 小程式簡介

• h5跟小程式有什麼區別

• 五花八門的小程式框架實現原理知道麼

  • 為何我們要用 React 來寫小程式 - Taro 誕生記

14-新主題

微前端

• 你瞭解什麼是微前端嗎？說說你對它的理解？

  • 可能是你見過最完善的微前端解決方案

serverless

• 說說你對serverless的理解，它對前端有什麼影響？

  • Serverless 掀起新的前端技術變革

邊緣計算

• 你聽過邊緣計算嗎？說說你對它的理解？

  • 前端效能優化：當頁面渲染遇上邊緣計算
  • 什麼是邊緣計算？一文讀盡秒懂

WebAssembly

15-手寫

Promise

• 手寫一個Promise

  • 面試官：“你能手寫一個 Promise 嗎”

• 使用Promise實現紅綠燈交替重複亮

  • 使用Promise實現紅綠燈交替重複亮

• Promise.all，race，allSeleted

• sendRequests(urls, max, callback)，同一時間最多發起max個請求，請求全部完成後執行callback

• maxRequest(fn, maxNum)，實現maxRequest，成功後resolve結果，失敗後重試，嘗試超過一定次數才真正的reject

• 頁面上有一個輸入框，兩個按鈕，A按鈕和B按鈕，點選A或者B分別會發送一個非同步請求，請求完成後，結果會顯示在輸入框中。使用者隨機點選A和B多次，要求輸出顯示結果時，按照使用者點選的順序顯示

  • 一道賦值面試題引發的思考3【併發數控制】

this

• call/apply

• bind

  • 手寫call、apply、bind實現及詳解

• new

  • new操作符的實現

• 鏈式呼叫4.add(1).add(2).add(3)

原型鏈

• instanceof

  • 手寫一個instanceOf

• 各種繼承

  • JavaScript深入之繼承的多種方式和優缺點

閉包

• 修改函式正確執行

• 柯里化

  • JavaScript專題之函式柯里化

防抖節流

• debounce

  • JavaScript專題之跟著underscore學防抖

• throttle

  • JavaScript專題之跟著 underscore 學節流

網路請求

• 手寫AJAX

  • 手寫 AJAX

• 手寫JSONP

  • jsonp的原理與實現

設計模式

• eventEmiter

  • 從觀察者模式到手寫EventEmitter原始碼

• singleton

深拷貝

• JS基本資料型別和引用資料型別的區別及深淺拷貝
• JavaScript專題之深淺拷貝

16-高頻演算法

字串

• 反轉字串
• 字串中的第一個唯一字元
• 最長公共字首

陣列

• 合併兩個有序陣列
• 陣列中重複的數字
• 兩個陣列的交集
• 旋轉陣列
• 兩數之和

連結串列

• 合併兩個有序連結串列
• 刪除中間節點
• 移除連結串列元素
• 反轉連結串列
• 刪除連結串列的倒數第N個節點
• 環形連結串列
• 從尾到頭列印連結串列

二叉樹

• 二叉樹的遍歷-前序中序後序層次
• 二叉樹的最大深度
• 二叉搜尋樹
• BST 的查詢
• 平衡二叉樹
• 完全二叉樹

棧/佇列

• 有效的括號

排序

• 氣泡排序
• 選擇排序
• 插入排序
• 希爾排序
• 歸併排序
• 快速排序
• 堆排序

遞迴

• 斐波那契數列
• 漢諾塔問題

二分法

• 愛吃香蕉的珂珂
• x的平方根
• 尋找兩個正序陣列的中位數
• 搜尋旋轉排序陣列
• 搜尋插入位置

動態規劃

• 最長上升子序列
• 爬樓梯
• 最大子序和
• 最小路徑和
• 打家劫舍
• 買賣股票的最佳時機

貪心與分治

• 分發餅乾
• 檸檬水找零
• 模擬行走機器人

滑動視窗

• 滑動視窗最大值
• 無重複字元的最長子串
• 盛最多水的容器

位運算

• N皇后 II
• 顛倒二進位制位
• 位1的個數

17-專案/技術之外

專案開發中有遇到什麼挑戰沒？

對哪個專案印象比較深刻深刻，遇到最難的專案是啥？

專案研發流程中作為前端開發一般扮演的啥角色？

現在有的專案中覺得哪些專案可以繼續優化，為啥沒有優化？

平時寫專案總結麼，一般總結哪些東西？

工作中能夠持續學習麼？

學習的動力怎麼來的，如何維持？

未來會有什麼樣的規劃？

對於加班你是怎麼看的？

說下你學習前端的歷程吧？

前端未來展望？

最後希望大家都能找到好的工作
完整思維導圖實在太大，可關注公眾號「前端複習課」回覆“思維導圖”獲取高清大圖，總共18張，還有整理好的PDF哦。