关于面试: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 埋点实现原理理解一下

为什么通常在发送数据埋点申请的时候应用的是 1×1 像素的通明 gif 图片

• 为什么通常在发送数据埋点申请的时候应用的是 1×1 像素的通明 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 张。