2021 前端学习路线总结

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

图下面是我翻译的一个文字版，可以先看图再看文字。

✔︎ 表示个人推荐学习

✔︎ 表示可选择学习

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

✘ 表示个人不再推荐

计算机网络

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

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

HTML

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

CSS

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

JavaScript

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

版本控制

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

Web 安全知识

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

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

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

包管理工具

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

✔︎ npm
✔︎ yarn

CSS 构架

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

✔︎ BEM，一种书写规范
✘ OOCSS
✘ SMACSS

CSS 预处理器

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

✔︎ SCSS
✔︎ PostCSS
✔︎ Less

构建工具

任务执行器
- ✔︎ npm scripts
- ✘ Gulp
代码检查和格式化工具
- ✔︎ Prettier 代码格式化
- ✔︎ ESLint 代码检查
- ✘ StandardJS
模块打包
1. ✔︎ Webpack
2. ✔︎ Rollup
3. ✔︎ Parcel

前端框架

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

✔︎ React.js
- ✔︎Redux
- ✔︎ MobX
✔︎ Vue.js
- VueX
✔︎ Angular
- RxJS
- NgRx

现代 CSS

✔︎ Styled Component
✔︎ CSS Module
✔︎ Styled JSX
✔︎ Emotion
✘ Radium
✘ Glamorou

Web 组件

✔︎ HTML 模版
✔︎ 自定义元素
✔︎ Shadow DOM

CSS 框架

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

✔︎ Reactstrap
✔︎ Material UI
✔︎ TailWind CSS
✔︎ Chakra UI

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

✔︎ BootStrap
✔︎ Materialize CSS
✔︎ Bulma

测试

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

✔︎ Jest
✔︎ react-testing-library
✔︎ Cypress
✔︎ Enzyme

类型检查器

✔︎✔︎ TypeScript
✘ Flow

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

PWA

✔︎ 学习 PWA 中使用到的 Web API：
- Storage
- Web Sockets
- Service Workers
- 定位
- 通知
- 设备方向
- 支付、证书等等
✔︎ 计算、测量以及提高性能：
- PRPL 模式
- RAIL 模式
- 性能指标
- 学习使用 LightHouse
- 学习使用 DevTools