时间：2022-11-15 02:47:01
开放前端开发是一个非常特殊的行业，其历史其实并不长，但知识繁杂、技术迭代速度之快是其他技术无法比拟的。
一直以来，前端工程师都是研发系统的重要岗位之一。 但相对而言，我们发现很少有大学计算机专业或者想开设前端课程，没有出现系统性的教学方案。 因为大多数前端工程师的知识实际上是在实践和工作中零散学习的。
这是非常现实的现状。 事实上，许多前端开发人员都是自学或跳槽的。 前端入门很简单，学习一些API后再开始项目也很简单。 但这往往成为限制自身发展的瓶颈。
仅仅停留在可以使用的阶段是不够的，还需要不断探索、深入挖掘。 目前并不缺乏学习教程和技术文章。 盲目学习的话，看到后的知识残存率会变低，不知道的知识会增加，对此感到不安。
实际上，除了持续学习的强大自我驱动力之外，还需要简单的学习方法。 那就是建立自己的知识体系。 它可以帮助你更系统地学习，同时你也能经常知道自己哪里有不足。
我把在工作和学习中接触到的知识全部总结到我的知识体系中。 其中不仅包括已经学习过的东西，还包括很多没能赶上学习的事情。
一、JavaScript基础前端工程师吃饭的家伙，深度和广度都不能差。
变量和类型
1.JavaScript规定了几种语言类型2.JavaScript对象的底层数据结构是什么3.Symbol类型在实际开发中的应用，简单的Symbol4.JavaScript中变量在存储器中的具体体现值类型和引用类型7 .了解7.null和undefined之间的差异8。 至少有三种判断JavaScript数据类型的方法，以及他们的优缺点，数组类型9。 隐式类型转换可能发生的场景和转换原则，10 .避免或巧妙应用小数精度损失的原因方法JavaScript可以存储的最大数字、最安全数字、JavaScript处理大数字的方法、避免精度损失的方法原型和原型
1 .了解原型设计模式和JavaScript中原型规则2.instanceof的基础实现原理，并手动实现一个instanceof4。 描述了实现继承的几种方法和他们的优缺点5 .至少对一个开源项目(如Node )应用原型继承的情况6.new的一个对象的详细流程，可以手动实现一个new操作
1 .理解词法作用域和动态作用域2 .理解JavaScript的作用域和作用域链3 .理解JavaScript的执行上下文堆栈，理解堆栈溢出和内存泄漏原理，4.this原理和一些不同的使用场景
1 .为什么try中有return，还要执行finally，了解其内部机制2.JavaScript是如何实现异步编程的？ 可以详细解释EventLoop机制3 .宏任务和微任务都有哪些4 .快速分析复杂的异步嵌套逻辑，用能掌握分析方法的Promise实现串口6.Node和串口6.Node
理解ECMAScript与JavaScript的关系2 .熟练使用es5、es6提供的语法规范，使用JavaScript提供的全局对象(如Date、Math )、全局函数(如decodeURI ) 使用undefined )、4.map、reduce、filter等高级别的settimeout实现setInterval6.JavaScript提供的正则表达式API，以检查正则表达式(邮箱)
1 .从规范的角度理解HTML，从分类和语义的角度使用标签2 .常用页面标签的默认样式、附属属性、不同浏览器的差异、处理浏览器兼容性问题的方法3 .元信息类标签( head、title、meta )
1.CSS盒模型，不同浏览器下的差异2.CSS所有选择器及其优先级、使用场景，哪个可以继承，如何使用at规则3.CSS伪类和伪元素有什么，它们的差异和实际4.HTML文档定位参照物、对文档流的影响、如何选择最佳定位方式、精灵图的实现原理5 .水平、垂直、居中方案，6种以上实现，可以比较它们的优缺点6 .比较bfc的实现原理、解决的问题、BFC7的制作方法、CSS函数特效8 .实现8.PostCSS、Sass、Less异同，使用配置的至少一种9.CSS模块化方式、按需加载配置方法、防止CSS分块渲染方法10 .渐变、移动、旋转、 为了实现缩放等一般的动画而熟练使用CSS 11.CSS浏览器互换书写方式，理解不同浏览器中不同的API的互换性12 .完全的应答布局方式手写
1 .手绘图片瀑布效果2 .使用CSS实现几何图形(圆形、三角形、扇形、菱形等)3.使用纯CSS进行曲线运动) bezier曲线)4.实现常用布局(三栏、圣杯、双翼、吸取) 但是，阐述几种方式，了解其优缺点。 计算机的基础是关于编译原理，虽然不需要太深的理解，但是最基本的
编译原理
1 .了解代码是什么，如何将代码转换成计算机可执行的目标程序2 .正则表达式匹配原理和性能优化3 .抽象语法树( AST )4.base64的编码原理3.JavaScript代码
1 .了解协议是什么，了解TCP/IP网络协议族的组成，每层协议在APP中所起的作用2.3次握手和4次挥手的详细原理，为什么要使用这个机制3 .哪些协议是可靠的， TCP保证哪些手段是可靠的传递4.DNS的作用，DNS分析的详细过程DNS优化原理5.CDN的作用和原理6.HTTP请求消息和响应消息的具体结构可以理解常见请求报头的含义，可以通过几种请求方式7.HTTP所有状态码的具体含义，异常状态码看问题8.HTTP1.1，HTTP2.0变化9.HTTPS加密原理，如何打开HTTPS
1 .熟练使用前端常用的设计模式，如单实例模式、装饰模式、代理模式等编写代码。 2 .发布订阅模式与观察者模式的异同及实际应用。 3 .可以说一些设计模式在开发中的实际应用，框架源中在设计模式中的应用4、了解数据结构和算法我所知道的前端大部分都是这部分缺乏或者抵触的
JavaScript的编码能力
1 .通过多种方式实现删除排列、扁平化、优缺点对比2 .通过多种方式实现深度复制，对比优缺点3 .实现手写函数加里化工具函数，了解其应用场景和优势4 .手写防抖和光圈工具函数
手动实现呼叫、应用和绑定2。 手动实现符合Promise/A标准的Promise。 手动实现异步3。 手写一个EventEmitter实现事件发布。 实现订阅。 4 .可以说实现双向绑定的两个方案。 5 .可以手动实现5.Json。
1 .了解常见数据结构的特点，以及他们在不同场合使用的优缺点。 2 .了解数组、字符串的存储原理，熟练应用他们解决问题。 3 .了解二叉树、栈、队列、哈希表的基本结构和特点，并能应用它解决问题。 4 .了解图、堆的基本结构和使用场景算法。
1 .可以计算一个算法的时间复杂度和空间复杂度，可以估计业务逻辑代码的时间和内存消耗2 .了解至少五种排序算法的实现原理、应用场景、优缺点，快速说出时间空间复杂度3 .递归和循环在开发中能很好地应用4 .可以应用回溯算法、贪婪算法、分布式算法、动态规划等解决复杂问题5 .前端处理海量数据的算法方案5
ECMAScript描述JavaScript语言的语法和基本对象规范
作为JavaScript的运行环境之一，浏览器描述文档对象模型( DOM，处理网页内容的方法和界面，浏览器对象模型) BOM，浏览器的交互方法和界面
Node也是JavaScript的执行环境，提供操作I/O、网络等API
浏览器API
1 .符合浏览器提供的W3C标准的DOM操作API、浏览器差异、兼容性2 .浏览器提供的浏览器对象模型( BOM )提供的所有全局API、浏览器差异、兼容性3 .大量DOM操作、大量数据的爸爸requestAnimationFrame等)4.优化浏览器操作性5.DOM事件流的具体实现机制、不同浏览器的差异、事件代理6 .前端发起网络请求的几种方式及其基础能够熟练使用第三方库7 .浏览器的同源策略、避免同源策略的方法、几种方式的异同与选择方法8 .浏览器提供的几种存储机制、优缺点、开发中的正确选择9 .浏览器的标签间通信
1 .每个浏览器使用的JavaScript引擎及其不同之处、 在代码中如何区分2 .从请求数据到请求结束与服务器进行了多少次交互3 .可以详细说明浏览器从输入URL到显示页面的详细过程4 .浏览器分析HTML代码的原理、 和构建DOM树的过程5 .浏览器如何解析CSS规则并将其应用于DOM树6 .浏览器如何绘制解析出的带样式的DOM树7 .浏览器的运行机制，如何配置资源的异步并发加载引发原因，9 .如何有效避免浏览器垃圾回收机制，如何避免内存泄露10 .浏览器采用的缓存方案，如何选择和控制相应的缓存方案Node
1 .了解Node在APP应用中的作用。 可以使用Node构建前端的运行环境，使用Node操作文件，操作数据库等。 掌握Express等Node开发框架的Express和Koa的差异熟练使用Path、Http、Child Process等Node提供的API，其实现原理4.Node的基础工作原理，与浏览器的异同5 . 了解非阻塞机制的实现原理6、框架和类库车轮层出不穷是从原理上理解才是正道
TypeScript
1 .了解泛型、接口等面向对象的相关概念，通过TypeScript实现面向对象理念3 .了解使用TypeScript的优势，掌握TypeScript的基础语法3.TypeScript的规则验证
1.React和vue的选择和优缺点，核心体系结构的差异2.React中setState的运行机制、 如何有效地管理状态3.React的事件基础实现机制4.React的虚拟DOM和Diff算法的内部实现5.React的Fiber工作原理解决了什么问题6.React Router和Vue Router的基础实现原理基于React的特性和原理，可以很好地应用生命周期等，应用HOC、render props、Hooks等高阶用法解决问题，手动实现简单的React
1 .熟练使用vue的API、生命周期、挂接函数2.MVVM框架设计理念3.Vue双向绑定实现原理，Diff算法的内部实现4.Vue的事件机制template到真实DOM转换的
1 .掌握单页面APP ( SPA )的原理和优缺点；2 )掌握快速开发spa的方案；2 )掌握视口、em、rem的原理和用法；分辨率、px、ppi、dpi、dp的差异和实际应用；3 )掌握移动性分机型自适应解决方案4 )掌握JavaScript。例如，可以构建并熟练地开发React Native(reactnative )开发环境，理解reactnative的工作原理，不同的端适5 ) eleative 可以熟练地开发，可以学习像Electron )那样的JavaScript PC客户端开发技术，可以理解Electron开发环境
掌握React和Vue传统的组件间通信方案，比较采用数据流管理框架的异同。 2 .熟练使用2.Redux管理数据流，了解其实现原理。 熟练使用中间件的实现原理Mobx管理数据流，并了解其实现原理。 理解与redux相比有什么优势。 熟练使用Vuex管理数据流，其实现原理5 .了解以上数据流方案的异同和优缺点。 在某些情况下
1 .掌握至少一种UI组件框架，例如antd design，理解其设计理念、基础的实现。 理解Echart这样的图表绘制框架，如其设计理念、基础的实现，可以自己实现图表。 3 .掌握GIS开发框架，如百度地图API4。 掌握Three.js、ddesign这样的可视化开发框架
1 .熟练使用各浏览器提供的调试工具2 .熟练使用一种代理工具实现请求代理、快速浏览。 例如使用charls3.Android、IOS模拟器进行调试，掌握真机调试方案4 .使用vue、React等框架调试工具7、理解前端工程化用工程化方法和工具提高开发生产率，降低维护难度
构建项目
1 .了解NPM、yarn依赖软件包管理的原理，两者的区别2 .可以使用NPM运行自定义脚本5.Babel、ESLint、webpack等工具在项目中的作用4.ESLint规则检测原理可以自己编写一个Babel，如Polyfill7.Webpack的编译原理、构建流程、热更新原理、chunk、bundle和module的区别与应用8 .熟练地构建现有的loaders和plugins
1 .前向代理和反向代理的特点和实例2 .可以手动构建简单的nginx服务器，3 .善于应用常用的nginx内置变量，掌握常用匹配规则的编写4 .在nginx上填充请求
1 .熟悉接口管理、接口mock工具的使用。 例如亚萍2。 掌握可以使用日志检索工具快速识别在线问题的高效日志嵌入方案3。 了解TDD和BDD模式，并使用至少一种前端单元测试框架版本控制
1 .了解git的核心原理、工作流程和与SVN的区别。 2 .熟练使用常规git命令、git rebase、git stash等高级命令。 3 .能够快速解决在线分支回滚、在线分支错误合并等复杂问题并持续集成
1 .理解ci/CD技术的意义，熟练使用至少一个ci/CD工具。 例如，Jenkins2.体系结构设计、技术选择、环境构建、全流程开发、部署在线等完整的开发流程( web APP应用程序、移动客户端APP应用程序、PC客户端APP应用程序、小程序、hhh
1 .要了解如何开发后端，以及它在APP应用中的作用，请至少使用一种后端语言。 2 .了解数据最终如何落地和存储在数据库中，了解表结构设计、表之间的关联，并至少使用一个数据库性能优化
1 .了解前端性能指标、性能监测要点，掌握一个前端性能监测方案2 .常见的Web、App性能优化方案3.SEO排名规则、SEO优化方案、前后端分离的SEO4.SSR实现方案
1.XSS攻击原理、分类、具体实例，涉及前端如何防御2.CSRF攻击的原理、具体实例，前端如何防御3.HTTP劫持、页面劫持原理、防御措施业务
1 .了解已开发项目的总体业务形态、业务目标、业务结构，能够快速定位网上业务问题。 2 .了解开发的整个项目的技术结构，能够快速阅读，根据新的需求制定开发计划，根据业务预警、在线日志等快速定位和解决在线技术问题。 3 .能够将自己的想法和新技术灌输到业务中去并付诸实践，尽量使团队具有一定的不可替代性。 vczh大神知道问题】中的回答：
这十几年，我一共做了三件事：
1、以赚钱为目的选择学习内容2、用自己能不能做轮子来衡量学习效果3、坚持每天写自己的代码，前10年每天至少6个小时，不包括学习和工作时间。 上面的点可能有点难。 第一点我做不到，但是达成下一点很容易。
当我谈到写博客时，我能向别人解释的知识比自己学习和掌握的要深得多
1 .在自己的技术博客上，或者在一些博客平台上有自己的专栏2 .定期总结知识，不断完善自己的知识体系3 .尽量把自己的知识转化为真实的生产，不停留在书面理解层面，实用化很重要4 .自己的事情
1 .理解网络利益相关者术语： CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等2 .理解网络利益相关者术语： B2B、B2C、C2C、OOOO 了解货币基金、保险、指数基金、股票等基本理财知识6 .掌握如何在繁重的工作和长期的电脑辐射下保持健康，建立正确的养生知识体系零度基点如何进入前端工程师？ 微软/阿里巴巴技术大牛，44届零度基点入门，JavaScript HTML CSS3，现在只要学习就能独立搭建商业化主页，小编将为大家提供高质量的课程：
点赞私信回复作者关键词“007”接收吧！
成功接收的小伙伴想在下面评论一下，你的关注是作者最大的动力哦。
特别声明：照片上的文字来自互联网。 如有侵权，请联系作者删除。
