17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲

本文首发于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-项目/技术之外

项目开发中有遇到什么挑战没？

对哪个项目印象比较深刻深刻，遇到最难的项目是啥？

项目研发流程中作为前端开发一般扮演的啥角色？

现在有的项目中觉得哪些项目可以继续优化，为啥没有优化？

平时写项目总结么，一般总结哪些东西？

工作中能够持续学习么？

学习的动力怎么来的，如何维持？

未来会有什么样的规划？

对于加班你是怎么看的？

说下你学习前端的历程吧？

前端未来展望？

最后希望大家都能找到好的工作
完整思维导图实在太大，可关注公众号「前端复习课」回复“思维导图”获取。

17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲相关推荐

17张思维导图，一网打尽机器学习统计基础（附下载）
本文用一系列「思维导图」由浅入深的总结了「统计学」领域的基础知识,是对之前系列文章做的一次完整的梳理,也是我至今为止所有与统计有关的学习笔记.普通人难以做到"一次学习",经典知识总 ...
地理防灾减灾思维导图_17张思维导图，让你轻松学好高中地理必修一
高中地理必修一是整个高中教学的难点和重点,对于自然地理的学习,大家可能会感觉头疼,因为过于抽象的空间和思维.但这块"硬骨头"必须啃下来,因为必修一的知识,对于后期的学习起到至关重要 ...
python编程思维导图_用来梳理 Python 编程核心知识15张思维导图
原标题:用来梳理 Python 编程核心知识15张思维导图小编这次在逛论坛的时候,无意中发现了一份python的武功秘籍,也就是一份思维导图,堪称业界经典! 思维导图可以有力地激发你的联想,通过一个 ...
谁再说mysql难学，我一张思维导图就扔过去，看完再说话
前言可能说起mysql,哪怕一个刚入门的小白都会跟我说,太低级了,这玩意有什么可整的,没啥意思,除了增删改查,索引,序列,还有什么呢?真当哥们是二B了呀我就哈哈一笑,小伙子,还是太年轻啊,来看这张 ...
果真这么难学？谁再说mysql难学，我一张思维导图就扔过去！
前言可能说起mysql,哪怕一个刚入门的小白都会跟我说,太低级了,这玩意有什么可整的,没啥意思,除了增删改查,索引,序列,还有什么呢?真当哥们是二B了呀我就哈哈一笑,小伙子,还是太年轻啊,来看这张 ...
一篇文章一张思维导图看懂Android学习最佳路线
一篇文章一张思维导图看懂Android学习最佳路线先上一张android开发知识点学习路线图思维导图 Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级 ...
16张思维导图+学习路线图，囊括所有Python基础，可打印
今天给大家分享的是关于Python基础的14张思维导图,对于大家知识的梳理会有很大的帮助,另外还有两张Python学习路线图,全面系统,让初学者不走弯路.一起来看一看吧! 前面知识回顾!!!!! 程序 ...
GitHub 13.1k | 所有的编程知识，都在这100 张思维导图里了
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要15分钟 Follow小博主,每天更新前沿干货转自:量子位编程里能用到的所有知识,都在这里了. 这个号称东半球最全最酷的编程学习项目,不仅 ...
python编程基础知识体系_最新版 17 幅思维导图：Python 编程之核心知识体系
原标题:最新版 17 幅思维导图:Python 编程之核心知识体系导读:本文主要涵盖了 Python 编程的核心知识,展示了一系列思维导图,主要就 Python 核心基础知识进行了细致梳理.无论你是 ...