2022 前端学习路线图谱

前言

一些做前端的同学在想着业余时间学点什么的时候，没有清晰的自我定位，和明确的学习路径规划，那么你可以参考我的列表知识点各个击破，铸就成神之路。

在 GitHub 看到一个很不错的前端学习路线图（roadmap），从前端基础到前端工程化，再到跨端，都有知识点的覆盖，非常推荐阅读。

image.png

✔︎ 表示个人推荐学习

✔︎ 表示可选择学习

✔︎ 表示不需要严格按照路线的先后顺序，可在任何时间补充这一块的知识

✘ 表示个人不再推荐

计算机网络

掌握计算机网络的基础是一名前端工程师的基本素养，建议先学习以下的知识：

1. ✔︎ Internet 如何工作
2. ✔︎ HTTP 协议
3. ✔︎ 浏览器工作机制
4. ✔︎ DNS 及其运行机制
5. ✔︎了解域名、网站托管

HTML

1. ✔︎ 学习 HTML 基础，标签、元素、表单验证等等
2. ✔︎ 语义化标签
3. ✔︎ 了解 Web 无障碍（Accessibility）
4. ✔︎ 学习 SEO 优化

CSS

1. ✔︎ 学习 CSS 基础
2. ✔︎ 制作布局：浮动、定位、显示、盒模型、网格布局、弹性布局
3. ✔︎ 响应式设计和媒体查询（@media）
4. ✔︎ 结合 HTML 制作一个简单的网页作为最佳实践

JavaScript

1. ✔︎ 学习语法和基本结构
2. ✔︎ 学习操作 DOM
3. ✔︎ 学习 Fetch API / Ajax（XHR）
4. ✔︎ ES6+ 和模块化 JavaScript
5. ✔︎ 了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念

版本控制

1. ✔︎ Git 的基本操作
2. ✔︎ 创建账号并且学习使用 GitHub
3. ✔︎ 创建账号并且学习使用 GitLab

Web 安全知识

1. ✔︎ HTTPS
2. ✔︎ 内容安全策略（CSP）
3. ✔︎ 跨域资源共享
4. ✔︎ OWASP 安全风险

---

上面的内容是前端最基础的部分，建议多花时间，掌握好每一个知识点。

从这开始，将进入前端工程化的部分，你可能会接触到很多种不同的框架，并学习使用多种的工具为自己的开发提效。

包管理工具

npm 和 yarn 都很好，选择一个学习即可，他们两是相似的

1. ✔︎ npm
2. ✔︎ yarn

CSS 构架

通过使用现代的 CSS 框架和 CSS-in-JS 的书写方式，不用再担心 CSS 的构架问题，但熟悉 BEM 规范是一个不错的选择。

1. ✔︎ BEM，一种书写规范
2. ✘ OOCSS
3. ✘ SMACSS

CSS 预处理器

以下三个可选择一个进行学习。

1. ✔︎ SCSS
2. ✔︎ PostCSS
3. ✔︎ Less

构建工具

1. 任务执行器

• ✔︎ npm scripts
• ✘ Gulp

2. 代码检查和格式化工具

• ✔︎ Prettier 代码格式化
• ✔︎ ESLint 代码检查
• ✘ StandardJS

3. 模块打包
4. ✔︎ Webpack
5. ✔︎ Rollup
6. ✔︎ Parcel

前端框架

前端框架推荐先学习 React，能理解函数式编程和组件化。Vue 的特点是上手快，中文文档齐全，可以选择性的学习。

1. ✔︎ React.js

• ✔︎Redux
• ✔︎ MobX

2. ✔︎ Vue.js

• VueX

3. ✔︎ Angular

• RxJS
• NgRx

现代 CSS

1. ✔︎ Styled Component
2. ✔︎ CSS Module
3. ✔︎ Styled JSX
4. ✔︎ Emotion
5. ✘ Radium
6. ✘ Glamorou

Web 组件

1. ✔︎ HTML 模版
2. ✔︎ 自定义元素
3. ✔︎ Shadow DOM

CSS 框架

CSS 框架有两种，一种是基于 JavaScript 框架开发的应用程序。推荐的框架有：

1. ✔︎ Reactstrap
2. ✔︎ Material UI
3. ✔︎ TailWind CSS
4. ✔︎ Chakra UI

另外一只是纯 CSS 框架，默认和不和 JavaScript 组件一起使用。

1. ✔︎ BootStrap
2. ✔︎ Materialize CSS
3. ✔︎ Bulma

测试

在这里你需要学习使用下面的框架进行单元、集成和功能测试。

1. ✔︎ Jest
2. ✔︎ react-testing-library
3. ✔︎ Cypress
4. ✔︎ Enzyme

类型检查器

1. ✔︎✔︎ TypeScript
2. ✘ Flow

---

上面是前端工程化的学习内容，接下来的内容涉及到性能、服务端渲染以及跨端，这一部分前端也叫被称作「大前端」。

PWA

1. ✔︎ 学习 PWA 中使用到的 Web API：

• Storage
• Web Sockets
• Service Workers
• 定位
• 通知
• 设备方向
• 支付、证书等等

2. ✔︎ 计算、测量以及提高性能：

• PRPL 模式
• RAIL 模式
• 性能指标
• 学习使用 LightHouse
• 学习使用 DevTools

服务端渲染

1. ✔︎ Next.js （React.js）
2. ✔︎ Nuxt.js （Vue.js）
3. ✔︎ Universal（Angular）

✔︎ GraphQL

1. ✔︎ Apollo
2. ✔︎ Relay Modern

✔︎ 静态网站生成

1. ✔︎ Next.js
2. ✔︎ GatsbyJS
3. ✔︎ Nuxt.js
4. ✔︎ Vuepress
5. ✔︎ JekyII
6. ✔︎ Hugo

✔︎ 移动端应用开发

1. ✔︎ ReactNative
2. ✔︎ Flutter

✔︎ 桌面应用开发

1. ✔︎ Electron
2. ✔︎ Carlo
3. ✔︎ Proton Native

✔︎ WebAssembly

总结完毕，不由得感叹前端生态真是丰富多彩，要学的东西很多，自己不懂的也很多，有些知识点也是浅尝辄止。虽然有这么多的方向，但还是需要找到一个点能够深挖。

如果你是前端的初学者，也不要被这些框架给吓到，学好基础然后加以实践更为重要。

上面推荐的 Roadmap GitHub 仓库里也有后端以及 DevOps 的学习路线，可以自行浏览，如果有时间我也会整理出一版文字版以供大家参阅。

Keep Learning，持续精进。

点赞加关注，永远不迷路