扣脚仙女 發表於 2020-12-11 16:53:00

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

<h3 id="前言">前言</h3>
<p>2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。</p>
<h3 id="1-javascript">1-Javascript</h3>
<p><img src="https://img2020.cnblogs.com/blog/2232702/202012/2232702-20201209211912212-525102325.png"></p>
<h5 id="内置类型">内置类型</h5>
<ul>
<li>
<p>介绍一下JS内置类型有哪些</p>
<ul>
<li>JavaScript 数据类型和数据结构</li>
</ul>
</li>
<li>
<p>介绍一下typeof区分类型的原理</p>
<ul>
<li>JavaScript中typeof原理探究？</li>
</ul>
</li>
<li>
<p>介绍一下类型转换</p>
<ul>
<li>深入理解JS的类型、值、类型转换</li>
</ul>
</li>
</ul>
<h5 id="作用域">作用域</h5>
<ul>
<li>
<p>说说你对javascript的作用域的理解</p>
<ul>
<li>JavaScript深入之词法作用域和动态作用域</li>
</ul>
</li>
<li>
<p>什么是作用域链</p>
<ul>
<li>JavaScript深入之作用域链</li>
</ul>
</li>
<li>
<p>解释下 let 和 const 的块级作用域</p>
<ul>
<li>ES6块级作用域</li>
</ul>
</li>
</ul>
<h5 id="执行上下文">执行上下文</h5>
<ul>
<li>
<p>说说你对执行上下文的理解</p>
<ul>
<li>JavaScript深入之执行上下文栈</li>
<li>深入理解JavaScript执行上下文和执行栈</li>
</ul>
</li>
</ul>
<h5 id="闭包">闭包</h5>
<ul>
<li>
<p>对闭包的看法，为什么要用闭包？说一下闭包原理以及应用场景</p>
<ul>
<li>JavaScript闭包的底层运行机制</li>
<li>对闭包的看法，为什么要用闭包？说一下闭包原理以及应用场景</li>
<li>发现 JavaScript 中闭包的强大威力</li>
</ul>
</li>
<li>
<p>闭包问题及优化</p>
<ul>
<li>闭包问题及解决</li>
<li>为什么闭包不会被垃圾回收清除</li>
</ul>
</li>
</ul>
<h5 id="this指向">this指向</h5>
<ul>
<li>
<p>如何确定this指向</p>
<ul>
<li>彻底搞懂js this指向问题</li>
</ul>
</li>
<li>
<p>改变 this 指向的方式都有哪些</p>
</li>
<li>
<p>介绍箭头函数的 this</p>
<ul>
<li>什么时候你不能使用箭头函数？</li>
</ul>
</li>
</ul>
<h5 id="原型继承">原型/继承</h5>
<ul>
<li>
<p>说一下对原型链的理解，画一个经典的原型链图示</p>
<ul>
<li>进阶必读：深入理解 JavaScript 原型</li>
<li>最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）</li>
<li>最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二）</li>
<li>最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三）</li>
</ul>
</li>
<li>
<p>举例说明js如何实现继承</p>
<ul>
<li>做完这48道题彻底弄懂JS继承</li>
</ul>
</li>
<li>
<p>ES5/ES6 的继承除了写法以外还有什么区别</p>
<ul>
<li>ES5/ES6 的继承除了写法以外还有什么区别？</li>
</ul>
</li>
</ul>
<h5 id="事件循环">事件循环</h5>
<ul>
<li>
<p>你对事件循环有了解吗？说说看！</p>
<ul>
<li>Event Loop的规范和实现</li>
<li>彻底吃透 JavaScript 执行机制</li>
<li>前端中的事件循环eventloop机制</li>
</ul>
</li>
<li>
<p>微任务和宏任务有什么区别</p>
</li>
<li>
<p>浏览器和Node 事件循环的区别</p>
<ul>
<li>浏览器与Node的事件循环(Event Loop)有何区别</li>
</ul>
</li>
</ul>
<h5 id="异步编程">异步编程</h5>
<ul>
<li>
<p>异步解决方案有哪些</p>
<ul>
<li>还在找什么，JavaScript的异步编程解决方案全在这里了</li>
</ul>
</li>
<li>
<p>Promise</p>
<ul>
<li>实现一个Promise</li>
<li>实现Promise.all，race，allSeleted等</li>
<li>async/await</li>
</ul>
</li>
</ul>
<h3 id="2-dom">2-DOM</h3>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0f172bc3a1e40daad8bc9191337b6dc~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="事件">事件</h5>
<ul>
<li>
<p>事件冒泡、捕获等理解</p>
<ul>
<li>你真的理解 事件冒泡 和 事件捕获 吗？</li>
</ul>
</li>
<li>
<p>介绍下浏览器事件委托</p>
<ul>
<li>事件委托</li>
</ul>
</li>
<li>
<p>实现一个自定义事件</p>
<ul>
<li>创建自定义事件</li>
</ul>
</li>
</ul>
<h5 id="dom操作">dom操作</h5>
<ul>
<li>原生JS DOM操作方法汇总</li>
</ul>
<h5 id="位置与大小">位置与大小</h5>
<ul>
<li>
<p>JavaScript获取DOM元素位置和尺寸大小</p>
<ul>
<li>JavaScript获取DOM元素位置和尺寸大小</li>
</ul>
</li>
</ul>
<h3 id="3-css">3-CSS</h3>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/496cb1ed948a4526b791ae68f4845c0d~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="bfc">BFC</h5>
<ul>
<li>
<p>BFC 是什么？触发 BFC 的条件是什么？有哪些应用场景？</p>
<ul>
<li>前端面试之BFC</li>
<li>怎么回答当面试官问你什么是BFC</li>
</ul>
</li>
</ul>
<h5 id="1px">1px</h5>
<ul>
<li>
<p>如何解决移动端 Retina 屏 1px 像素问题</p>
<ul>
<li>移动端1px解决方案</li>
</ul>
</li>
</ul>
<h5 id="position">position</h5>
<ul>
<li>
<p>position 有哪些属性</p>
</li>
<li>
<p>position: sticky 用过没，有啥效果</p>
<ul>
<li>杀了个回马枪，还是说说position:sticky吧</li>
</ul>
</li>
</ul>
<h5 id="flex">flex</h5>
<ul>
<li>
<p>flex:1 的完整写法是？分别是什么意思？</p>
<ul>
<li>Flex 布局教程：语法篇</li>
</ul>
</li>
</ul>
<h5 id="重绘回流">重绘回流</h5>
<ul>
<li>
<p>介绍下重绘和回流（Repaint &amp; Reflow），以及如何进行优化</p>
<ul>
<li>介绍下重绘和回流（Repaint &amp; Reflow），以及如何进行优化</li>
</ul>
</li>
<li>
<p>说说你对GPU的理解，举例说明哪些元素能触发GPU硬件加速？</p>
<ul>
<li>Web 性能优化-CSS3 硬件加速(GPU 加速)</li>
</ul>
</li>
</ul>
<h5 id="常见布局">常见布局</h5>
<ul>
<li>
<p>居中</p>
<ul>
<li>面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）</li>
</ul>
</li>
<li>
<p>单列布局</p>
</li>
<li>
<p>两列自适应布局</p>
</li>
<li>
<p>三栏布局</p>
</li>
<li>
<p>粘连布局</p>
<ul>
<li>几种常见的CSS布局</li>
</ul>
</li>
</ul>
<h5 id="动画实现">动画实现</h5>
<ul>
<li>
<p>css 如何实现动画</p>
<ul>
<li>CSS3动画实践</li>
<li>CSS动画的性能优化</li>
</ul>
</li>
<li>
<p>使用纯CSS代码实现动画的暂停与播放</p>
<ul>
<li>纯 CSS 方式实现 CSS 动画的暂停与播放！</li>
</ul>
</li>
<li>
<p>使用css3动画代替js的动画有什么好处？</p>
<ul>
<li>使用CSS3动画代替JS动画的好处</li>
</ul>
</li>
</ul>
<h5 id="盒模型">盒模型</h5>
<ul>
<li>CSS盒模型详解（图文教程）</li>
</ul>
<h3 id="4-浏览器">4-浏览器</h3>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c67e236efc24a9b89c0343c20c0c834~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="跨域">跨域</h5>
<ul>
<li>
<p>跨域通信有哪些方式</p>
<ul>
<li>前端跨域通信的几种方式</li>
<li>CORS 简单请求+预检请求（彻底理解跨域）</li>
</ul>
</li>
<li>
<p>表单可以跨域吗</p>
<ul>
<li>为什么form表单提交没有跨域问题，但ajax提交有跨域问题？</li>
</ul>
</li>
</ul>
<h5 id="从输入url到页面展示这中间发生了什么">从输入URL到页面展示，这中间发生了什么？</h5>
<ul>
<li>一文摸透从输入URL到页面渲染的过程</li>
<li>从输入 URL 到页面展示到底发生了什么？看完吊打面试官！</li>
<li>从输入 URL 到页面展示，这中间发生了什么？</li>
<li>从输入URL到页面展示，这中间发生了什么？</li>
<li>前端经典面试题: 从输入URL到页面加载发生了什么？</li>
</ul>
<h5 id="htmlcss和javascript是如何变成页面的">HTML、CSS和JavaScript，是如何变成页面的？</h5>
<ul>
<li>浏览器的工作原理</li>
<li>从 8 道面试题看浏览器渲染过程与性能优化</li>
</ul>
<h5 id="chrome仅仅打开了1个页面为什么有4个进程">chrome仅仅打开了1个页面，为什么有4个进程？</h5>
<ul>
<li>仅仅打开了1个页面，为什么有4个进程？</li>
<li>仅仅打开了1个页面，为什么有4个进程？</li>
</ul>
<h5 id="localstorage">localstorage</h5>
<ul>
<li>关于客户端存储的前端面试题总结</li>
</ul>
<h5 id="cookie">cookie</h5>
<ul>
<li>聊一聊cookie</li>
</ul>
<h3 id="5-网络">5-网络</h3>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6066ba1cd4b46e581fe58757d6dad15~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="http">HTTP</h5>
<ul>
<li>
<p>你知道哪些http头部</p>
<ul>
<li>详解 HTTP 头部信息</li>
</ul>
</li>
<li>
<p>说一下 Http 缓存策略，有什么区别，分别解决了什么问题</p>
<ul>
<li>浏览器缓存知识小结及应用</li>
<li>浅谈 Web 缓存</li>
</ul>
</li>
</ul>
<h5 id="tcp">TCP</h5>
<ul>
<li>
<p>请描述处TCP的三次握手和四次挥手</p>
<ul>
<li>面试官，不要再问我三次握手和四次挥手</li>
<li>两张动图-彻底明白TCP的三次握手与四次挥手</li>
</ul>
</li>
<li>
<p>为什么浏览器要限制tcp的连接最大个数？</p>
<ul>
<li>浏览器允许的并发请求资源数是什么意思？</li>
</ul>
</li>
</ul>
<h5 id="http2">HTTP2</h5>
<ul>
<li>
<p>HTTP2.0 特点</p>
<ul>
<li>HTTP/2 相比 1.0 有哪些重大改进？</li>
</ul>
</li>
<li>
<p>说一下 HTTP2.0 多路复用原理，多路复⽤有哪些优势？</p>
<ul>
<li>HTTP 2.0 的二进制帧、流、多路复用</li>
</ul>
</li>
</ul>
<h5 id="https">HTTPS</h5>
<ul>
<li>
<p>简述https原理，以及与http的区别</p>
<ul>
<li>一个故事讲完https</li>
<li>一次安全可靠的通信——HTTPS原理</li>
<li>HTTPS系列2——证书的信任链校验：certificate trust chain</li>
</ul>
</li>
</ul>
<h5 id="cdn">CDN</h5>
<ul>
<li>
<p>CDN 是什么？描述下 CDN 原理？为什么要用 CDN?</p>
<ul>
<li>关于 cdn、回源等问题一网打尽</li>
</ul>
</li>
</ul>
<h5 id="dns">DNS</h5>
<ul>
<li>
<p>DNS 查询的过程，分为哪两种，是怎么一个过程</p>
<ul>
<li>浅析DNS域名解析过程</li>
</ul>
</li>
</ul>
<h3 id="6-框架">6-框架</h3>
<p><img src="https://img2020.cnblogs.com/blog/2232702/202012/2232702-20201209211942599-547381329.png"></p>
<h5 id="vue">vue</h5>
<ul>
<li>
<p>你知道Vue响应式数据原理吗？Proxy 与 Object.defineProperty 优劣对比</p>
<ul>
<li>深入 Vue 响应式原理，活捉一个 MVVM</li>
<li>Vue3 的响应式和以前有什么区别，Proxy 无敌？</li>
<li>面试官: 实现双向绑定Proxy比defineproperty优劣如何?</li>
<li>Vue3 中的数据侦测</li>
</ul>
</li>
<li>
<p>Vue2.x组件通信有哪些方式</p>
<ul>
<li>vue中8种组件通信方式</li>
</ul>
</li>
<li>
<p>Vue 中的 computed 和 watch 的区别在哪里</p>
<ul>
<li>Vue 里的 computed 和 watch 的区别</li>
</ul>
</li>
<li>
<p>组件中的data为什么是一个函数</p>
<ul>
<li>Vue-组件的data属性为什么必须是函数？</li>
<li>组件中的data为什么是一个函数而不是一个对象</li>
</ul>
</li>
<li>
<p>nextTick的实现原理是什么</p>
<ul>
<li>Vue.nextTick，了解一下？</li>
</ul>
</li>
<li>
<p>说说你对keep-alive组件的了解</p>
<ul>
<li>Vue keep-alive深入理解及实践总结</li>
</ul>
</li>
<li>
<p>你都做过哪些Vue的性能优化</p>
<ul>
<li>Vue 项目性能优化 — 实践指南</li>
</ul>
</li>
<li>
<p>vue3.0介绍</p>
<ul>
<li>Vue3新特性一篇搞懂</li>
</ul>
</li>
<li>
<p>Composition API 的出现带来哪些新的开发体验，为啥需要这个</p>
<ul>
<li>Vue3快速上手指南-CompositionAPI</li>
</ul>
</li>
<li>
<p>vuex</p>
<ul>
<li>
<p>什么情况下使用 Vuex</p>
<ul>
<li>什么时候该用vuex?</li>
</ul>
</li>
<li>
<p>可以直接修改state的值么</p>
<ul>
<li>vuex直接修改state 与 用dispatch／commit来修改state的差异</li>
</ul>
</li>
<li>
<p>为什么 Vuex 的 mutation 中不能做异步操作</p>
<ul>
<li>vuex中为什么把把异步操作封装在action，把同步操作放在mutations？</li>
</ul>
</li>
<li>
<p>v-model和vuex有冲突么</p>
<ul>
<li>表单处理</li>
</ul>
</li>
</ul>
</li>
<li>
<p>router</p>
<ul>
<li>
<p>路由懒加载是什么意思？如何实现路由懒加载</p>
<ul>
<li>路由懒加载</li>
</ul>
</li>
<li>
<p>Vue-router 导航守卫有哪些</p>
<ul>
<li>导航守卫</li>
</ul>
</li>
<li>
<p>vue路由hash模式和history模式实现原理分别是什么，他们的区别是什么</p>
<ul>
<li>前端路由简介以及vue-router实现原理</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="react">react</h5>
<ul>
<li>
<p>React 事件绑定原理</p>
<ul>
<li>深入理解React：事件机制原理</li>
</ul>
</li>
<li>
<p>React中的setState缺点是什么呢</p>
</li>
<li>
<p>React组件通信如何实现</p>
<ul>
<li>React 组件通信的五种方式</li>
</ul>
</li>
<li>
<p>类组件和函数组件的区别</p>
<ul>
<li>React 函数式组件和类组件的区别，不是只有state和性能！</li>
</ul>
</li>
<li>
<p>请你说说React的路由是什么</p>
<ul>
<li>从路由原理出发，深入阅读理解react-router 4.0的源码</li>
</ul>
</li>
<li>
<p>React有哪些性能优化的手段</p>
<ul>
<li>21个React性能优化技巧</li>
<li>React性能优化的8种方式了解一下？</li>
</ul>
</li>
<li>
<p>React hooks用过吗，为什么要用</p>
<ul>
<li>为什么需要React Hooks?</li>
<li>一文彻底搞懂react hooks的原理和实现</li>
</ul>
</li>
</ul>
<h5 id="vuereact">vue/react</h5>
<ul>
<li>
<p>虚拟DOM的优劣如何</p>
<ul>
<li>虚拟 DOM 到底是什么？</li>
<li>虚拟DOM的优劣如何</li>
</ul>
</li>
<li>
<p>v-for循环中key有什么作用？</p>
<ul>
<li>Vue2.0 v-for 中 :key 到底有什么用？</li>
<li>写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？</li>
</ul>
</li>
<li>
<p>React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的</p>
<ul>
<li>React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？</li>
<li>React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？</li>
</ul>
</li>
<li>
<p>聊聊 Redux 和 Vuex 的设计思想</p>
<ul>
<li>Vuex、Flux、Redux、Redux-saga、Dva、MobX</li>
</ul>
</li>
</ul>
<h3 id="7-工程化">7-工程化</h3>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f81f6b789014cccb58907eb09c579bf~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="脚手架">脚手架</h5>
<ul>
<li>
<p>你知道什么是脚手架吗？</p>
<ul>
<li>前端脚手架，听起来玄乎，实际呢？</li>
<li>自制前端脚手架</li>
</ul>
</li>
<li>
<p>你们公司有自己的脚手架工具么，他是怎么工作的</p>
</li>
</ul>
<h5 id="构建工具">构建工具</h5>
<ul>
<li>
<p>webpack</p>
<ul>
<li>
<p>webpack的核心思想是什么</p>
<ul>
<li>Webpack原理浅析</li>
<li>理解webpack原理，手写一个100行的webpack</li>
</ul>
</li>
<li>
<p>Loader和Plugin的区别</p>
<ul>
<li>webpack 中 loader 和 plugin 的区别是什么</li>
</ul>
</li>
<li>
<p>有哪些常见的Loader和Plugin，简单聊一聊各自的作用</p>
<ul>
<li>Webpack 入门以及常见 Loader 和常用插件的使用</li>
</ul>
</li>
<li>
<p>说一下 Webpack 的热更新原理吧</p>
<ul>
<li>Webpack HMR 原理解析</li>
</ul>
</li>
<li>
<p>如何优化 Webpack 的构建速度</p>
<ul>
<li>优化 Webpack 的构建速度</li>
</ul>
</li>
<li>
<p>自己写过Loader和Plugin么</p>
<ul>
<li>webpack loader和plugin编写</li>
<li>Writing a Loader</li>
</ul>
</li>
<li>
<p>代码分割的本质是什么？有什么意义呢</p>
<ul>
<li>代码分离</li>
<li>详解webpack code splitting</li>
</ul>
</li>
<li>
<p>说下 tree-shaking 的原理</p>
<ul>
<li>Webpack Tree shaking 深入探究</li>
</ul>
</li>
<li>
<p>babel原理</p>
<ul>
<li>一文彻底读懂Babel</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="项目部署">项目部署</h5>
<ul>
<li>
<p>你们公司项目发布流程是什么样的</p>
</li>
<li>
<p>前端资源发布路径怎么实现非覆盖式发布（平滑升级）？</p>
<ul>
<li>前端开发体系建设日记</li>
</ul>
</li>
<li>
<p>SSR项目是如何发布的</p>
</li>
</ul>
<h5 id="内部包">内部包</h5>
<ul>
<li>
<p>你有发布过自己的npm包吗？流程是怎样的？</p>
</li>
<li>
<p>介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？</p>
<ul>
<li>每一个前端工程师都应该掌握的 npm install 原理</li>
</ul>
</li>
<li>
<p>你会搭建私有的npm仓库吗？怎么搭建？</p>
<ul>
<li>分分钟教会你搭建企业级的 npm 私有仓库</li>
</ul>
</li>
</ul>
<h5 id="开发规范">开发规范</h5>
<ul>
<li>eslint</li>
</ul>
<h5 id="运维">运维</h5>
<ul>
<li>nginx</li>
<li>cdn</li>
</ul>
<h5 id="git">git</h5>
<h5 id="构建优化">构建优化</h5>
<ul>
<li>
<p>Webpack 为什么慢，如何进行优化</p>
<ul>
<li>优化 Webpack 的构建速度</li>
</ul>
</li>
</ul>
<h3 id="8-性能">8-性能</h3>
<p><img src="https://img2020.cnblogs.com/blog/2232702/202012/2232702-20201209212003160-345474824.png"></p>
<h5 id="页面是否可以快速加载">页面是否可以快速加载</h5>
<ul>
<li>
<p>网络优化</p>
<ul>
<li>http2</li>
<li>CDN</li>
</ul>
</li>
<li>
<p>代码大小</p>
<ul>
<li>代码分割</li>
<li>代码压缩</li>
<li>tree-shaking</li>
</ul>
</li>
<li>
<p>SSR</p>
<ul>
<li>彻底理解服务端渲染 - SSR原理</li>
</ul>
</li>
<li>
<p>离线</p>
<ul>
<li>h5 秒开方案大全</li>
<li>Hybrid App 离线包方案实践（附开源代码）</li>
<li>极致的 Hybrid：航旅离线包再加速！</li>
</ul>
</li>
<li>
<p>缓存</p>
<ul>
<li>浏览器缓存知识小结及应用</li>
<li>浅谈 Web 缓存</li>
</ul>
</li>
</ul>
<h5 id="是否允许用户快速开始与之交互">是否允许用户快速开始与之交互</h5>
<ul>
<li>
<p>渲染优化</p>
<ul>
<li>从 8 道面试题看浏览器渲染过程与性能优化</li>
</ul>
</li>
<li>
<p>web worker</p>
<ul>
<li>使用Web Worker优化代码</li>
</ul>
</li>
</ul>
<h5 id="滚动和动画是否流畅">滚动和动画是否流畅</h5>
<ul>
<li>
<p>如何优化大数据列表（10万+）的性能？说说你的方案</p>
<ul>
<li>「前端进阶」高性能渲染十万条数据(虚拟列表)</li>
</ul>
</li>
<li>
<p>requestAnimationFrame</p>
</li>
<li>
<p>动画性能如何检测</p>
</li>
<li>
<p>js动画和css动画有什么区别</p>
</li>
<li>
<p>分离图层做动画有什么好处呢</p>
<ul>
<li>css3动画优化</li>
</ul>
</li>
<li>
<p>重绘重排</p>
<ul>
<li>Web 性能优化-CSS3 硬件加速(GPU 加速)</li>
</ul>
</li>
</ul>
<h5 id="图片优化">图片优化</h5>
<ul>
<li>
<p>图片压缩</p>
</li>
<li>
<p>图片懒加载</p>
<ul>
<li>图片懒加载从简单到复杂</li>
</ul>
</li>
</ul>
<h5 id="骨架屏合理的loading">骨架屏+合理的loading</h5>
<ul>
<li>网页骨架屏自动生成方案（dps）</li>
<li>一种自动化生成骨架屏的方案</li>
</ul>
<h3 id="9-监控">9-监控</h3>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fac32565eec743489f25e39763513bc6~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="异常">异常</h5>
<ul>
<li>
<p>项目中如何进行异常捕获</p>
<ul>
<li>前端开发不得不知道的异常捕获技巧</li>
</ul>
</li>
<li>
<p>为什么会有那么多Script Error错误</p>
<ul>
<li>Script error.全面解析</li>
</ul>
</li>
</ul>
<h5 id="性能">性能</h5>
<ul>
<li>
<p>前端是如何监控性能的</p>
<ul>
<li>腾讯前端团队是如何做web性能监控的？</li>
<li>蚂蚁金服如何把前端性能监控做到极致?</li>
</ul>
</li>
</ul>
<h5 id="埋点">埋点</h5>
<ul>
<li>
<p>页面埋点怎么实现</p>
<ul>
<li>web 埋点实现原理了解一下</li>
</ul>
</li>
</ul>
<h5 id="为什么通常在发送数据埋点请求的时候使用的是-1x1-像素的透明-gif-图片">为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片</h5>
<ul>
<li>为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？</li>
</ul>
<h5 id="sendbeacon">sendbeacon</h5>
<h3 id="10-安全">10-安全</h3>
<pre><code>- (https://mp.weixin.qq.com/s/Qm_YI9pxfWQJpSLwbSFKbw)
</code></pre>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40cd5dd0d4424554a516d80cf7094497~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="xss">xss</h5>
<ul>
<li>如何防止XSS攻击？</li>
</ul>
<h5 id="csrf">csrf</h5>
<ul>
<li>如何防止CSRF攻击？</li>
</ul>
<h5 id="网络传输安全">网络传输安全</h5>
<ul>
<li>一次安全可靠的通信——HTTPS原理000046a5fdc7802a15f7508b556413</li>
<li>HTTPS中间人攻击实践（原理·实践）</li>
</ul>
<h5 id="接口加签">接口加签</h5>
<ul>
<li>API 接口的参数加密签名设计思路（参数加密+超时处理+私钥验证+Https）</li>
</ul>
<h5 id="接口加密">接口加密</h5>
<h5 id="接口防重放">接口防重放</h5>
<ul>
<li>Api 接口安全-防篡改,防重放理解总结</li>
</ul>
<h5 id="环境检测">环境检测</h5>
<h5 id="代码加密混淆">代码加密混淆</h5>
<h5 id="无处不在的验证码s">无处不在的验证码s</h5>
<ul>
<li>验证码WEB端产品调研（一）：Google reCAPTCHA</li>
<li>验证码WEB端产品调研（二）：极限验证</li>
</ul>
<h5 id="浏览器为什么要阻止跨域请求如何解决跨域每次跨域请求都需要到达服务端吗">浏览器为什么要阻止跨域请求？如何解决跨域？每次跨域请求都需要到达服务端吗？</h5>
<ul>
<li>为什么浏览器要限制跨域访问?</li>
</ul>
<h3 id="11-node">11-Node</h3>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d29da3b39a9441a98aca8da9b52b0f6~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="node-事件循环">node 事件循环</h5>
<ul>
<li>Node.js 事件循环-比官方更全面</li>
</ul>
<h5 id="谈谈-node-的内存泄漏">谈谈 node 的内存泄漏</h5>
<ul>
<li>如何分析 Node.js 中的内存泄漏</li>
</ul>
<h5 id="node-中间层怎样做的请求合并转发">node 中间层怎样做的请求合并转发</h5>
<h5 id="pm2-怎么做进程管理进程挂掉怎么处理">pm2 怎么做进程管理，进程挂掉怎么处理</h5>
<h5 id="ssr">SSR</h5>
<ul>
<li>
<p>SSR解决了什么问题？有做过SSR吗？你是怎么做的？</p>
<ul>
<li>彻底理解服务端渲染 - SSR原理</li>
</ul>
</li>
<li>
<p>SSR这么好为啥不大规模使用了，基本公司项目还走的是前端渲染</p>
</li>
</ul>
<h5 id="graphql">GraphQL</h5>
<ul>
<li>
<p>使用过GraphQL么，解决了什么问题</p>
</li>
<li>
<p>和普通接口相比GraphQL有什么优势呢</p>
<ul>
<li>GraphQL-BFF：微服务背景下的前后端数据交互方案</li>
</ul>
</li>
</ul>
<h3 id="12-跨端">12-跨端</h3>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c34057679600423e9e6ae213c511f603~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="hybrid-app">Hybrid App</h5>
<ul>
<li>
<p>说一下H5和native之间是如何进行交互的，知道jsbridge么</p>
<ul>
<li>小白必看，JSBridge 初探</li>
<li>Hybrid App技术解析 -- 原理篇</li>
<li>Hybrid App技术解析 -- 实战篇</li>
</ul>
</li>
</ul>
<h5 id="weex">Weex</h5>
<ul>
<li>
<p>weex实现大致原理</p>
<ul>
<li>深入理解weex内核原理</li>
</ul>
</li>
</ul>
<h5 id="rn">RN</h5>
<h5 id="flutter">Flutter</h5>
<h3 id="13-微信开发">13-微信开发</h3>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b229c761ffb7474393436f42f4d8c9d3~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="公众号">公众号</h5>
<ul>
<li>
<p>微信授权流程</p>
<ul>
<li>微信扫码登录的几秒钟里，到底发生了什么</li>
</ul>
</li>
</ul>
<h5 id="小程序">小程序</h5>
<ul>
<li>
<p>了解微信小程序的底层实现吗</p>
<ul>
<li>小程序简介</li>
</ul>
</li>
<li>
<p>h5跟小程序有什么区别</p>
</li>
<li>
<p>五花八门的小程序框架实现原理知道么</p>
<ul>
<li>为何我们要用 React 来写小程序 - Taro 诞生记</li>
</ul>
</li>
</ul>
<h3 id="14-新主题">14-新主题</h3>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67be582368fc4e60b301274da613232b~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="微前端">微前端</h5>
<ul>
<li>
<p>你了解什么是微前端吗？说说你对它的理解？</p>
<ul>
<li>可能是你见过最完善的微前端解决方案</li>
</ul>
</li>
</ul>
<h5 id="serverless">serverless</h5>
<ul>
<li>
<p>说说你对serverless的理解，它对前端有什么影响？</p>
<ul>
<li>Serverless 掀起新的前端技术变革</li>
</ul>
</li>
</ul>
<h5 id="边缘计算">边缘计算</h5>
<ul>
<li>
<p>你听过边缘计算吗？说说你对它的理解？</p>
<ul>
<li>前端性能优化：当页面渲染遇上边缘计算</li>
<li>什么是边缘计算？一文读尽秒懂</li>
</ul>
</li>
</ul>
<h5 id="webassembly">WebAssembly</h5>
<h3 id="15-手写">15-手写</h3>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd6efeadbe4e49e1b04639a5998462c0~tplv-k3u1fbpfcp-watermark.image"></p>
<h5 id="promise">Promise</h5>
<ul>
<li>
<p>手写一个Promise</p>
<ul>
<li>面试官：“你能手写一个 Promise 吗”</li>
</ul>
</li>
<li>
<p>使用Promise实现红绿灯交替重复亮</p>
<ul>
<li>使用Promise实现红绿灯交替重复亮</li>
</ul>
</li>
<li>
<p>Promise.all，race，allSeleted</p>
</li>
<li>
<p>sendRequests(urls, max, callback)，同一时间最多发起max个请求，请求全部完成后执行callback</p>
</li>
<li>
<p>maxRequest(fn, maxNum)，实现maxRequest，成功后resolve结果，失败后重试，尝试超过一定次数才真正的reject</p>
</li>
<li>
<p>页面上有一个输入框，两个按钮，A按钮和B按钮，点击A或者B分别会发送一个异步请求，请求完成后，结果会显示在输入框中。用户随机点击A和B多次，要求输出显示结果时，按照用户点击的顺序显示</p>
<ul>
<li>一道赋值面试题引发的思考3【并发数控制】</li>
</ul>
</li>
</ul>
<h5 id="this">this</h5>
<ul>
<li>
<p>call/apply</p>
</li>
<li>
<p>bind</p>
<ul>
<li>手写call、apply、bind实现及详解</li>
</ul>
</li>
<li>
<p>new</p>
<ul>
<li>new操作符的实现</li>
</ul>
</li>
<li>
<p>链式调用4.add(1).add(2).add(3)</p>
</li>
</ul>
<h5 id="原型链">原型链</h5>
<ul>
<li>
<p>instanceof</p>
<ul>
<li>手写一个instanceOf</li>
</ul>
</li>
<li>
<p>各种继承</p>
<ul>
<li>JavaScript深入之继承的多种方式和优缺点</li>
</ul>
</li>
</ul>
<h5 id="闭包-1">闭包</h5>
<ul>
<li>
<p>修改函数正确执行</p>
</li>
<li>
<p>柯里化</p>
<ul>
<li>JavaScript专题之函数柯里化</li>
</ul>
</li>
</ul>
<h5 id="防抖节流">防抖节流</h5>
<ul>
<li>
<p>debounce</p>
<ul>
<li>JavaScript专题之跟着underscore学防抖</li>
</ul>
</li>
<li>
<p>throttle</p>
<ul>
<li>JavaScript专题之跟着 underscore 学节流</li>
</ul>
</li>
</ul>
<h5 id="网络请求">网络请求</h5>
<ul>
<li>
<p>手写AJAX</p>
<ul>
<li>手写 AJAX</li>
</ul>
</li>
<li>
<p>手写JSONP</p>
<ul>
<li>jsonp的原理与实现</li>
</ul>
</li>
</ul>
<h5 id="设计模式">设计模式</h5>
<ul>
<li>
<p>eventEmiter</p>
<ul>
<li>从观察者模式到手写EventEmitter源码</li>
</ul>
</li>
<li>
<p>singleton</p>
</li>
</ul>
<h5 id="深拷贝">深拷贝</h5>
<ul>
<li>JS基本数据类型和引用数据类型的区别及深浅拷贝</li>
<li>JavaScript专题之深浅拷贝</li>
</ul>
<h3 id="16-高频算法">16-高频算法</h3>
<p><img src="https://img2020.cnblogs.com/blog/2232702/202012/2232702-20201209212026797-1900514077.png"></p>
<h5 id="字符串">字符串</h5>
<ul>
<li>反转字符串</li>
<li>字符串中的第一个唯一字符</li>
<li>最长公共前缀</li>
</ul>
<h5 id="数组">数组</h5>
<ul>
<li>合并两个有序数组</li>
<li>数组中重复的数字</li>
<li>两个数组的交集</li>
<li>旋转数组</li>
<li>两数之和</li>
</ul>
<h5 id="链表">链表</h5>
<ul>
<li>合并两个有序链表</li>
<li>删除中间节点</li>
<li>移除链表元素</li>
<li>反转链表</li>
<li>删除链表的倒数第N个节点</li>
<li>环形链表</li>
<li>从尾到头打印链表</li>
</ul>
<h5 id="二叉树">二叉树</h5>
<ul>
<li>二叉树的遍历-前序中序后序层次</li>
<li>二叉树的最大深度</li>
<li>二叉搜索树</li>
<li>BST 的查找</li>
<li>平衡二叉树</li>
<li>完全二叉树</li>
</ul>
<h5 id="栈队列">栈/队列</h5>
<ul>
<li>有效的括号</li>
</ul>
<h5 id="排序">排序</h5>
<ul>
<li>冒泡排序</li>
<li>选择排序</li>
<li>插入排序</li>
<li>希尔排序</li>
<li>归并排序</li>
<li>快速排序</li>
<li>堆排序</li>
</ul>
<h5 id="递归">递归</h5>
<ul>
<li>斐波那契数列</li>
<li>汉诺塔问题</li>
</ul>
<h5 id="二分法">二分法</h5>
<ul>
<li>爱吃香蕉的珂珂</li>
<li>x的平方根</li>
<li>寻找两个正序数组的中位数</li>
<li>搜索旋转排序数组</li>
<li>搜索插入位置</li>
</ul>
<h5 id="动态规划">动态规划</h5>
<ul>
<li>最长上升子序列</li>
<li>爬楼梯</li>
<li>最大子序和</li>
<li>最小路径和</li>
<li>打家劫舍</li>
<li>买卖股票的最佳时机</li>
</ul>
<h5 id="贪心与分治">贪心与分治</h5>
<ul>
<li>分发饼干</li>
<li>柠檬水找零</li>
<li>模拟行走机器人</li>
</ul>
<h5 id="滑动窗口">滑动窗口</h5>
<ul>
<li>滑动窗口最大值</li>
<li>无重复字符的最长子串</li>
<li>盛最多水的容器</li>
</ul>
<h5 id="位运算">位运算</h5>
<ul>
<li>N皇后 II</li>
<li>颠倒二进制位</li>
<li>位1的个数</li>
</ul>
<h3 id="17-项目技术之外">17-项目/技术之外</h3>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78e61b2abae142eba83cf36f1febfd32~tplv-k3u1fbpfcp-watermark.image"></p>
<p>项目开发中有遇到什么挑战没？</p>
<p>对哪个项目印象比较深刻深刻，遇到最难的项目是啥？</p>
<p>项目研发流程中作为前端开发一般扮演的啥角色？</p>
<p>现在有的项目中觉得哪些项目可以继续优化，为啥没有优化？</p>
<p>平时写项目总结么，一般总结哪些东西？</p>
<p>工作中能够持续学习么？</p>
<p>学习的动力怎么来的，如何维持？</p>
<p>未来会有什么样的规划？</p>
<p>对于加班你是怎么看的？</p>
<p>说下你学习前端的历程吧？</p>
<p>前端未来展望？</p>
<p>给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。</p>
<p><img src="https://img2020.cnblogs.com/blog/2232702/202012/2232702-20201207225829710-1316262016.png"></p>
<blockquote>
<p>完整思维导图实在太大，可关注公众号「前端复习课」回复“思维导图”获取高清大图，总共18张，还有整理好的PDF哦。</p>
</blockquote>
<blockquote>
<p>本文首发于17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲，转载请联系作者</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/cYang2030/p/14111036.html
頁: [1]
查看完整版本: 17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