前端学习从入门到超神彻底指南

当小白学前端的时候到底学什么？要按照什么顺序学？怎么学？

首先说一说考虑这个问题的起源是两个月前我无心间在V站上发了一个帖子：前端开发老司机拟收一个徒弟~ - V2EX，而后就有不少人灌水，也有不少人诚心想要入坑前端。借此机会我从新梳理了一下个人前端技术栈，也准备贡献一些系列化的教程帮助新人入坑~

而后我写了5篇博文，后来发现入门的知识更适合用视频的方式来说解，因而去B站作了一名UP主~到如今也录了4个视频。

本文梳理了前端学习的知识点，还有建议的学习路线，用于统一回答初学者的问题，若是有什么遗漏的或者不对的，欢迎补充和帮我改进。我把前端知识图谱整理成了一个脑图：

首先咱们看看前端的端

• Web（H5）
• 小程序（快应用，各类平台的小程序）
• 微信公众号
• 跨端移动端（RN、Cordova、Flutter）
• 跨端桌面端（Electron）

Web（H5）开发属于咱们传统意义上的前端，本文中整理的知识所有适用于Web（H5）端，也许会适用其它的端。有了Web（H5）端的基础，能够很快上手其它的端。

前端基础

• HTML&CSS
  • 标签语义化
  • 选择器
  • 盒模型
  • 布局
  • 动画&过渡效果
• JavaScript
  • ES6
  • 数据类型
  • 函数防抖&节流
  • Promise、async/await
  • 事件管理（发布&订阅）
• 浏览器API
  • BOM
  • DOM
  • 页面渲染和绘制原理

子项列表是我单独提出来用于强调的关键内容（一般须要总结梳理的知识点，常常出如今面试题里）。理解好了这些关键内容点才算过了基础这一关。

前端调试

• 使用Chrome调试Web应用

单独把这个提出一栏，由于在学习基础的时候就须要掌握这一项！

通用基础知识

• 网络协议（HTTP）
• 数据结构与算法
• CDN
• 安全相关

通用基础知识对于初学者而言，只要求初步了解便可。学习这部份内容能够当作专题针对性的去学习。

前端工程化

• 项目架构/框架选择
• 工程化工具（打包、发布、持续集成）
  • Webpack
  • Git
  • Gulp
  • Rollup
• 性能
  • 体系化的性能优化
  • 性能监控
• 系统建设
  • 组件复用（ant-design-pro、飞冰）
  • 跨平台（RN、Cordova）
  • 独成一派的Flutter
  • 小程序跨平台（Taro、Mpvue）
• 监控系统
  • 质量保证
  • 数据监控
  • 安全监控
• 包管理
  • npm
  • yarn

前端工程化一般是中高级开发或者架构师该作的事，可是每个初学者从开发第一个正式的项目开始就要接触到工程化。包括学习React这样的框架，第一步也是须要搭建一个开发环境。

工程化属于一个进阶的学习内容，我也把工程化的学习分红了三个步骤：

1. 了解什么是前端工程化，在大佬们搭建好的工程里协同工做
2. 理解和使用各类工具来搭建和配置项目工程
3. 融汇贯通，用工程化的思想来解决问题

前端框架

• React

  • 基本使用

  • 生态

    • 脚手架（create-react-app）：用于快速搭建项目环境
    • 路由（react-router）
    • 状态管理（Redux：Redux-saga）
    • UI库（ant-design）

  • 实现原理

    • JSX
    • VirtualDOM
• Vue

框架学习的大头部分应该在于它的生态部分，搭配了生态，React才能被称之为一个框架。对框架的学习能够分红两个步骤：

1. 框架及全家桶的基本使用。React和Vue都有友好到过度的中文文档，必定要看官方文档！看文档照着指引就能上手了。上面我整理出的生态就是一套React全家桶。直接看官方文档便可。（若是想要比官方文档还要快一点，能够看我录的视频）
2. 理解框架各个概念及实现原理

说明：框架就是用来解决问题的，会用了就能够了~不过理解了原理才能用的更好，中高级开发是要求理解原理的。会用了以后再使用（靠谱的）搜索引擎对关键知识点逐个击破。

前端库

• jQuery（操做DOM、事件绑定、其它方法）
• Loadash（JS功能函数）
• 各类UI库（element、ant-design）
• Axios （http）

前端生态是很完善的，开源社区无所不能。这几个是我列举的经常使用的开源库。学会了使用它们会让咱们的开发工做事半功倍。

语言扩展

• Typescript
• SASS&LESS

语言扩展的做用是为了弥补语言的缺陷，提升开发效率或者维护效率的。语言扩展不属于基础范畴，能够排在进阶里学习。

其它

• 代码检查ESLint、CSSLint
• 编译器Babel
• 万能的NodeJS
  • 脚本工具开发（Webpack、Babel）
  • 服务端开发（Express、Koa）
  • 全栈
• Mock数据接口 这一部分的内容也属于前端进阶篇。

学习前端基础建议分红两个步骤：

1. 学习前端基础。w3school这个网站：www.w3school.com.cn。不须要花里胡哨，在这个网站里学习HTML、CSS、JavaScript这三个栏目足够了，目录便是概览，并且里面还有例子记得点试一试
2. 学习前端进阶知识点。把我上面整理出来的关键内容一个一个粘贴到（靠谱的）搜索引擎里搜索，在前两页里筛选几篇靠谱的博文来学习。列举几个我常常学习的靠谱的来源。

• 来自淘宝FED、腾讯ISUX、凹凸实验室、百度EUX等知名团队的技术博客
• 阮一峰、张鑫旭的博客，易于理解。
• 来自掘金的博文，有不少靠谱的总结和整理

说明：对于一些从iOS、Android或者后端开发转过来的，对于文档一看就懂的，第一步里的网站也能够当作文档网站来用，直接从下面的2开始。Web开发文档网站还推荐这个 https://developer.mozilla.org/zh-CN/

整个学习曲线能够是这样的：

1. 前端基础的学习（HTML、CSS、JavaScript、前端调试）
2. 前端基础学习到50%左右（能够把w3school或者MDN这样的网站当作文档来查阅的时候），能够开始框架的学习（React）
3. 框架的学习到可使用框架的全家桶来开发完整项目。至此一名入门级的前端开发就诞生了。
4. 在开发项目的时候会遇到各类问题，会考虑到用我在前端基础里提到的一些知识点来解决：好比说Promise来解决多层回调嵌套的问题，函数节流/防抖来解决鼠标滑动事件连续触发的问题。就能够开始学习进阶的一些知识点了。
5. 进阶的知识点有不少，一方面是遇到什么问题学什么，另外一方面是主动去了解一个问题的最优解决方案。这里面还包括通用基础知识的扩充、语言扩展、各类前端库的使用。这是一个最漫长的过程，能够一边项目实践一边学习。在这个过程里若是感受本身已经掌握了60%了，并且遇到了问题会经过搜索引擎和查文档来解决，那就说明你已是一个合格的初级开发了。
6. 进阶的知识点是一个持续学习的过程。至此你可能会主动的去学习前端工程化的知识，了解所用框架的实现原理，去考虑性能优化，去尝试其它这一栏目里的知识点，那么恭喜你已经成功上路了。
7. 当你对上面的知识已经融汇贯通，而且开始考虑用系统化的思想（开发一个新的系统、框架、平台？）来解决问题，那么你已是一个中高级的前端开发了，这个时候你已经慢慢脱离了最开始学习的“前端”，跑路成功了。

等初学者学到了第二步，欢迎去B站上关注我：李白的粉儿。

跟我一块儿学前端，比看文档更快一点儿~。