17張思維導圖，2021年作為一名前端開發者需要掌握這些，前端面試復習資料參考大綱

前言

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

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-項目/技術之外

項目開發中有遇到什么挑戰沒？

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

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

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

平時寫項目總結么，一般總結哪些東西？

工作中能夠持續學習么？

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

未來會有什么樣的規划？

對於加班你是怎么看的？

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

前端未來展望？

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

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

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