前端开发感兴趣的同学可能都有领会，前端入门绝对容易，但在通往高级前端工程师的路上却充斥各种学习内容，有时未免感到困惑。这一方面是因为前端畛域自身存在的固有特点，另一方面也是因为初学者大多短少一个清晰的路线指引。本篇文章将联合来自 Roadmap 的前端学习路线图对前端从入门到高阶所波及到的次要方面进行一个最新的梳理。
一、网络
网络是 Web 信息传递的媒介和根底，因而要对网络的交互、工作原理、DNS 解析以及终端浏览器的页面出现等整个流程有一个根本的理解。就像咱们学习开车之前，先对交通系统和车的根本结构有一个根底意识，对后续的驾驶学习会起到较好的辅助作用。
二、HTML、CSS、JavaScript
这是前端开发中的根底的根底，Web 利用中大多功能都是由这三者实现的，前端开发中的大多工作也都是基于这三者发展的。如果把 Web 利用的实现比作大楼修建的话，那么 HTML 就像钢筋水泥，形成了大楼的架构主体；CSS 则像大楼的装璜，使得表面展示更加好看；而 JavaScript 就是电力、水利零碎，为大楼提供够更好的服务和调度。所以扎实把握了这三项内容也就把握的前端开发的外围，无论支流开发框架如何更新，大家都能够做到以不变应万变。
三、版本管理系统
版本管理系统是编码中的重要辅助工具之一，次要负责对代码的治理，应用范畴不限于前端开发，个别只有波及到代码治理的都会用到它，以后宽泛应用的是 Git，有很多乏味的相干教程。GitHub 提供了第三方代码托管服务，同时也是程序员们的次要聚集地之一。
四、Web 平安
前端初学者可能比拟生疏，但随着大家前端工作教训积攒的越多就越会感到 Web 平安的重要性。熟话说“吃一堑，长一智”，当没有引发安全事故时对 Web 平安方面的器重常常会被当作可有可无，然而一旦呈现过问题之后就真正的长忘性了，所以最好还是能做到防患于未然。
五、包治理
npm 和 yarn 是以后罕用的包管理工具，次要负责对前端开发中用到的代码包和依赖进行治理。以后的前端开发常常会依赖于已有的库进行，即所谓“站在伟人的肩膀上”，包含开源的前端框架、常用工具以及公司外部自建的公共库，对这些包的援用治理能够借助包管理工具来主动实现。
六、CSS 架构、预处理
手写 CSS 款式常会遇到款式的嵌套和复用，这方面能够理解参考 BEM 标准。CSS 预处理则是借助第三方库对开发中所编写的类 CSS 代码进行预处理为真正的 CSS 代码，不同的框架提供了相近的语法，次要作用是为 CSS 的编写和组织提供便当。
七、构建工具
Web 利用在公布之前通常须要一个构建环节，包含源码打包、验证、格式化等等，所需事项随理论需要而定，次要作用包含执行代码打包，主动构建、标准代码编写、格局，进步公布代码的执行效率等多个方面，个别每个开发团队都会有一个对立的配置。
八、框架
框架退场了，框架的次要作用是进步利用开发和运行的效率，好比“飞机大炮”，有优良的工具就不用再手动“造轮子”了。国内大小厂支流应用的是 React.js 和 Vue.js，两个框架各有千秋，能够依据理论状况而抉择应用。
九、古代 CSS
现出新的 CSS-in-JS 框架，如：款式化组件（Styled-Components）、CSS 模块（CSS-Modules）、款式化 JSX（Styled-JSX）等，为 CSS 款式的编写与保护提供了新的实现形式，较少了 CSS 代码的组织冗余、款式抵触等，同时也对 CSS 的运行效率起到肯定的辅助优化作用。
十、Web 组件
“Web 组件”是浏览器原生反对的组件化个性，实现了对 DOM 元素及交互逻辑的封装，有特定需要场景能够思考借以应用。
十一、CSS 框架
CSS 框架提供了罕用的 UI 组件，款式及交互通过了对立的标准设计，有助于利用界面的疾速搭建，如果没有对界面设计上的特殊要求，个别能够间接用于利用开发。罕用的开源 CSS 框架有多种，能够依据理论需要进行抉择，也能够基于框架进行二次开发。
十二、测试
前端测试是比拟重要同时也比拟容易被忽视的一项工作。对前后端整个零碎来说，一提到测试往往前端是 Bug 的重灾区，一方面是前端交互细节较多容易疏漏，另一方是前端相当于是产品整个性能开发链的终端，后端潜在的 Bug 大多在联调时就可由前端反馈修复，而前端不具备这层“联调保障”，所以相比而言前端面临的测试挑战就更加的严厉了。搭配应用支流测试框架能够高效的实现对前端利用的单元测试和功能测试。熟话说：“三份设计，一份编码，六份测试”，对前端也是同样的情理。
十三、类型检测
TypeScript 是代替 JavaScript 被大家宽泛采纳的类型检测语言，没有非凡条件束缚的话倡议还是尽早应用，无形中能够躲避很多 Bug，越是体量大的利用越能体现出 TypeScprit 类型检测的劣势。十四、渐进式 Web 加强
局部 API 在挪动端 Web 交互场景中应用较多，次要作用是加强用户体验，具体实施还要联合看具体业务需要，综合思考来确定技术选型。
十五、服务端渲染
服务端渲染是绝对客户端渲染而言的一种页面构建实现，是将客户端所要展现的具体内容在服务器端构建实现后间接返回给客户端，长处在于大多状况下能够进步页面的响应速度，便于 SEO 和客户端设施灵便适配等。当然也存在有余，比方对较简单的利用反对时，服务器的资源开销较大反而会升高响应速度。服务端渲染减少了利用在服务端实现的复杂程度，是否采纳要依据具体情况综合评估。
十六、GraphQL
GraphQL 是结构化数据查询语言，绝对传统的 REST API 查问，GraphQL 反对更加便捷的结构化查问形式，数据按需所取、便于动静整合，较好的适应了前端开发中对数据查问的灵便需要。当然其本身也存在着多种有余，是否选用也是看理论状况的综合评估。
十七、动态站生成
动态站生成的技术实现蕴含了 SSR 和动态网站编译。SSR 下面曾经介绍过，动态网站编译是一种网站构建的形式，多用于偏信息展现类网站，如博客、产品官网等，长处在于内容公布便捷，易用易部署，能够作为轻量站点搭建的常备选型之一。
十八、挪动端、PC 端利用
基于挪动端利用框架前端技术栈同样能够实现挪动端的利用开发，框架底层提供了与原生零碎联合的技术支持，为多端需要的开发提供了高效对立的实现计划，即“一处编写，多处执行”。比拟适宜用于一般的事务类利用，对运行性能要求较高的利用如游戏类临时还不太适宜。同样前端技术栈也能够借助框架实现 PC 端的利用开发，具体技术选型还是要看理论需要，综合思考而定。
十九、Web Assembly
Web Assembly 的特点是执行速度快，同时也为其它高级语言提供了一种与 JavaScript 协同运行于 Web 中的路径，以后还处于一直倒退和欠缺之中。
总结
以上梳理了前端开发所波及到的次要方面，每一项所蕴含的内容都足能够写本书来专门论述，实际上也曾经有了很多优良的书籍对各个分支做了具体地解说。对于初学者不用急于求成，前端学习也是一个循序渐进的过程，心愿大家都能始终放弃那份对编码的酷爱，在一直的实际中播种欣慰！