现在前端技术这么复杂，到底应该怎么学呢。这个话题太大了，不是三言两语可以回答的；也因为这个问题确实困扰着很多前端开发者，所以我也开始系统的输出这篇文章。进题的时候，我们能感觉到前端这个岗位现在已经发展成为最重要的研发岗位之一，所以对我们的要求也越来越高了。所以我们需要学习的不仅仅是CSS&HTML&JavaScript。但是这三大件一直都是前端的基础，这一点从来没有变过。在这三块中，JavaScript是最重要的。接下来我会结合自己的一点经验，对前端的学习路线给出一些具体的建议。内容三大学习库工具前端框架（MVVM）学习浏览器&电脑基础前端工程性能优化Nodejs学习01三大学习每年入门级的前端开发还是很多的。所以给刚入门的朋友一些建议。刚入门的朋友，我觉得像Vue、TypeScript、Webpack等知识不应该从头学起。重点应该放在学习CSS&HTML&JavaScript的基础知识上。CSS&HTML对于刚入门的朋友，还是建议认真学习一下CSS(3)&HTML(5)的知识点。在学习的路上，最好在学习了一部分之后自己敲代码，加深记忆。当然，如果你愿意，我建议你可以先模仿一个网站（掘金、知乎等）的静态页面，并有一些属性来了解它的实际实现场景。当然，刚开始敲代码的时候，不要太依赖自动补全功能。一开始使用自动补全不会帮助你记住一些属性；学得更踏实，以后会有收获。CSS需要了解的一些知识点(3)盒模型(Standard&IE)flex、float、NormalFlow等的理解CSS常用选择器内联、内部、外部样式的区别CSS层叠规则BFC和IFC的理解CSS3transform、transition、animation等属性的使用，理解响应式布局的理解……CSS说的容易说的容易，说的复杂的说的复杂；因为CSS总能给你惊喜。HTML(5)你需要知道的一些知识点说到HTML，我想很多人都是div。因为div用起来很酷，所以不用担心默认样式。有人说HTML语义有很多优点，比如页面结构清晰，有利于SEO，便于团队开发和维护；这些我都承认，但我还是喜欢飞梭。HTML语义（不太明白为什么面试总是问）canvas本地存储（对localStorage、sessionStorage、cookies的理解）视音频使用应用缓存（cachemanifest）...JavaScriptJavaScript一直是我们前端的基石，在一定程度上对JavaScript的理解深度决定了你的开发。所以你必须努力学习。现在很多人直接跳过闭包、原型链、作用域链、继承等文章。现在你可以问问自己，你真的了解这些基础知识点吗？JavaScript的基础知识点确实很多，所以《JavaScript 高级程序设计》写了700多页；但是当你有了扎实的JS基础后，你会发现无论是学习框架还是框架的源码，你都会轻松很多。JavaScript（ES6+）你需要知道的一些知识点类型转换本作用域（作用域链）原型链和继承闭包理解动态作用域和词法作用域JavaScript执行机制promise&async...上面提到的CSS&HTML&JavaScript基础你不需要一上手就把所有的知识点都理解透彻；有些虽然很基础，但也有难处。就是高级的人也不敢说自己什么都掌握了。有句话说得好——书读百遍，方知其义。我们不可能第一遍就明白所有的东西，但至少能给我留下印象。当你隔一段时间再学习这个知识点时，你一定会有新的认识。学习只是一项需要一直在线的任务，反复学习才能帮助你保持持续的竞争力。先声明一下，我不是说其他??的技术不用学，只是初学者最好侧重于先打好基础。其实学好这三大块，花不了多少时间。有基础的话3个月左右可以大致看完。是否真正理解是后话，但已经是入门了。CSS&HTML&JavaScript推荐书籍/网站_W3C'sCSS&HTMLWebTutorial《CSS 权威指南》《CSS 揭秘》《JavaScript 高级程序设计》《你不知道的 JavaScript》Volume1_ECMAScript6GettingStartedwithHTML不知道推荐什么书。我个人认为看教程和动手实践基本没有问题。接下来我们可以学习一些工具库。02库工具库工具常用的有JQuery、underScore、zepto、Moment等JQuery：降低开发者操作DOM的复杂度UnderScore：提供实用功能Zepto：JQuery的简化版Moment：日期时间操作库等库为我们提供了极大的便利，节省了我们编写相关方法的时间，也让我们的程序更加健壮——我们自己编写的方法在某些情况下很可能存在bug。当然，对于这些库，我们不仅仅了解API，还需要了解其源码。看看自己写相关方法的有没有想过这种方法。这些库工具也是很好的学习工具，我们不应该忽视它们。比如让你自己实现节流功能，你会怎么实现。filter对象应该怎么实现...Underscore的源码里不就是有这种问题的答案吗？我们在学习库工具的时候，一定要回头看看JavaScript基础；这进一步巩固了基础。03前端框架（MVVM）学习最流行的框架肯定是React和Vue。如果说JQuery的存在让我们操作DOM变得更加简单，那么现在MVVM框架让我们摆脱了手动更新DOM的复杂操作。至于React和Vue到底学哪一个，更多的是看公司用的是哪一个（不一定）。至于如何使用Vue（React），上手时间并不长。我们更应该关心的是它们背后的设计思路和实现原理。一些典型问题响应式的基本原理是什么？了解发布-订阅模型？了解虚拟DOM？前端路由的实现原理？nextTick/setState的实现原理？没有必要花太多时间使用它们。研究一下它们背后的设计思路和实现原理。VuevsReact我应该选择哪个？这道题很多人都犯了难（有的人两个都学，就没有这道题了），这道题已经有很多人回答过了。但我还是觉得，没必要选哪个政治正确，选你需要的。以下是文章提炼的观点：Vue的优点是：灵活选择模板和渲染函数简单的语法和项目配置更快的渲染速度和更小的体积React的优点是：更适合大型应用和更好的可测试性适用于web和原生App更大的生态，更多的支持和易用的工具Vue相关资料对于框架的一些学习资料，我个人更喜欢推荐官方文档，有很多问题官方文档已经说清楚了。市面上有些书是官方文档的延伸（不排除优秀作品）。Vue官网&VueRouter官网&Vuex官网Vue.js内部运行机制解析金块小册子Vue技术揭秘04浏览器&电脑基础你需要有一定的掌握。因为它能让你更好的理解前端。浏览器一直是JavaScript最重要的宿主环境，所以我们必须了解JavaScript是如何在浏览器中执行的。浏览器应该是接触我们前端开发最多的。记得第一年工作最头疼的就是处理IE兼容问题。工作中很多问题都和浏览器有关，所以我觉得了解浏览器是如何工作的是非常有必要的。为什么要了解浏览器的工作原理？准确评估web开发项目的可行性从更高维度审视页面解决面试中遇到的大部分浏览器问题计算机基础我们需要对计算机基础有一个大概的了解，这样才能对整体流程把握。在实际开发过程中不会太被动。需要了解的一些知识点浏览器缓存机制浏览器中JavaScript执行机制页面渲染原理浏览器安全问题浏览器为什么会跨域如何系统优化页面HTTP和HTTP的区别STCP/IP协议三向握手和四向握手CDN的作用和原理正向代理和反向代理的特点...这里只是介绍了一部分知识点。如果你想全面学习，可以阅读下面的推荐资料。浏览器&网络基础推荐书籍/资料《浏览器工作原理与实践 》专栏《图解 HTTP》《网络是怎样连接的》05前端工程从事前端开发时间长一点，你肯定会有这种感觉——前端开发越来越工程化了——面向和越来越复杂。对于前端开发来说，现在前端需要做的不仅仅是切页面、调整界面那么简单，我们需要了解的技术无疑更加广泛。一点点前端工程随着项目的复杂度越来越高，前端需要做的工作也越来越重。当项目复杂时，就会出现很多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？如何降低项目生产风险？在前端工程细分上，我觉得可以分为三个方向：模块化、组件化、标准化。也就是说，凡是能够提高前端开发效率，提高前端应用质量的手段和工具，都是前端工程的实践。模块化JavaScript模块化CSS模块化资源模块化组件化从UI中拆分出来的模板（HTML）+样式（CSS）+逻辑（JS）的每一个结构单元都是功能齐全的，我们称之为组件。即把复杂的页面按照功能拆分成多个独立的组件。标准化编码标准接口标准Git使用标准CodeReviewUI元素标准前端工程一些知识点了解Babel、ESLint、webpack等工具在项目中的作用Babel核心原理Webpack编译原理、构建过程、热更新原理基本了解nginx之Git工作流的意义和优势Mock06性能优化说到性能优化，你首先想到的是什么？首先想到的是一道面试题：从输入网址到页面加载完成的具体过程。因为从直观的角度来看，我们的前端需要优化的步骤基本都在这个加载项目中。性能优化现在是前端的必备技能。当然，一些所谓的性能优化技术现在已经成为一种需要遵循的规范。我们需要重点关注两个方向的性能优化：运行时优化开发过程中的性能优化性能优化一些知识点前端性能指标，性能监控（performance，LightHouse）常见的性能优化方案有哪些SSR解决方案性能优化webpack性能优化方案React、Vue等框架使用性能优化方案网络级优化方案页面渲染级优化方案白屏优化方案...推荐资料《大型网站性能优化实战》《前端性能优化原理与实践》掘金小册子07Nodejs学习我们知道由于Nodejs的出现，前端发展出现了新的高潮。JS可以开始涉足后端领域，JS的可能性更大。Nodejs的一些知识点Nodejs在应用中的作用Express和Koa的区别Nodejs的底层运行原理，与浏览器的异同Nodejs非阻塞机制的实现原理...好资源会事半功倍事半功倍。像一篇文章看懂xxxxxx的，10分钟看懂xxxxxx。别做梦了，学习没有捷径。要想学好，就必须系统地、深入地学习。如果你真的想学好一门技术，如果你有经济能力，还是需要系统的课程。技术更新迭代很快。只有在有限的时间内掌握技术，才能在基础技术的基础上走在前面，拓展领域。特设学习Q-q-u-n⑦⑧④-⑦⑧③-zero①②分享学习方法和需要注意的小细节，互相交流学习，不断更新最新教程和学习技巧（网页制作，网站开发，网页开发，从0基础HTML+开始CSS+JavaScript.jQuery、Ajax、node、angularframework等到移动端HTML5项目实战【视频+工具+系统路线图】全栈工程师的学习路线和规划整理分享给朋友）点：学前端，我们是认真的
