| 17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲 | 您所在的位置：网站首页 › 前端知识导图怎么做 › 17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲 |
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 1px如何解决移动端 Retina 屏 1px 像素问题 移动端1px解决方案 positionposition 有哪些属性 position: sticky 用过没，有啥效果 杀了个回马枪，还是说说position:sticky吧 flexflex: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 缓存策略，有什么区别，分别解决了什么问题 浏览器缓存知识小结及应用浅谈 Web 缓存 TCP请描述处TCP的三次握手和四次挥手 面试官，不要再问我三次握手和四次挥手两张动图-彻底明白TCP的三次握手与四次挥手为什么浏览器要限制tcp的连接最大个数？ 浏览器允许的并发请求资源数是什么意思？ HTTP2HTTP2.0 特点 HTTP/2 相比 1.0 有哪些重大改进？说一下 HTTP2.0 多路复用原理，多路复⽤有哪些优势？ HTTP 2.0 的二进制帧、流、多路复用 HTTPS简述https原理，以及与http的区别 一个故事讲完https一次安全可靠的通信——HTTPS原理HTTPS系列2——证书的信任链校验：certificate trust chain CDNCDN 是什么？描述下 CDN 原理？为什么要用 CDN? 关于 cdn、回源等问题一网打尽 DNSDNS 查询的过程，分为哪两种，是怎么一个过程 浅析DNS域名解析过程 6-框架
你知道Vue响应式数据原理吗？Proxy 与 Object.defineProperty 优劣对比 深入 Vue 响应式原理，活捉一个 MVVMVue3 的响应式和以前有什么区别，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快速上手指南-CompositionAPIvuex 什么情况下使用 Vuex 什么时候该用vuex?可以直接修改state的值么 vuex直接修改state 与 用dispatch／commit来修改state的差异为什么 Vuex 的 mutation 中不能做异步操作 vuex中为什么把把异步操作封装在action，把同步操作放在mutations？v-model和vuex有冲突么 表单处理router 路由懒加载是什么意思？如何实现路由懒加载 路由懒加载Vue-router 导航守卫有哪些 导航守卫vue路由hash模式和history模式实现原理分别是什么，他们的区别是什么 前端路由简介以及vue-router实现原理 reactReact 事件绑定原理 深入理解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行的webpackLoader和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 运维 nginxcdn git 构建优化Webpack 为什么慢，如何进行优化 优化 Webpack 的构建速度 8-性能
网络优化 http2CDN代码大小 代码分割代码压缩tree-shakingSSR 彻底理解服务端渲染 - 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)
SSR解决了什么问题？有做过SSR吗？你是怎么做的？ 彻底理解服务端渲染 - SSR原理SSR这么好为啥不大规模使用了，基本公司项目还走的是前端渲染 GraphQL使用过GraphQL么，解决了什么问题 和普通接口相比GraphQL有什么优势呢 GraphQL-BFF：微服务背景下的前后端数据交互方案 12-跨端
说一下H5和native之间是如何进行交互的，知道jsbridge么 小白必看，JSBridge 初探Hybrid App技术解析 – 原理篇Hybrid App技术解析 – 实战篇 Weexweex实现大致原理 深入理解weex内核原理 RN Flutter 13-微信开发
微信授权流程 微信扫码登录的几秒钟里，到底发生了什么 小程序了解微信小程序的底层实现吗 小程序简介h5跟小程序有什么区别 五花八门的小程序框架实现原理知道么 为何我们要用 React 来写小程序 - Taro 诞生记 14-新主题
你了解什么是微前端吗？说说你对它的理解？ 可能是你见过最完善的微前端解决方案 serverless说说你对serverless的理解，它对前端有什么影响？ Serverless 掀起新的前端技术变革 边缘计算你听过边缘计算吗？说说你对它的理解？ 前端性能优化：当页面渲染遇上边缘计算什么是边缘计算？一文读尽秒懂 WebAssembly 15-手写
手写一个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【并发数控制】 thiscall/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-高频算法
项目开发中有遇到什么挑战没？ 对哪个项目印象比较深刻深刻，遇到最难的项目是啥？ 项目研发流程中作为前端开发一般扮演的啥角色？ 现在有的项目中觉得哪些项目可以继续优化，为啥没有优化？ 平时写项目总结么，一般总结哪些东西？ 工作中能够持续学习么？ 学习的动力怎么来的，如何维持？ 未来会有什么样的规划？ 对于加班你是怎么看的？ 说下你学习前端的历程吧？ 前端未来展望？ 最后希望大家都能找到好的工作 完整思维导图实在太大，可关注公众号「前端复习课」回复“思维导图”获取。 |
【本文地址】