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

本文首发于17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲，转载请联系作者

前言

2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。

给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。

废话不多说，下面分类展开来说，收藏起来吧

完整思维导图实在太大，可关注公众号「前端复习课」回复“思维导图”获取高清大图，总共18张。

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张。