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，持续精进。