对前端开发感兴趣的同学可能都有这样的体会，前端入门比较容易，但是高级前端工程师之路充满了各种学习内容，有时会令人困惑。这一方面是因为前端领域本身固有的特点，另一方面也是因为大部分初学者缺乏明确的路线指引。本文将结合Roadmap中的前端学习路线图，对前端从入门到进阶所涉及的主要方面进行最新的回顾。1、网络网络是Web信息传输的媒介和基础，因此需要对网络交互的整个过程、工作原理、DNS解析、终端浏览器页面呈现等有一个基本的了解。就像我们在学开车之前，先对交通系统和汽车的基本结构有一个基本的了解，这对后面的驾驶学习起到更好的辅助作用。2.HTML、CSS、JavaScript这些是前端开发的基础。Web应用中的大部分功能都是通过这三者实现的，前端开发中的大部分工作也是基于这三者进行的。如果将Web应用程序的实现比作一座建筑物，那么HTML就像是钢筋混凝土，构成了建筑物的主体；CSS就像是建筑物的装饰，让外观更加美观；而JavaScript就是水电系统，提供Enough更好的服务和调度。所以，如果你扎实掌握了这三项，你也就掌握了前端开发的核心。不管主流的开发框架怎么更新，大家都可以适应变化而不改变。3、版本管理系统版本管理系统是编码中重要的辅助工具之一。它主要负责代码的管理。使用范围不仅限于前端开发。一般只要涉及到代码管理就会用到。目前，Git被广泛使用，有很多关于它的有趣教程。GitHub提供第三方代码托管服务，也是程序员的主要聚集地之一。4.Web安全前端初学者可能比较陌生，但是随着前端工作经验的积累，就会感受到Web安全的重要性。俗话说，“吃个坑，长智慧”。在没有发生安全事件的情况下，对Web安全的重视往往被认为是可有可无的，但是一旦出现问题，真的会长记性，所以最好还是能做到防患于未然。5、包管理npm和yarn是目前常用的包管理工具，主要负责管理前端开发中使用的代码包和依赖。现在的前端开发往往依赖已有的库，也就是所谓的“站在巨人的肩膀上”，包括开源的前端框架、常用工具、公司自建的公共库等。这些包的引用管理可以在包管理工具的帮助下自动完成。6.CSS架构与预处理手写CSS样式经常会遇到样式嵌套和重用。这方面可以参考BEM规范。CSS预处理就是利用第三方库，将开发时编写的类CSS代码预处理成真正的CSS代码。不同的框架提供相似的语法，主要作用是方便CSS的书写和组织。7、构建工具Web应用在发布前通常需要一个构建过程，包括源代码打包、验证、格式化等，所需项目视实际需要而定。主要功能包括执行代码打包、自动构建、规范代码编写和格式化，提高发布代码的执行效率等。一般每个开发团队都会有统一的配置。8.Framework框架就到这里了。该框架的主要功能是提高应用程序开发和运行的效率。它就像一门“飞机大炮”。有了优秀的工具，就不用手动“造轮子”了。React.js和Vue.js主要是国内大大小小的工厂都在用。两种框架各有所长，可以根据实际情况选用。9、现代CSS中出现了新的CSS-in-JS框架，如：Styled-Components、CSS-Modules、Styled-JSX等。维护提供了一种新的实现方式，减少了CSS代码的组织冗余和样式冲突，并且对CSS运行效率也起到了一定的辅助优化作用。10.WebComponents“WebComponents”是浏览器原生支持的组件化特性，实现了对DOM元素和交互逻辑的封装，在特定的需求场景下可以考虑使用。11.CSS框架CSS框架提供了常用的UI组件。风格和交互都进行了统一标准的设计，有利于应用界面的快速构建。如果对界面设计没有特殊要求，一般可以直接用于应用程序开发。常用的开源CSS框架有很多，可以根据实际需要选择，也可以基于框架进行二次开发。12.测试前端测试是一项重要的工作，但也很容易被忽视。对于整个前后端系统来说，在测试的时候，前端往往是bug的重灾区。一方面，有很多容易被忽视的前端交互细节。另一方面，前端相当于产品整个功能开发链条的终端。大部分都可以通过联调时的前端反馈修复，但是前端没有这层“联调保障”，所以前端面临的测试挑战相对来说更加严峻。使用主流的测试框架，可以高效完成前端应用的单元测试和功能测试。俗话说：“三份设计，一份编码，六份测试”，前端也是如此。13.类型检测TypeScript是一种广泛使用的类型检测语言，而不是JavaScript。如果没有特殊限制，建议尽快使用。实际上可以避免许多错误。应用程序越大，越能体现TypeScprit的类型检测优势。14.ProgressiveWebEnhancement一些API广泛应用于移动Web交互场景。主要功能是提升用户体验。具体实现要根据具体的业务需求，综合考虑来确定技术选型。15、服务端渲染服务端渲染是相对于客户端渲染的一种页面构建实现。它在服务端构建完成后，直接将客户端要显示的具体内容返回给客户端。优点是大多数情况下都可以显示。提高页面响应速度，方便SEO，灵活适配客户端设备。当然，也有不足之处。例如，当支持更复杂的应用时，服务器的高资源开销会降低响应速度。服务端渲染增加了应用在服务端实现的复杂度，是否使用要根据具体情况综合评估。16.GraphQLGraphQL是一种结构化数据查询语言。与传统的RESTAPI查询相比，GraphQL支持更方便的结构化查询方式。数据按需检索，便于动态集成。更适应前端开发中数据查询的需求。灵活的需求。当然，本身也有很多不足之处，是否选择它也是根据实际情况综合评价的。17、静态站生成静态站生成的技术实现包括SSR和静态网站编译。SSR上面已经介绍过了。静态网站编译是网站建设的一种方式。多用于部分信息展示网站，如博客、产品官网等。常备选项之一。18.移动应用和PC应用也可以基于移动应用框架的前端技术栈完成移动应用开发。框架底层结合原生系统提供技术支持，为多端需求的开发提供高效统一的实现方案。即“一处编写，多处执行”。比较适合普通的商务应用，暂时不适合游戏等对性能要求很高的应用。同样，前端技术栈也可以使用框架完成PC端的应用开发。具体的技术选择还是要根据实际需要，综合考虑。19、WebAssemblyWebAssembly的特点是执行速度快，同时也为其他高级语言提供了一种在Web上与JavaScript协同运行的方式。它仍在不断发展和完善中。综上所述，前端开发涉及到的主要方面上面已经梳理完毕。每一项包含的内容足以写一本书来解释。事实上，已经有很多优秀的书籍详细解释??了每个分支。对于初学者来说，不必急于求成。前端学习也是一个循序渐进的过程。希望大家能保持对coding的热爱，在不断的实践中收获快乐！
