2020 前端学习路线总结，哎呦，不错哦！

2020 前端学习路线总结

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

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】每天更新最新技术文章干货。

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

✔︎ 表示个人推荐学习

✔︎ 表示可选择学习

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

✘ 表示个人不再推荐

计算机网络

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

✔︎ 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

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

✔︎ Prettier 代码格式化

✔︎ ESLint 代码检查

✘ StandardJS

3.模块打包

✔︎ Webpack

✔︎ Rollup

✔︎ Parcel

前端框架

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

✔︎ React.js

✔︎Redux

✔︎ MobX

2.✔︎ Vue.js

VueX

3.✔︎ 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

定位

通知

设备方向

支付、证书等等

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

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

2020 前端学习路线总结，哎呦，不错哦！相关推荐

2020前端学习路线收集整理
本人18年毕业,刚毕业自学Java,第一份工作因部门解散,时效半年,其实那时我一直在想往前端发展,恰巧拿到下家offer,第二份工作确实是前端,不过是客户是银行,样式全部统一,与我想象的色彩缤纷的前端 ...
前端共享桌面_2020 前端学习路线总结，哎呦，不错哦！
2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读. 图下面是我翻译的一个文字版,可以先看 ...
2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
web前端开发需要学什么（包含前端学习路线）
前端开发,做到后面,是可以走很多方向的: 但是要保证后期的平滑过度,前期还是要把一些必须的知识搞扎实的: web前端开发需要学什么环境搭建前端环境很好搭建,编辑器+浏览器即可. 浏览器推荐使用 C ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
如何高效率学Web前端怎么规划前端学习路线
如何高效率学Web前端?怎么规划前端学习路线?Web前端是随着移动互联网的高速发展而兴起的行业,入行门槛低.薪资待遇好.很多零基础的人想要学前端,但却不知道要学什么?如何高效率学习,接下来就给大家介绍 ...
关于前端学习路线的一些建议（值得零基础拥有）
前言对于刚开始学习前端的伙伴俩说,问得最多的问题就是 --前端技术现在如此繁杂,我到底应该如何学习.这个话题太大了,几句话回答不好:也由于这个问题确实困扰了很多前端开发人员,所以我也就着手系统的输出 ...
2020web前端学习路线
2020年最新web前端学习路线!接下来,教大家如何从零基础小白学习web前端,没有基础的伙伴也不要着急,有给大家整理视频教程,文末,大家按需学习就好! 一.入门web前端开发在介绍阶段,您必须首先 ...
2020web前端学习路线（附全套前端视频教程+教学大纲
2020年最新web前端学习路线!接下来,教大家如何从零基础小白学习web前端,没有基础的伙伴也不要着急,有给大家整理视频教程, 需要更多教程,微信扫码即可

2020 前端学习路线总结，哎呦，不错哦！

2020 前端学习路线总结，哎呦，不错哦！相关推荐

最新文章

热门文章