前言最近经常有朋友问我现在前端技术怎么学这么复杂。这个话题太大了，不是三言两语可以回答的；也因为这个问题确实困扰着很多前端开发者，所以我也开始系统的输出这篇文章。这篇文章虽然花了很长时间，但肯定有其局限性；希望大家指出。进题的时候，我们能感觉到前端这个岗位现在已经发展成为最重要的研发岗位之一，所以对我们的要求也越来越高了。所以我们需要学习的不仅仅是CSS&HTML&JavaScript。但是这三大件一直都是前端的基础，这一点从来没有变过。在这三块中，JavaScript是最重要的。接下来我会结合自己的一点经验，对前端的学习路线给出一些具体的建议。内容三大学习库工具前端框架（MVVM）学习浏览器&电脑基础前端工程性能优化Nodejs数据结构与算法跟着葫芦学三大学习现在入门级的前端开发还是很多的每年。所以给刚入门的朋友一些建议。刚入门的朋友，我觉得像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推荐书籍/网站HTML《Head First HTML与CSS》HeadFisrt系列书籍你懂的，为初学者而生，文字幽默为主，图片丰富，简单易懂。《HTML5 权威指南》一本豆瓣评分8.5的书，书是没问题的。800多页的书不用多说，但是能不能看完是个问题，就看决心和“手速”了。网络教程https://www.w3school.com.cn/h.asphttps://www.runoob.com/html/html-tutorial.htmlhttps://developer.mozilla.org/*CSS《CSS权威指南》现在放上看起来是一本“老书”，但是里面有很多基础的东西需要学习。CSS的东西细节很多，所以这本书应该是CSS知识点的大复习，所以这本书可以作为参考书。《CSS揭秘》本书展示了47个CSS技巧。这是一个实用的教程。虽然算是进阶书籍，但内容并没有那么难。看完之后，会启发很多实现思路。网络教程https://www.runoob.com/css/css-tutorial.htmlhttps://www.w3school.com.cn/css/index.asphttps://developer.mozilla.org/*JavaScript语言《你不知道的 JavaScript》这本书是翻译的，分几册，你懂的黄油封面~应该说这本书详细解释了JavaScript中很多复杂而深入的概念，比如作用域，闭包，原型，异步等等，在线书评仍然可用。《JavaScript DOM编程艺术》这本书不算太厚，新手也能用。学习和实践本书的内容后，入门应该没有问题，所以可以找一些经典甚至是圣经的书来加强和巩固后面的内容。.《JavaScript 高级程序设计》大名鼎鼎的JS红皮书，是一本权威的JavaScript入门书，没错就是一本入门书！别被名字中的“进阶”二字吓跑了~内容循序渐进，基础全面，不能指望一次过一遍，适合精读回味。《大型网站性能优化实战》《前端性能优化原理与实践》上面是《小红书》，这本是《犀牛书》。据说这两本书放在一起更合适。本书由淘宝前端团队翻译，堪称JavaScript开发者的圣经之一。菜鸟教程：https://www.runoob.com/js/js-tutorial.html现代JavaScript教程：https://zh.javascript.info/MDN文档：https://developer.mozilla.org/LibraryToolsFor在库工具方面，我们常用的有JQuery、underScore、zepto、Moment等JQuery：降低开发者操作DOM的复杂度UnderScore：提供实用的功能Zepto：JQuery的简化版Moment：日期时间操作库这些库提供给我们带来了极大的方便，节省了我们编写相关方法的时间，也让我们的程序更加健壮——我们自己编写的方法在某些情况下很可能存在bug。当然，对于这些库，我们不仅仅了解API，还需要了解其源码。看看自己写相关方法的有没有想过这种方法。这些库工具也是很好的学习工具，我们不应该忽视它们。比如让你自己实现节流功能，你会怎么实现。filter对象应该怎么实现...Underscore的源码里不就是有这种问题的答案吗？我们在学习库工具的时候，一定要回头看看JavaScript基础；这进一步巩固了基础。学习前端框架（MVVM）最流行的框架一定是React和Vue。如果说JQuery的存在让我们操作DOM变得更加简单，那么现在的MVVM框架让我们摆脱了手动更新DOM的复杂操作。.至于React和Vue到底学哪一个，更多的是看公司用的是哪一个（不一定）。至于如何使用Vue（React），上手时间并不长。我们更应该关心的是它们背后的设计思路和实现原理。一些问题responsive的基本原理是什么？了解发布-订阅模型？了解虚拟DOM？前端路由的实现原理？nextTick/setState的实现原理？没必要花太多时间，研究一下它们背后的设计思路和实现原理。VuevsReact我应该选择哪个？这道题很多人都犯了难（有的人两个都学，就没有这道题了），这道题已经有很多人回答过了。但我还是觉得，没必要选哪个政治正确，选你需要的。如果您有兴趣，可以看看这篇文章：ReactorVue:WhichJavascriptUILibraryShouldBeUsing?以下是文中提炼的观点：Vue的优点是：灵活选择模板和渲染函数简单的语法和更快的项目配置更快的渲染速度和更小的体积。React的优点是：更适合大规模应用，可测试性更好。它也适用于网络和本机应用程序。更大的生态，更多的支持和易用的工具Vue相关资料对于框架的一些学习资料，我个人更倾向于推荐官方文档。很多问题，官方文档已经说的很清楚了。市面上有些书是官方文档的延伸（不排除优秀作品）。Vue官网&VueRouter官网&Vuex官网Vue.js内部运行机制分析金块小册子Vue技术揭秘浏览器&电脑基础需要有一定的掌握。因为它能让你更好的理解前端。浏览器一直是JavaScript最重要的宿主环境，所以我们必须了解JavaScript是如何在浏览器中执行的。浏览器应该是接触我们前端开发最多的。记得第一年工作最头疼的就是处理IE兼容问题。工作中很多问题都和浏览器有关，所以我觉得了解浏览器是如何工作的是非常有必要的。为什么要了解浏览器的工作原理？准确评估web开发项目的可行性从更高维度审视页面解决面试中遇到的大部分浏览器问题计算机基础我们需要对计算机基础有一个大概的了解，这样才能对整体流程把握。在实际开发过程中不会太被动。需要了解的一些知识点浏览器缓存机制浏览器中JavaScript执行机制页面渲染原理浏览器安全问题浏览器为什么会跨域如何系统优化页面HTTP和HTTP的区别STCP/IP协议三向握手和四向握手CDN的作用和原理正向代理和反向代理的特点...这里只是介绍了一部分知识点。如果你想全面学习，可以阅读下面的推荐资料。浏览器&网络基础推荐书籍/资料《浏览器工作原理与实践 》专栏《图解 HTTP》《网络是怎样连接的》前端工程从事前端开发时间长一点，你肯定会有这样的感受——前端开发越来越工程化了并且越来越复杂。对于前端开发来说，现在前端需要做的不仅仅是切页面、调整界面那么简单，我们需要了解的技术无疑更加广泛。一点点前端工程随着项目的复杂度越来越高，前端需要做的工作也越来越重。当项目复杂时，就会出现很多问题，比如：如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？如何降低项目生产风险？在前端工程细分上，我觉得可以分为三个方向：模块化、组件化、标准化。也就是说，凡是能够提高前端开发效率，提高前端应用质量的手段和工具，都是前端工程的实践。模块化JavaScript模块化CSS模块化资源模块化组件化从UI中拆分出来的模板（HTML）+样式（CSS）+逻辑（JS）的每一个结构单元都是功能齐全的，我们称之为组件。即把复杂的页面按照功能拆分成多个独立的组件。标准化编码标准接口标准Git使用标准CodeReviewUI元素标准前端工程一些知识点了解Babel、ESLint、webpack等工具在项目中的作用Babel核心原理Webpack编译原理、构建过程、热更新原理基本了解nginxGit工作流的意义和优势Mock性能优化说到性能优化，大家首先想到的是什么？首先想到的是一道面试题：从输入网址到页面加载完成的具体过程。因为从直观的角度来看，我们的前端需要优化的步骤基本都在这个加载项目中。性能优化现在是前端的必备技能。当然，一些所谓的性能优化技术现在已经成为一种需要遵循的规范。我们需要重点关注两个方向的性能优化：运行时优化开发过程中的性能优化性能优化一些知识点前端性能指标，性能监控（performance，LightHouse）常见的性能优化方案有哪些SSR解决方案性能优化webpack性能优化schemeReact、Vue等框架使用性能优化方案网络级优化方案页面渲染级优化方案白屏优化方案...推荐资料《大型网站性能优化实战》《前端性能优化原理与实践》掘金小册子Nodejs我们知道由于Nodejs的出现，前端开发有了出现了新的高潮。JS可以开始涉足后端领域，JS的可能性更大。Nodejs的一些知识点Nodejs在应用中的作用Express和Koa的区别Nodejs的底层运行原理，与浏览器的异同Nodejs非阻塞机制的实现原理...我也是数据结构弱的和算法，就不展开了。关于这部分，大家可以刷leetcode。另外推荐一本书《学习 JavaScript 数据结构与算法》（第三版）根据葫芦画画，我们在项目开发过程中可以接触到很多优秀的库工具或者UI库。比如lodash、underscore、moment、element-ui、antddesign等。这么优秀的工具我们自己可能设计不出来，但是我们完全可以跟着这些工具自己写，你会发现有其中有许多令人难以置信的技能和绝妙的想法。借葫芦画画也是一项非常有用的学习技能。最后说一句题外话，本人在一线互联网公司工作十几年，指导过很多同行业的小辈。帮助了很多人学习和成长。我意识到有很多经验和知识值得和大家分享，我们也可以通过我们的能力和经验来解答大家在IT学习中的很多困惑，所以在繁忙的工作状态下，我仍然坚持整理和分享各种东西。我可以免费分享最近的前端面试题，包括HTML、CSS、JavaScript、服务器和网络、Vue、浏览器等，我还在持续更新中。希望每个人都能找到自己想要的工作。有需要的朋友点此免费获取题目+解析PDF。点击此处免费获取标题+解析PDF。
