前言最近经常有朋友问我应该如何从繁杂的前台技术中学习。 这个题目太大，几句话回答不好；因为这个问题确实困扰了很多前端开发者，所以我就开始系统输出这篇文章。 本文虽然篇幅较长，但肯定有其局限性。我希望你可以随意指出 我们可以感觉到前台这个职位现在已经发展成为R&D最重要的职位之一，所以对我们的要求也越来越高。 所以我们需要学习的不仅仅是CSS和HTML。Java Script语言 但这三块一直是前台的根本，这一点从未改变。 而JavaScript是这三者中最重要的。 接下来我结合自己的经验，给前台学习路线的几个具体建议。 三大学习库工具的学习浏览器和基础计算机前台工程节点的性能优化按三大部分进行研究。现在每年仍有许多初步的前景发展。 所以，我想给初学的朋友一些建议。 作为初学者，我觉得你不应该学习Vue、TypeScript、Webpack等知识。从一开始。 我们应该把重点放在CSS和HTML上。关于JavaScript的基础知识。 CSS & amp对于刚入门HTML的朋友，我还是建议CSS (3) &认真学习HTML(5)的知识点。 在学习的路上，学完一部分最好自己打代码，这样可以加深记忆。 当然，如果你喜欢，建议你可以模仿一个网站的静态页面(掘金、知乎等。)首先，您可以通过几个属性来理解它的实际实现场景。 当然，当你开始输入代码时，不要太依赖自动补全功能。一开始使用自动补全不会帮你记住几个属性；好好学习，将来会有回报的。 关于CSS(3)你需要了解的几个知识箱模型(standard & IE)对Flex、float、Normal Flow等的理解。CSS中常用选择器内部、外部风格的差异；了解BFC和国际金融公司的CSS堆叠规则；理解CSS3的变换、过渡、动画等属性的使用；理解响应式布局...CSS说起来容易，说起来复杂；因为CSS总能给你意想不到的惊喜。 HTML(5)你需要了解的几个知识点。说到HTML，我觉得很多人都是div。 因为div很酷，所以不用担心默认风格。 有人说HTML语义有很多优点，比如页面结构清晰，有利于SEO，便于团队开发和维护；这些我都承认，但我还是喜欢div a梭。 语义(我不知道为什么我总是在采访中问)画布localStorage(本地存储、sessionStorage和cookie的知识)视频和音频应用程序缓存清单的使用...JavaScript JavaScript JavaScript一直是我们前台的基石，在一定程度上，对JavaScript的理解深度决定了你的发展。 所以我们必须努力学习。 现在很多人直接跳过闭包、原型链、作用域链、继承之类的文章。现在，你能问问自己是否真的知道这些基础知识点？JavaScript的基础知识点确实很多，所以《JavaScript高级编程》写了700多页；但是，当你有了扎实的JS基础后，你会发现你学习框架或者框架的源代码会容易很多。 JavaScript(ES6+)几个你需要了解的知识点。这个作用域(作用域链)原型链的类型转换以及对动态作用域和词法作用域的理解JavaScript执行机制promise & amp；Async……...上面提到的& HTML & ampJavaScript的基础知识点不需要你一开始就了解透彻；虽然有些是基本的，但也有他们的难处。 就算是学长也不能说全掌握了。有句话说得好——读一百遍这本书，看看它自己的意思。 第一次学习我们不可能什么都懂，至少能给我留下印象。 过一段时间再学习这个知识点的时候，一定会有全新的认识。 只学习一项需要一直在线的任务。反复学习可以帮助你保持持续的竞争力。 我先宣布一个消息。我没说其他技术不需要学，但是初学者最好的一点就是先打好基础。 其实学三大件并不需要太多时间，有基础的话3个月左右就能大致看完。 你真的能理解这是后话，不过是引子。 CSS & ampHTML & ampJavaScript HTML的推荐书籍/网站《Head First HTML和CSS》Head First系列的书，你懂的，就是为初学者而生的。他们的文笔以幽默为主，插图也很丰富，很好理解。 HTML5权威指南豆瓣评分8.5，书没问题。800多页的书不言而喻是全面的，但能不能看完是个问题，要看决心和“手速” 在线教程https://www . w3school . com . cn/h . asphttps://www . run OOB . com/html/html-tutorial . html https://developer.mozilla.org/CSS CSS的权威指南现在已经是“旧书”了，但是很多基础的东西都在。 CSS里面都是细节，所以这本书对于CSS的知识点是一个很大的梳理，所以把这本书作为参考书来看是可以的。 《CSS的秘密》这本书展示了47种CSS技巧。这是一个实用教程。虽然是进阶书，但内容没那么难。看完之后会启发很多实现想法。 Web教程https://www.runoob.com/CSS/CSS-tutorial.html https://www . w3school . com . cn/CSS/index . asphttps://developer . Mozilla . org/JavaScript语言《你不知道的JavaScript》是一本翻译过来的书。分为几册，黄油油的封面你也知道~应该说这本书详细讲解了JavaScript中很多复杂而深刻的概念，比如作用域、闭包、原型、异步等。网上书评还是可以的。 《JavaScript DOM编程艺术》这本书不厚，小白都有。刚开始学的时候，就把这本书里的内容练完了。应该很容易上手，这样我可以找几本经典甚至圣经的书在后面加强巩固。 JavaScript高级编程，著名的JS红宝书，是一本权威的入门JavaScript书，没错，就是一本入门书！不要被你名字里的“高级”两个字吓跑了~内容是循序渐进的，基础的，全面的，不能指望一次就过了。适合精读和回味。 “小红书”在“JavaScript权威指南”之上，这一本就是“犀牛书”。据说这两本书搭配在一起更好。 这本书是淘宝前台团队翻译的，也算是JavaScript开发者的圣经之一。内容太多太全。如果能通读几遍，获得一些经验，预计成神之路也不远了~在线教程菜鸟教程:https://www.runoob.com/js/js-tutorial.html现代JavaScript教程:https://zh.javascript.info/MDN文档:https://developer.mozilla.org/工具对于库工具，我们常用的有JQuery、下划线、zepto、Moment等下划线:提供了操作库的实用函数Zepto: Moment: date和time的简化版本。这些库给我们提供了极大的便利，节省了我们编写相关方法的时间，同时我们的程序也更加健壮——自己编写的方法在某些情况下可能会出错。 当然，对于这些库，我们不仅要了解API，还要学习它的源代码。 看你自己写相关方法的话有没有想到这个办法。这些库工具也是很好的学习工具，我们不应该忽视它们。 比如让自己实现节流功能。你将如何实现它？ 应该如何实施过滤...这个问题的答案不是在下划线源代码里吗？我们在学习库工具的时候，一定要回头看看JavaScript的基础；这样会进一步巩固基础。 学习前台框架(MVVM)目前最火的框架一定是React和Vue。如果说JQuery的存在让我们更容易操作DOM，那么MVVM框架现在把我们从手动升级DOM的复杂操作中解放了出来。 至于学React还是Vue哪个，更多的是看公司目前用哪个(不一定)。 至于Vue(React)怎么用，用不了多久就上手了。我们更应该关注其背后的设计思路和实现原理。 回答少量问题的基本原则是什么？发布订阅模式的知识？虚拟DOM的知识？前台路由的实现原理？nextTick/setState的实现原理？diff算法单页应用(SPA)的原理、优缺点...我们不需要在框架的API使用上花太多时间。我们应该更多地研究其背后的设计思想和实现原理。 Vue和React我该选哪个？这个问题和很多人相比有问题(有的人两者都学，所以没有这个问题)。这个问题很多人已经回答过了。 但我还是觉得没必要选哪个政治正确。选择你需要的。 感兴趣的可以看看这篇文章:react或vue:你应该使用哪个JavaScript UI库？提炼出以下几点:Vue的优点是:模板和渲染函数的灵活性，语法和项目配置简单，渲染速度更快，体积更小。React的优点是:更适合大规模应用，可测试性更好，适用于Web和原生app这两个更大的生态系统，支持和易用的工具更多。对于少量的框架学习资料，我个人更倾向于推荐官方文档。有很多问题，官方文件已经说清楚了。 市面上有些书是官方文件的拓展(不排除优秀作品)。 E Vu官网Erouter官网Ex官网解析vuex.js掘金小册子Vue技术揭秘浏览器&计算机基础如果你想快速进阶到高级工程师，那么对于浏览器&你需要有扎实的计算机基础知识。 因为可以让你更了解前台。 浏览器一直是JavaScript最重要的宿主环境，所以我们必须了解JavaScript是如何在浏览器中执行的。 我们的前端开发应该是接触最多的浏览器。记得工作第一年最头疼的就是解决IE的兼容问题。 工作中很多问题都和浏览器有关，所以我觉得有必要了解浏览器是如何工作的。 为什么要学习浏览器的工作原理？评估精准Web开发项目的可行性，从更高的维度审视页面处理面试中遇到的大部分浏览器问题，我们需要对计算机基础有一个大概的了解，这样才能对整体流程有一个大概的把握。 在实际开发过程中也不会太被动。 少量知识点了解:浏览器缓存机制、JavaScript在浏览器中的实现机制、页面渲染原理、浏览器安全问题、浏览器为什么跨域、如何系统化优化页面、HTTP和HTTPS的区别、TCP/IP协议三次握手和四波CDN的作用和原理、正向代理和反向代理的特点...这里只列出一些知识点。如果想全面学习，可以看以下推荐资料。 浏览器&基础网上推荐书籍/资料《浏览器工作原理与实践》栏目《图解HTTP》和《网络如何连接》前台工程从事时间稍长的开发肯定会有这种感觉——前台开发越来越工程化，越来越复杂。 对于前台开发来说，前台现在需要做的不仅仅是裁剪页面，调整界面，我们需要了解的技术无疑更加广泛。 前台的工程化刍议因为项目的复杂程度越来越高，前台需要做的工作也越来越重。 当项目复杂时，会出现很多问题，比如:如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？如何降低项目生产的风险？如果以工程细分前景，我觉得可以分为模块化、组件化、标准化三个方向。 或者说一切能够提高前台开发效率和前台应用质量的手段和工具都是前台工程的实践。 JavaScript的模块化CSS的模块化资源的模块化组件的模块化每一个功能完整的结构单元，包括从UI拆分出来的模板(HTML)+样式(CSS)+逻辑(JS)，都叫做组件。 也就是说，复杂的页面根据其功能被分成几个独立的组件。 代码规范接口规范Git使用规范CodeReviewUI元素规范前台工程几个知识点了解Babel、ESLint、webpack等工具在项目中的作用。Babel的核心原理，Webpack的编译原理，构造过程，热升级原理nginx的基本理解。理解git工作流模拟的意义和优势。提到性能优化，你首先会想到什么？首先想到的是一个面试问题:从URL的输入到页面加载完成的具体过程。从直观的角度来看，我们前台需要优化的步骤基本都在这个加载项目中。 性能优化现在是前台的必备技能。当然，一些所谓的性能优化技巧现在已经成为一种需要遵循的规范。 我们需要关注两个方向的性能优化:运行时优化、开发优化、性能优化、少量知识点、前台性能度量指标、性能监控(performance，LightHouse)常见的性能优化方案有哪些？SSR方案的性能优化方案有哪些？Webpack的性能优化方案？React、Vue等框架使用性能优化方案？网络级优化方案？页面渲染级优化方案？白屏优化方案...推荐资料《大型网站实用性能优化》和《前端性能优化原理与实践》掘金小册子Nodejs我们知道，因为Nodejs的出现，前端开发出现了新的高潮。 JS一开始可以涉足后台领域，JS的可能性更大。 NodeJS的几个知识点Nodejs在应用中的作用Express与Koa的区别Nodejs的底层工作原理Nodejs与浏览器的异同Nodejs非阻塞机制的实现原理...我在数据结构和算法方面比较弱，就不进行了。 这部分可以刷leetcode。 再推一本《学习JavaScript数据结构与算法》(第3版)。我们可以在项目开发的过程中接触到很多优秀的库工具或者UI库。 如lodash、下划线、矩、element-ui、antd design等。 我们自己可能设计不出这么优秀的工具，但是我们可以自己写出来，你会发现里面有很多不可思议的技巧和优秀的想法。 画瓢也是非常有用的学习技能。 最后题外话，我在一线互联网公司工作十几年了，辅导过很多同行。 帮助了很多人学习和成长。 我意识到有很多经验和知识值得你参考，我们也可以通过自己的能力和经验来解答IT学习中的很多困惑，所以在工作繁忙的情况下我还是坚持各种整理和参考。 我可以免费参考前台最近整理的面试问题，包括HTML，CSS，JavaScript，服务器与网络，Vue，浏览器等。，也希望大家都能找到自己喜欢的工作。 有需要的朋友点击这里免费领取标题+分析PDF。 篇幅有限，仅部分内容有限，仅部分内容有限，仅部分内容有限，点击此处免费领取标题+分析PDF