近年来，前端开发如火如荼，可以说是最热门的行业之一。其实前端开发可以说是一个特殊的行业。前端开发的知识点很多。更新换代之快，前端也在不断研究和学习，这是其他技术无法比拟的。下面给大家介绍一下前端的一些知识体系，让大家更好的了解前端应该学什么，从哪里入手。这是我为学习前端列的一个清单：1.JavaScript为主的前端工程师是个吃货，深度和广度都不能差。变量与类型1.JavaScript规定了几种语言类型2.JavaScript对象的底层数据结构是什么3.Symbol类型在实际开发中的应用，可以手动实现一个简单的Symbol4.JavaScript变量在内存中的存储形式5.内置基本类型对应的对象，以及它们之间的装箱和拆箱操作6.理解值类型和引用类型7.null和undefined的区别8.至少可以提到三种判断JavaScript数据类型的方法，以及它们的优缺点，如何准确判断数组类型9.可能发生隐式类型转换的场景及转换原则，如何避免或巧妙应用10.小数精度丢失的原因，JavaScript能存储的最大数，最大安全数。JavaScript处理大数的方法和避免精度丢失的方法这里我建了一个前端学习交流群：132667127，我自己整理的最新前端资料和进阶开发教程，如果你想需要的，可以进群一起学习交流原型和原型链1.了解JavaScript中的原型设计模式和原型规则2.instanceof底层实现原理，手动实现一个instanceof4.继承和实现的几种方式它们的优缺点5.至少讲一个开源项目（如Node）中原型继承的案例6.能描述new一个对象的详细过程，手动实现一个new操作符7.了解es6类结构及底层继承作用域和闭包的实现原理1.理解词汇Scope和动态作用域2.理解JavaScript的作用域和作用域链3.理解JavaScript的执行上下文栈，可以利用栈信息快速定位问题4.这个的原理和几种不同使用场景的价值5.Close包的实现原理和作用可以列举几个闭包在开发中的实际应用6.理解栈溢出和内存泄漏的原理，如何预防7.如何预防处理循环的异步操作8.理解模块化解决的实际问题，可以列举几种模块化方案，理解原理执行机制1.为什么把return放在try里，finally会执行，理解其内部机制2.如何JavaScript实现异步编程，可以详细描述EventLoop机制3.宏任务和微任务分别4.能快速分析一个复杂的异步嵌套逻辑，并掌握分析方法5.使用Promise实现串行6.Node与Node的区别和浏览器EventLoop7.如何在保证页面流畅运行的同时处理海量数据语法和API1.了解ECMAScript与JavaScript的关系2.熟悉es5、es6提供的语法规范，3.熟悉全局对象（如Date、Math）、全局函数（如decodeURI、isNaN）和全局属性（如Infinity,undefined)4.熟悉map,reduce,filter等高阶函数解决问题URL解析，去重等)解决常见问题7.JavaScript异常处理方法，统一异常处理方案二，HTML和CSSHTML1。从规范的角度理解HTML，从分类和语义的角度使用标签2、常见页面标签的默认样式、内置属性、不同浏览器的差异、浏览器兼容性问题的处理方式3、元信息标签（head、title、meta）使用目的及配置方法4.HTML5离线缓存原理5.可以使用CanvasAPI、SVG等绘制高性能动画CSS1。CSS盒模型，不同浏览器的区别2.CSS所有选择器及其优先级，使用场景，可以继承，如何使用规则3.什么是CSS伪类和伪元素，它们的区别和实际应用4.HTML文档流的排版规则，CSS几种定位规则和定位引用对象，对文档流的影响，如何选择最佳定位方式，Sprite5的实现原理。水平和垂直居中方案，可实现6种以上及其优缺点对比6.BFC实现原理，可以解决的问题，如何创建BFC7.可以利用CSS函数复用代码实现特效8.PostCSS、Sass、Less的异同，以及配置的使用，至少掌握一种9.CSS模块化方案，如何配置按需加载，如何防止CSS阻塞渲染10.熟练使用CSS实现渐变、移动、旋转、缩放等常用动画11.CSS浏览器兼容性编写，了解不同API在不同浏览器下的兼容性12.掌握一个完整的一组响应布局方案手写1.手写图片的瀑布效果2.使用CSS绘制几何图形（圆形、三角形、扇形、菱形等）3.使用纯CSS实现曲线运动（贝塞尔曲线）4.实现常用布局（三柱式、圣杯式、双飞翼式、吊顶式），但要说出各种方式，了解各自的优缺点。3、计算机基础关于编译原理，不需要理解的很深，但是一定要了解最基本的原理和概念。这对学习非常重要。一门编程语言很重要编译原理1.理解代码是什么，计算机如何将代码转换成可以运行的目标程序2.正则表达式的匹配原理和性能优化3.如何将JavaScript代码解析成抽象的语法树（AST）4.base64的编码原理5.几种base的相互转换计算方式，如何在JavaScript中表达和转换网络协议1.理解什么是协议，理解TCP/IP网络协议的组成family，以及协议的每一层在应用中所起的作用2.三次握手和四次挥手的详细原理，为什么要使用这种机制3.哪些协议是可靠的，TCP有哪些手段保证可靠传递4.DNS的作用，DNS解析的详细过程，DNS优化的原理5.CDN的作用和原理6.HTTP请求报文和响应报文的具体组成可以理解解释常见请求头的含义，有几种请求方式，有什么区别7.所有HTTP状态码的具体含义，查看异常状态码可以快速定位问题8.HTTP1.1和HTTP2带来的变化.09。HTTPS的加密原理，如何开启HTTPS，如何劫持HTTPS请求10.了解WebSocket协议的底层原理以及与HTTP的区别。模式等2.发布-订阅模式与观察者模式的异同，以及实际应用3.能说出几种设计模式在开发中的实际应用，理解设计模式在开发中的应用框架源码4.数据结构与算法据我了解，大部分前端都对这部分知识有些欠缺，甚至抗拒，但如果突破更高的天花板，这部分知识是必不可少的，而且我亲身体验过——非常有用！JavaScript编码能力1.数组去重和扁平化的多种实现方式，优缺点对比2.实现深拷贝的多种方式，优缺点对比3.将手写函数柯里化成工具函数，了解它们的应用场景和优势4.手写防抖节流工具功能，了解其内部原理和应用场景5.实现一个休眠功能手动实现前端轮1.手动实现call,apply,bind2.手动实现符合Promise/A+规范，手动实现asyncawait3。手写一个EventEmitter，实现事件的发布和订阅。4、可以命名两个方案，实现双向绑定，可以手动实现。手写懒加载、下拉刷新、上拉加载、预加载等效果数据结构1.了解常用数据结构的特点，以及在不同场景下的优缺点2.了解数组和字符串的存储原理，以及熟练使用它们解决问题3.了解二叉树、栈、队列、哈希表的基本结构和特点，并能应用它们解决问题4.了解图和堆的基本结构并使用场景算法1.会计算一个算法的时间复杂度和空间复杂度，能预估业务逻辑代码的耗时和内存消耗2.至少了解五种排序算法的实现原理、应用场景、优缺点，能快速分辨时间和空间复杂度3.了解递归和循环的优缺点、应用场景，并在开发中熟练应用4.能应用回溯算法、贪心算法、分治算法、动态规划等解决复杂问题5.算法方案为前端处理海量数据语言与环境的关系：ECMAScript描述了JavaScript语言浏览器的语法和基本对象规范为JavaScript的运行环境为其提供：文档对象模型(DOM)，它描述了处理Web内容的方法和接口，以及浏览器对象模型(BOM)，它描述了与浏览器交互的方法和接口。Node也是JavaScript的一个运行环境，提供了操作I/O、网络等的API浏览器API1。浏览器提供的符合W3C标准的DOM操作API，浏览器差异，兼容性2.浏览器提供的浏览器对象模型（BOM），提供所有全局API，浏览器差异，兼容性3.大量的DOM操作,海量数据的性能优化（merge操作，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.浏览器采用的缓存方案，如何选择和控制合适的缓存方案Node1.了解Node在应用程序中的作用，可以使用Node搭建前端运行环境，使用Node操作文件，操作数据库等。2.掌握一个Node开发框架，如Express、Express和DifferencesinKoa3、熟练使用Node提供的Path、Http、ChildProcess等API，了解其实现原理4、Node底层运行原理，以及与浏览器的异同5、实现原理Node的事件驱动和非阻塞机制6，框架和类库的轮子层出不穷，从原理上理解TypeScript才是正道1.理解泛型和接口等面向对象的概念，TypeScript实现面向对象的概念2.了解T的使用TypeScript的好处，掌握TypeScript的基本语法3.TypeScript的规则检测原理4.可以在React、Vue等框架中使用TypeScript开发React执行机制，如何有效管理状态3.React的底层实现机制React的事件4.React的虚拟DOM和Diff算法的内部实现5.React的Fiber的工作原理，解决了哪些问题6.ReactRouter和VueRouter的底层实现原理，动态加载实现原理7.熟练应用ReactAPI，生命周期等，可以应用HOC，renderprops，Hooks等高阶用法来解决问题8.基于React的特点和原理，可以手工实现一个简单的ReactVue1.熟练使用Vue的API、生命周期、钩子函数2.MVVM框架设计理念3.Vue双向绑定实现原理，Diff算法内部实现4.Vue的事件机制5.从模板到真实DOM实现机制的转换多端开发2．单页应用（SPA）原理及优缺点，掌握一个快速开发SPA方案3.了解Viewport、em、rem、resolution、px、ppi、dpi、dp的区别及实际应用3.移动端页面适配解决方案，不同机型适配解决方案4.掌握一种JavaScript移动客户端开发技术，如ReactNative：可以搭建ReactNative开发环境，熟练开发，了解ReactNative运行原理，不同终端适配5.掌握一种JavaScriptPC客户端开发技术，如Electron：能搭建Electron开发环境，熟练开发，了解Electron运行原理6.掌握小程序开发框架或原生小程序开发7.了解多端框架内部实现原理，至少了解一个多端框架的数据流管理1.掌握React和Vue传统的跨组件通信方案，比较数据流管理框架的异同2.熟练使用Redux管理数据流，以及了解其实现原理和中间件实现原理3.熟练使用Mobx管理数据流，了解其实现原理，与Redux相比有哪些优势4.熟练使用Vuex管理数据流，并理解其实现原理5.以上数据流方案不同情况下技术选型的异同、优缺点、实用库1.掌握至少一种UI组件框架，如antddesign2、掌握一种图表框架，如Echart，了解其设计理念和底层实现，自行实现图表。3、掌握一种GIS开发框架，如百度地图API4。掌握一种可视化开发框架，如Three.js、D35。工具函数库，如lodash、underscore、moment等，了解所用工具类或工具函数的具体实现原理开发调试1.熟悉各浏览器提供的调试工具2.熟练使用代理工具实现请求代理和抓包，如charls3.能使用Android、IOS模拟器进行调试，掌握真机调试方案4.了解Vue、React等框架调试工具的使用7.前端工程Front-端工程：使用工程方法和工具提高开发效率，降低维护难度ESLint、webpack等工具在项目中的作用4.ESLint规则检测原理，常用ESLint配置5.Babel核心原理，可以写自己做一个Babel插件6.可以配置一个前端代码兼容方案，比如Polyfill7.Webpack的编译原理，构建过程，热更新原理，chunk,bundle,module的区别和应用8.可以熟练配置已有的loader和plugins来解决问题，nginx1.0可以自己写loader和plugins。正向代理和反向代理的特点和例子2。你可以手动搭建一个简单的nginx服务器。3、熟练应用常用的nginx内置变量，掌握常用的匹配规则。4.会使用nginx实现请求过滤，配置gzip，负载均衡等，并能讲解其内部结构加快开发的原理1.熟练使用一种接口管理和接口mock工具，如yapi2.掌握高效的日志埋点方案，快速使用日志查询工具定位线上问题3.了解TDD和BDD模式，至少会使用前端单元测试框架版本控制1.了解Git核心原理，工作流程，与SVN的区别2.熟练使用常规Git命令，gitrebase,gitstash等高级命令3.能快速解决线上问题持续集成分支回滚，线上分支错误合并等复杂问题1.了解CI/CD技术含义，熟练使用至少一种CI/CD工具，如Jenkins2。能独立完成架构设计、技术选型、环境搭建、全流程开发、部署等全套开发流程（包括Web应用、手机客户端、PC客户端、小程序、H5等）八、项目及业务后台技能1、了解后台的开发方式及其在应用程序中的作用，以及至少使用一门后端语言2.掌握数据最终是如何存储到数据库中的，了解表结构设计和表之间的关系，至少使用一种数据库性能优化1.了解前端性能度量指标和性能监控点，掌握一套前端性能监控方案2.了解常见的Web和App性能优化方案3.SEO排名规则，SEO优化方案，前后端分离SEO4.SSR实施方案，优缺点，以及性能优化5.Webpack性能优化方案6.Canvas性能优化方案7.React，Vue等框架使用性能优化方案3.HTTP劫持和页面劫持原理，防御措施业务相关1.可以了解开发项目的整体业务形态、业务目标、业务架构，能够快速定位线上业务问题2.能够了解开发项目的整体技术架构，能够根据新的需求快速阅读开发方案，是能够根据业务告警、在线日志等快速定位和解决在线技术问题一定的不可替代性九、学习提升知乎问题中的vczh大师【如何才能达到温兆伦三大神的水平】未来？】下面的回答：这十年我做了三件事：1、不以赚钱为目的选择学习内容；2、以会不会造轮子来衡量学习效果；代码，前10年每天至少6小时，除去学习和工作的时间，以上几点可能有点难度。第一点我做不到，但是后面的绩点还是比较容易的。关于写博客，可以向别人解释的知识将比您自己可以学到的知识要深得多。1、有自己的技术博客，或者在一些博客平台上有自己的专栏。2.定期总结知识，不断完善自己的知识体系3.努力把自己的知识转化为真实的输出，不要只停留在书面理解的层面，更重要的是实际应用4.坚持输出你的知识自己的代码，不要盲目进入公司业务。这部分技术以外的部分，可能比上面九项加起来还要重要！1.了解互联网人事术语：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等2.了解互联网行业术语：B2B、B2C、C2C、O2O等3.掌握互联网行业交流、问答、学习4.有一定的“PPT”能力5.有一定的理财意识，至少了解储蓄、货币基金、保险、指数基金、股票等基本金融知识.电脑辐射下如何保持健康，建立正确的养生知识体系其实，在这个信息发达的时代，最不可或缺的就是资源。如何从众多资源中获取真正的精华非常重要。资源在于精不在于多，强烈建议在保证深度的同时保证广度。
