笔记&收藏&学习

Appearance

本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

前言

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

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

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

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

由于微信公众号限制外链都不可以跳转，可以加我微信「cYang2030」领取 PDF 版本

1-Javascript ​

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 ​

2-DOM

事件 ​

  • 事件冒泡、捕获等理解

  • 你真的理解 事件冒泡 和 事件捕获 吗？

  • 介绍下浏览器事件委托

  • 事件委托

  • 实现一个自定义事件

  • 创建自定义事件

dom 操作 ​
  • 原生 JS DOM 操作方法汇总
位置与大小 ​

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

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

3-CSS ​

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 - 浏览器 ​

4 - 浏览器

跨域 ​

  • 跨域通信有哪些方式

  • 前端跨域通信的几种方式

  • CORS 简单请求 + 预检请求（彻底理解跨域）

  • 表单可以跨域吗

  • 为什么 form 表单提交没有跨域问题，但 ajax 提交有跨域问题？

从输入 URL 到页面展示，这中间发生了什么？ ​

  • 一文摸透从输入 URL 到页面渲染的过程

  • 从输入 URL 到页面展示到底发生了什么？看完吊打面试官！

  • 从输入 URL 到页面展示，这中间发生了什么？

  • 从输入 URL 到页面展示，这中间发生了什么？

  • 前端经典面试题: 从输入 URL 到页面加载发生了什么？

HTML、CSS 和 JavaScript，是如何变成页面的？ ​

  • 浏览器的工作原理

  • 从 8 道面试题看浏览器渲染过程与性能优化

chrome 仅仅打开了 1 个页面，为什么有 4 个进程？ ​

  • 仅仅打开了 1 个页面，为什么有 4 个进程？

  • 仅仅打开了 1 个页面，为什么有 4 个进程？

localstorage ​
  • 关于客户端存储的前端面试题总结
  • 聊一聊 cookie

5 - 网络 ​

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 - 框架 ​

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 中为什么把把异步操作封装在 action，把同步操作放在 mutations？

  • vuex 直接修改 state 与 用 dispatch／commit 来修改 state 的差异

  • 什么时候该用 vuex?

  • 什么情况下使用 Vuex

  • 可以直接修改 state 的值么

  • 为什么 Vuex 的 mutation 中不能做异步操作

  • v-model 和 vuex 有冲突么

  • router

  • 前端路由简介以及 vue-router 实现原理

  • 导航守卫

  • 路由懒加载

  • 路由懒加载是什么意思？如何实现路由懒加载

  • Vue-router 导航守卫有哪些

  • vue 路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么

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 - 工程化 ​

7 - 工程化

脚手架 ​

  • 你知道什么是脚手架吗？

  • 前端脚手架，听起来玄乎，实际呢？

  • 自制前端脚手架

  • 你们公司有自己的脚手架工具么，他是怎么工作的

构建工具 ​

  • webpack

  • 一文彻底读懂 Babel

  • Webpack Tree shaking 深入探究

  • 代码分离

  • 详解 webpack code splitting

  • webpack loader 和 plugin 编写

  • Writing a Loader

  • 优化 Webpack 的构建速度

  • Webpack HMR 原理解析

  • Webpack 入门以及常见 Loader 和常用插件的使用

  • webpack 中 loader 和 plugin 的区别是什么

  • Webpack 原理浅析

  • 理解 webpack 原理，手写一个 100 行的 webpack

  • webpack 的核心思想是什么

  • Loader 和 Plugin 的区别

  • 有哪些常见的 Loader 和 Plugin，简单聊一聊各自的作用

  • 说一下 Webpack 的热更新原理吧

  • 如何优化 Webpack 的构建速度

  • 自己写过 Loader 和 Plugin 么

  • 代码分割的本质是什么？有什么意义呢

  • 说下 tree-shaking 的原理

  • babel 原理

项目部署 ​

  • 你们公司项目发布流程是什么样的

  • 前端资源发布路径怎么实现非覆盖式发布（平滑升级）？

  • 前端开发体系建设日记

  • SSR 项目是如何发布的

内部包 ​

  • 你有发布过自己的 npm 包吗？流程是怎样的？

  • 介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

  • 每一个前端工程师都应该掌握的 npm install 原理

  • 你会搭建私有的 npm 仓库吗？怎么搭建？

  • 分分钟教会你搭建企业级的 npm 私有仓库

开发规范 ​
  • eslint
运维 ​

  • nginx

  • cdn

git ​
构建优化 ​

  • Webpack 为什么慢，如何进行优化

  • 优化 Webpack 的构建速度

8 - 性能 ​

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 - 监控 ​

9 - 监控

异常 ​
性能 ​

  • 前端是如何监控性能的

  • 腾讯前端团队是如何做 web 性能监控的？

  • 蚂蚁金服如何把前端性能监控做到极致?

埋点 ​

  • 页面埋点怎么实现

  • web 埋点实现原理了解一下

为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片 ​
  • 为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
sendbeacon ​

10 - 安全 ​

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

10 - 安全

xss ​
  • 如何防止 XSS 攻击？
csrf ​
  • 如何防止 CSRF 攻击？
