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 加速)

常见布局

• 居中

  • 面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）

• 单列布局

• 两列自适应布局

• 三栏布局

• 粘连布局