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
-
-
模块打包
-
✔︎ Webpack
-
✔︎ Rollup
-
✔︎ 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
-
服务端渲染
-
✔︎ Next.js （React.js）
-
✔︎ Nuxt.js （Vue.js）
-
✔︎ Universal（Angular）
✔︎ GraphQL
-
✔︎ Apollo
-
✔︎ Relay Modern
✔︎ 静态网站生成
-
✔︎ Next.js
-
✔︎ GatsbyJS
-
✔︎ Nuxt.js
-
✔︎ Vuepress
-
✔︎ JekyII
-
✔︎ Hugo
✔︎ 移动端应用开发
-
✔︎ ReactNative
-
✔︎ Flutter
✔︎ 桌面应用开发
-
✔︎ Electron
-
✔︎ Carlo
-
✔︎ Proton Native
✔︎ WebAssembly
总结完毕，不由得感叹前端生态真是丰富多彩，要学的东西很多，自己不懂的也很多，有些知识点也是浅尝辄止。虽然有这么多的方向，但还是需要找到一个点能够深挖。
如果你是前端的初学者，也不要被这些框架给吓到，学好基础然后加以实践更为重要。
上面推荐的 Roadmap GitHub 仓库里也有后端以及 DevOps 的学习路线，可以自行浏览，如果有时间我也会整理出一版文字版以供大家参阅。
Keep Learning，持续精进。
全部评论
(5) 回帖