网络传输安全 ​

  • 一次安全可靠的通信——HTTPS 原理 000046a5fdc7802a15f7508b556413

  • HTTPS 中间人攻击实践（原理 · 实践）

接口加签 ​
  • API 接口的参数加密签名设计思路（参数加密 + 超时处理 + 私钥验证 + Https）
接口加密 ​
接口防重放 ​
  • Api 接口安全 - 防篡改, 防重放理解总结
环境检测 ​
代码加密混淆 ​
无处不在的验证码 s ​

  • 验证码 WEB 端产品调研（一）：Google reCAPTCHA

  • 验证码 WEB 端产品调研（二）：极限验证

浏览器为什么要阻止跨域请求？如何解决跨域？每次跨域请求都需要到达服务端吗？ ​
  • 为什么浏览器要限制跨域访问?

11-Node ​

11-Node

node 事件循环 ​
  • Node.js 事件循环 - 比官方更全面
谈谈 node 的内存泄漏 ​
  • 如何分析 Node.js 中的内存泄漏
node 中间层怎样做的请求合并转发 ​
pm2 怎么做进程管理，进程挂掉怎么处理 ​
SSR ​

  • SSR 解决了什么问题？有做过 SSR 吗？你是怎么做的？

  • 彻底理解服务端渲染 - SSR 原理

  • SSR 这么好为啥不大规模使用了，基本公司项目还走的是前端渲染

GraphQL ​

  • 使用过 GraphQL 么，解决了什么问题

  • 和普通接口相比 GraphQL 有什么优势呢

  • GraphQL-BFF：微服务背景下的前后端数据交互方案

12 - 跨端 ​

12 - 跨端

Hybrid App ​

  • 说一下 H5 和 native 之间是如何进行交互的，知道 jsbridge 么

  • 小白必看，JSBridge 初探

  • Hybrid App 技术解析 -- 原理篇

  • Hybrid App 技术解析 -- 实战篇

Weex ​

  • weex 实现大致原理

  • 深入理解 weex 内核原理

RN ​
Flutter ​

13 - 微信开发 ​

13 - 微信开发

公众号 ​

  • 微信授权流程

  • 微信扫码登录的几秒钟里，到底发生了什么

小程序 ​

  • 了解微信小程序的底层实现吗

  • 小程序简介

  • h5 跟小程序有什么区别

  • 五花八门的小程序框架实现原理知道么

  • 为何我们要用 React 来写小程序 - Taro 诞生记

14 - 新主题 ​

14 - 新主题

微前端 ​

  • 你了解什么是微前端吗？说说你对它的理解？

  • 可能是你见过最完善的微前端解决方案

serverless ​

  • 说说你对 serverless 的理解，它对前端有什么影响？

  • Serverless 掀起新的前端技术变革

边缘计算 ​

  • 你听过边缘计算吗？说说你对它的理解？

  • 前端性能优化：当页面渲染遇上边缘计算

  • 什么是边缘计算？一文读尽秒懂

WebAssembly ​

15 - 手写 ​

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 - 高频算法 ​

16 - 高频算法

字符串 ​

  • 反转字符串

  • 字符串中的第一个唯一字符

  • 最长公共前缀

数组 ​

  • 合并两个有序数组

  • 数组中重复的数字

  • 两个数组的交集

  • 旋转数组

  • 两数之和

链表 ​

  • 合并两个有序链表

  • 删除中间节点

  • 移除链表元素

  • 反转链表

  • 删除链表的倒数第 N 个节点

  • 环形链表

  • 从尾到头打印链表

二叉树 ​

  • 二叉树的遍历 - 前序中序后序层次

  • 二叉树的最大深度

  • 二叉搜索树

  • BST 的查找

  • 平衡二叉树

  • 完全二叉树

栈 / 队列 ​
  • 有效的括号
排序 ​

  • 冒泡排序

  • 选择排序

  • 插入排序

  • 希尔排序

  • 归并排序

  • 快速排序

  • 堆排序

递归 ​

  • 斐波那契数列

  • 汉诺塔问题

二分法 ​

  • 爱吃香蕉的珂珂

  • x 的平方根

  • 寻找两个正序数组的中位数

  • 搜索旋转排序数组

  • 搜索插入位置

动态规划 ​

  • 最长上升子序列

  • 爬楼梯

  • 最大子序和

  • 最小路径和

  • 打家劫舍

  • 买卖股票的最佳时机

贪心与分治 ​

  • 分发饼干

  • 柠檬水找零

  • 模拟行走机器人

滑动窗口 ​

  • 滑动窗口最大值

  • 无重复字符的最长子串

  • 盛最多水的容器

位运算 ​

  • N 皇后 II

  • 颠倒二进制位

  • 位 1 的个数

17 - 项目 / 技术之外 ​

17 - 项目 / 技术之外

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

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

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

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

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

工作中能够持续学习么？

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

未来会有什么样的规划？

对于加班你是怎么看的？

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

前端未来展望？

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

​

❤️ 爱心三连击 ​

  1. 如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～

  2. 关注公众号前端森林，定期为你推送新鲜干货好文。

  3. 特殊阶段，带好口罩，做好个人防护。