初级、中级、⾼级前端⼯程师分别需要掌握哪些技能？
前端开发是⼀个⾮常特殊的⾏业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能⽐拟的。
winter在他的《重学前端》课程中提到：
到现在为⽌，前端⼯程师已经成为研发体系中的重要岗位之⼀。可是，与此相对的是，我发现极少或者⼏乎没有⼤学的计算机专业愿意开设前端课程，更没有系统性的教学⽅案出现。⼤部分前端⼯程师的知识，其实都是来⾃于实践和⼯作中零散的学习。
这样是⼀个⾮常真实的现状，实际上很多前端开发者都是⾃学甚⾄转⾏过来的，前端⼊门简单，学习了⼏个API以后上⼿做项⽬也很简单，但是这往往成为了限制⾃⾝发展的瓶颈。
只是停留在会⽤阶段是远远不够的，我们还需要不断探索和深⼊。现在市⾯上并不缺少学习教程，技术⽂章，如果盲⽬的学习你会发现看过以后的知识留存率会很低，⽽且发现没有了解到的知识越来越多，这会让⼈产⽣焦虑。
这⼀套资料也是我当时准备前端⾯试的时候花了⼤量时间准备的。切记：学习资料在于精，不在于多，多反⽽不是好事，作为⼀名程序员，⼤家的学习时间都太宝贵了，我们要把80%时间投⼊在最有价值20
%的学习内容上。
实际上，除了坚持学习的强⼤的⾃驱⼒，你还需要⼀个很简单的学习⽅法。那就是：建⽴⾃⼰的知识体系。它能帮助你更系统性的学习，同时你也时刻能知道⾃⼰哪些地⽅是不⾜的。
我会把我⼯作和学习中接触到的知识全部归纳到我的知识体系中，其中不仅仅包括我已经学过的，还有很多我没有来得及学习的。
这不仅仅是我的知识体系，更是我时刻提醒⾃⼰的⾃检清单。
下⾯我会把我的⾃检清单分享给⼤家，你可以按照清单上的知识检测⾃⼰还有哪些不⾜和提升，我也建议⼤家建⾃⼰的知识体系，这样⼯作或者学习甚⾄⾯试时，你能快速定位到知识清单中的点，如果你有哪些我没归纳到的点，欢迎在评论区告诉我。
作者：ConardLi 链接：
⼀、JavaScript基础
前端⼯程师吃饭的家伙，深度、⼴度⼀样都不能差。
变量和类型
1.JavaScript规定了⼏种语⾔类型
2.JavaScript对象的底层数据结构是什么
3.Symbol类型在实际开发中的应⽤、可⼿动实现⼀个简单的Symbol
4.JavaScript中的变量在内存中的具体存储形式
5.基本类型对应的内置对象，以及他们之间的装箱拆箱操作
6.理解值类型和引⽤类型
7.null和undefined的区别
8.⾄少可以说出三种判断JavaScript数据类型的⽅式，以及他们的优缺点，如何准确的判断数组类型
9.可能发⽣隐式类型转换的场景以及转换原则，应如何避免或巧妙应⽤
10.出现⼩数精度丢失的原因，JavaScript可以存储的最⼤数字、最⼤安全数字，JavaScript处理⼤数字的⽅法、避免精度丢失的⽅法
原型和原型链
1.理解原型设计模式以及JavaScript中的原型规则
2.instanceof的底层实现原理，⼿动实现⼀个instanceof
4.实现继承的⼏种⽅式以及他们的优缺点
5.⾄少说出⼀种开源项⽬(如Node)中应⽤原型继承的案例
6.可以描述new⼀个对象的详细过程，⼿动实现⼀个new操作符
7.理解es6 class构造以及继承的底层实现原理
作⽤域和闭包
1.理解词法作⽤域和动态作⽤域
2.理解JavaScript的作⽤域和作⽤域链
3.理解JavaScript的执⾏上下⽂栈，可以应⽤堆栈信息快速定位问题
4.this的原理以及⼏种不同使⽤场景的取值
5.闭包的实现原理和作⽤，可以列举⼏个开发中闭包的实际应⽤
6.理解堆栈溢出和内存泄漏的原理，如何防⽌
7.如何处理循环的异步操作
8.理解模块化解决的实际问题，可列举⼏个模块化⽅案并理解其中原理
执⾏机制
1.为何try⾥⾯放return，finally还会执⾏，理解其内部机制
2.JavaScript如何实现异步编程，可以详细描述EventLoop机制
3.宏任务和微任务分别有哪些
4.可以快速分析⼀个复杂的异步嵌套逻辑，并掌握分析⽅法
5.使⽤Promise实现串⾏
6.Node与浏览器EventLoop的差异
7.如何在保证页⾯运⾏流畅的情况下处理海量数据
语法和API
1.理解ECMAScript和JavaScript的关系
2.熟练运⽤es5、es6提供的语法规范，
3.熟练掌握JavaScript提供的全局对象（例如Date、Math）、全局函数（例如decodeURI、isNaN）、全局属性（例如Infinity、undefined）
4.熟练应⽤map、reduce、filter等⾼阶函数解决问题
5.setInterval需要注意的点，使⽤settimeout实现setInterval
6.JavaScript提供的正则表达式API、可以使⽤正则表达式（邮箱校验、URL解析、去重等）解决常见问题
7.JavaScript异常处理的⽅式，统⼀的异常处理⽅案
⼆、HTML和CSS
HTML
1.从规范的⾓度理解HTML，从分类和语义的⾓度使⽤标签
2.常⽤页⾯标签的默认样式、⾃带属性、不同浏览器的差异、处理浏览器兼容问题的⽅式
3.元信息类标签(head、title、meta)的使⽤⽬的和配置⽅法
4.HTML5离线缓存原理
5.可以使⽤Canvas API、SVG等绘制⾼性能的动画
CSS
1.CSS盒模型，在不同浏览器的差异
2.CSS所有选择器及其优先级、使⽤场景，哪些可以继承，如何运⽤at规则
3.CSS伪类和伪元素有哪些，它们的区别和实际应⽤
4.HTML⽂档流的排版规则，CSS⼏种定位的规则、定位参照物、对⽂档流的影响，如何选择最好的定位⽅式，雪碧图实现原理
5.⽔平垂直居中的⽅案、可以实现6种以上并对⽐它们的优缺点
6.BFC实现原理，可以解决的问题，如何创建BFC
7.可使⽤CSS函数复⽤代码，实现特殊效果
8.PostCSS、Sass、Less的异同，以及使⽤配置，⾄少掌握⼀种
9.CSS模块化⽅案、如何配置按需加载、如何防⽌CSS阻塞渲染
10.熟练使⽤CSS实现常见动画，如渐变、移动、旋转、缩放等等
11.CSS浏览器兼容性写法，了解不同API在不同浏览器下的兼容性情况
12.掌握⼀套完整的响应式布局⽅案
⼿写
1.⼿写图⽚瀑布流效果
2.使⽤CSS绘制⼏何图形（圆形、三⾓形、扇形、菱形等）
3.使⽤纯CSS实现曲线运动（贝塞尔曲线）
4.实现常⽤布局（三栏、圣杯、双飞翼、吸顶），可是说出多种⽅式并理解其优缺点
三、计算机基础
纵然框架再多，版本更新再快，然⽽很多基础的东西并没有变。作为学习者，越是想急着适应这些纷繁变幻的“新游戏规则”，就越需要⼀个扎实的基础和熟练的底⼦。所以扎实地掌握好⽐如像基础三件套、数据结构、⽹络协议、设计模式以及编译原理等等⼀些基础，才能让我们对于新知识游刃有余。
这⾥有4本⼿册，全⽹累积下载100w次，⼏乎程序员⼈⼿⼀套，包含数据结构与算法、操作系统、计算机组成原理、计算机⽹络等硬核基础知识，图⽂+实战案例，平时开发+搞定⾯试，帮你快速建⽴对计算机科学的⼤局观，夯实计算机基本功，瞬间起飞～
关于编译原理，不需要理解⾮常深⼊，但是最基本的原理和概念⼀定要懂，这对于学习⼀门编程语⾔⾮常重要。
编译原理
1.理解代码到底是什么，计算机如何将代码转换为可以运⾏的⽬标程序
2.正则表达式的匹配原理和性能优化
3.如何将JavaScript代码解析成抽象语法树(AST)
4.base64的编码原理
5.⼏种进制的相互转换计算⽅法，在JavaScript中如何表⽰和转换
⽹络协议
1.理解什么是协议，了解TCP/IP⽹络协议族的构成，每层协议在应⽤程序中发挥的作⽤
2.三次握⼿和四次挥⼿详细原理，为什么要使⽤这种机制
3.有哪些协议是可靠，TCP有哪些⼿段保证可靠交付
4.DNS的作⽤、DNS解析的详细过程，DNS优化原理
5.CDN的作⽤和原理
6.HTTP请求报⽂和响应报⽂的具体组成，能理解常见请求头的含义，有⼏种请求⽅式，区别是什么
7.HTTP所有状态码的具体含义，看到异常状态码能快速定位问题
8.HTTP1.1、HTTP2.0带来的改变
9.HTTPS的加密原理，如何开启HTTPS，如何劫持HTTPS请求
10.理解WebSocket协议的底层原理、与HTTP的区别
设计模式
1.熟练使⽤前端常⽤的设计模式编写代码，如单例模式、装饰器模式、代理模式等
2.发布订阅模式和观察者模式的异同以及实际应⽤
3.可以说出⼏种设计模式在开发中的实际应⽤，理解框架源码中对设计模式的应⽤
四、数据结构和算法
据我了解的⼤部分前端对这部分知识有些⽋缺，甚⾄抵触，但是，如果突破更⾼的天花板，这部分知识是必不可少的，⽽且我亲⾝经历——⾮常有⽤！
JavaScript编码能⼒
1.多种⽅式实现数组去重、扁平化、对⽐优缺点
2.多种⽅式实现深拷贝、对⽐优缺点
3.⼿写函数柯⾥化⼯具函数、并理解其应⽤场景和优势
4.⼿写防抖和节流⼯具函数、并理解其内部原理和应⽤场景
5.实现⼀个sleep函数
⼿动实现前端轮⼦
1.⼿动实现call、apply、bind
2.⼿动实现符合Promise/A+规范的Promise、⼿动实现async await
3.⼿写⼀个EventEmitter实现事件发布、订阅
javascript全局数组4.可以说出两种实现双向绑定的⽅案、可以⼿动实现
5.⼿写JSON.stringify、JSON.parse
6.⼿写⼀个模版引擎，并能解释其中原理
7.⼿写懒加载、下拉刷新、上拉加载、预加载等效果
数据结构
1.理解常见数据结构的特点，以及他们在不同场景下使⽤的优缺点
2.理解数组、字符串的存储原理，并熟练应⽤他们解决问题
3.理解⼆叉树、栈、队列、哈希表的基本结构和特点，并可以应⽤它解决问题
4.了解图、堆的基本结构和使⽤场景
算法
1.可计算⼀个算法的时间复杂度和空间复杂度，可估计业务逻辑代码的耗时和内存消耗
2.⾄少理解五种排序算法的实现原理、应⽤场景、优缺点，可快速说出时间、空间复杂度
3.了解递归和循环的优缺点、应⽤场景、并可在开发中熟练应⽤
4.可应⽤回溯算法、贪⼼算法、分治算法、动态规划等解决复杂问题
5.前端处理海量数据的算法⽅案
五、运⾏环境
我们需要理清语⾔和环境的关系：
ECMAScript描述了JavaScript语⾔的语法和基本对象规范
浏览器作为JavaScript的⼀种运⾏环境，为它提供了：⽂档对象模型（DOM），描述处理⽹页内容的⽅法和接⼝、浏览器对象模型（BOM），描述与浏览器进⾏交互的⽅法和接⼝
Node也是JavaScript的⼀种运⾏环境，为它提供了操作I/O、⽹络等API
浏览器API
1.浏览器提供的符合W3C标准的DOM操作API、浏览器差异、兼容性
2.浏览器提供的浏览器对象模型 (BOM)提供的所有全局API、浏览器差异、兼容性
3.⼤量DOM操作、海量数据的性能优化(合并操作、Diff、requestAnimationFrame等)
4.浏览器海量数据存储、操作性能优化
5.DOM事件流的具体实现机制、不同浏览器的差异、事件代理
6.前端发起⽹络请求的⼏种⽅式及其底层实现、可以⼿写原⽣ajax、fetch、可以熟练使⽤第三⽅库
7.浏览器的同源策略，如何避免同源策略，⼏种⽅式的异同点以及如何选型
8.浏览器提供的⼏种存储机制、优缺点、开发中正确的选择
9.浏览器跨标签通信
浏览器原理
1.各浏览器使⽤的JavaScript引擎以及它们的异同点、如何在代码中进⾏区分
2.请求数据到请求结束与服务器进⾏了⼏次交互
3.可详细描述浏览器从输⼊URL到页⾯展现的详细过程
4.浏览器解析HTML代码的原理，以及构建DOM树的流程
5.浏览器如何解析CSS规则，并将其应⽤到DOM树上
6.浏览器如何将解析好的带有样式的DOM树进⾏绘制
7.浏览器的运⾏机制，如何配置资源异步同步加载
8.浏览器回流与重绘的底层原理，引发原因，如何有效避免
9.浏览器的垃圾回收机制，如何避免内存泄漏
10.浏览器采⽤的缓存⽅案，如何选择和控制合适的缓存⽅案
Node
1.理解Node在应⽤程序中的作⽤，可以使⽤Node搭建前端运⾏环境、使⽤Node操作⽂件、操作数据库等等
2.掌握⼀种Node开发框架，如Express，Express和Koa的区别
3.熟练使⽤Node提供的API如Path、Http、Child Process等并理解其实现原理
4.Node的底层运⾏原理、和浏览器的异同
5.Node事件驱动、⾮阻塞机制的实现原理
六、框架和类库
轮⼦层出不穷，从原理上理解才是正道
TypeScript
1.理解泛型、接⼝等⾯向对象的相关概念，TypeScript对⾯向对象理念的实现
2.理解使⽤TypeScript的好处，掌握TypeScript基础语法
3.TypeScript的规则检测原理
4.可以在React、Vue等框架中使⽤TypeScript进⾏开发
React
1.React和vue 选型和优缺点、核⼼架构的区别
2.React中setState的执⾏机制，如何有效的管理状态
3.React的事件底层实现机制
4.React的虚拟DOM和Diff算法的内部实现
5.React的Fiber⼯作原理，解决了什么问题
6.React Router和Vue Router的底层实现原理、动态加载实现原理
7.可熟练应⽤React API、⽣命周期等，可应⽤HOC、render props、Hooks等⾼阶⽤法解决问题
8.基于React的特性和原理，可以⼿动实现⼀个简单的React
Vue
1.熟练使⽤Vue的API、⽣命周期、钩⼦函数
2.MVVM框架设计理念
3.Vue双向绑定实现原理、Diff算法的内部实现
4.Vue的事件机制
5.从template转换成真实DOM的实现机制
多端开发
1.单页⾯应⽤（SPA）的原理和优缺点，掌握⼀种快速开发SPA的⽅案
2.理解Viewport、em、rem的原理和⽤法，分辨率、px、ppi、dpi、dp的区别和实际应⽤
3.移动端页⾯适配解决⽅案、不同机型适配⽅案
4.掌握⼀种JavaScript移动客户端开发技术，如React Native：可以搭建React Native开发环境，熟练进⾏开发，可理解React Native的运作原
理，不同端适配
5.掌握⼀种JavaScript PC客户端开发技术，如Electron：可搭建Electron开发环境，熟练进⾏开发，可理解Electron的运作原理
6.掌握⼀种⼩程序开发框架或原⽣⼩程序开发
7.理解多端框架的内部实现原理，⾄少了解⼀个多端框架的使⽤
数据流管理
1.掌握React和Vue传统的跨组件通信⽅案，对⽐采⽤数据流管理框架的异同
2.熟练使⽤Redux管理数据流，并理解其实现原理，中间件实现原理
3.熟练使⽤Mobx管理数据流，并理解其实现原理，相⽐Redux有什么优势
4.熟练使⽤Vuex管理数据流，并理解其实现原理
5.以上数据流⽅案的异同和优缺点，不情况下的技术选型
实⽤库
1.⾄少掌握⼀种UI组件框架，如antd design，理解其设计理念、底层实现
2.掌握⼀种图表绘制框架，如Echart，理解其设计理念、底层实现，可以⾃⼰实现图表
3.掌握⼀种GIS开发框架，如百度地图API
4.掌握⼀种可视化开发框架，如Three.js、D3
5.⼯具函数库，如lodash、underscore、moment等，理解使⽤的⼯具类或⼯具函数的具体实现原理
开发和调试
1.熟练使⽤各浏览器提供的调试⼯具
2.熟练使⽤⼀种代理⼯具实现请求代理、抓包，如charls
3.可以使⽤Android、IOS模拟器进⾏调试，并掌握⼀种真机调试⽅案
4.了解Vue、React等框架调试⼯具的使⽤
七、前端⼯程
前端⼯程化：以⼯程化⽅法和⼯具提⾼开发⽣产效率、降低维护难度
项⽬构建
1.理解npm、yarn依赖包管理的原理，两者的区别
2.可以使⽤npm运⾏⾃定义脚本
3.理解Babel、ESLint、webpack等⼯具在项⽬中承担的作⽤
4.ESLint规则检测原理，常⽤的ESLint配置
5.Babel的核⼼原理，可以⾃⼰编写⼀个Babel插件
6.可以配置⼀种前端代码兼容⽅案，如Polyfill
7.Webpack的编译原理、构建流程、热更新原理，chunk、bundle和module的区别和应⽤
8.可熟练配置已有的loaders和plugins解决问题，可以⾃⼰编写loaders和plugins
nginx
1.正向代理与反向代理的特点和实例
2.可⼿动搭建⼀个简单的nginx服务器、
3.熟练应⽤常⽤的nginx内置变量，掌握常⽤的匹配规则写法
4.可以⽤nginx实现请求过滤、配置gzip、负载均衡等，并能解释其内部原理
开发提速
1.熟练掌握⼀种接⼝管理、接⼝mock⼯具的使⽤，如yapi
2.掌握⼀种⾼效的⽇志埋点⽅案，可快速使⽤⽇志查询⼯具定位线上问题
3.理解TDD与BDD模式，⾄少会使⽤⼀种前端单元测试框架
版本控制
1.理解Git的核⼼原理、⼯作流程、和SVN的区别
2.熟练使⽤常规的Git命令、git rebase、git stash等进阶命令
3.可以快速解决线上分⽀回滚、线上分⽀错误合并等复杂问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。