前端学习路线

学习路线 2年前 1 2.6K

虽然帅地的技术栈是后端开发，不过后端和前端显然是一对的，还是经常要和前端打交道，所以在之前也学习过不少前端的知识，下面总结的这套前端学习路线，是我参考了别人大量的学习经历 + 自己的思考 + 咨询前端大佬后提取出来的，可能不会像别人一样写一大堆，但你按照这个路线学习之后，应该也不算太差。

一、入门前端三剑客

前端和后端相比，需要学习的知识还是要少很多，如果你要入门后端，你可以要学习一大堆只是，但是你入门前端，只要把 HTML + CSS + JavaScript 这三门知识学习了，就基本差不多入门前端了，并且可以利用这三门知识，写出很多漂亮的交互页面，下面讲一讲这三门知识的学习。

1、HTML

html 学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在慕课网啥找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行.

看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下阮一峰写的这份 HTML 入门教程，可能可以让你理解的更加透彻：https://wangdoc.com/html/

大家切勿眼高手低，一定要跟着视频或者书籍上的案例打代码，写代码的编辑器，我推荐 VS-Code，反正选一款你喜欢的编辑器就行，现在这些编辑器都有很多插件，像 VS-Code 这些编辑器，用好一款就可以写各种语言的代码了。

2、CSS

没啥好说的，和 HTML 相辅相成，你在学习 HTML 的过程中，其实也一直都在接触 CSS，所以你学了 HTML 之后，感觉几个小时就可以学完 CSS 了，还是一样，推荐找个视频快速入门，不多说。

html 是一门标签语言，里面有各种各样的标签，很多初学者学了之后可能就把这些标签忘了，有人可能会问，老是忘了怎么办？

忘了就忘了，没事的，不需要强行记住这些标签，你需要的是：脑子里有个印象，当你这实现某个功能的时候，你知道 HTML 有某个标签可以实现这样的功能就可以了，然后翻开对应的教程，你能够根据教程使用这个标签即可。

用的次数多了，也就记住了，所以学完 HTML 和 CSS，一定要多多实践，随便打开一个网页，对着葫芦画瓢，自己写一个和它类似的就可以了。

3、JavaScript

比起 HTML 和 CSS，JavaScript 会难一些，不过如果你有其他编程语言基础，例如学过 C 语言，Python 或者 Java 啥的，那学期 JavaScript 也是分分钟的事。

前面的 HTML 和 CSS，我的推荐大家找个视频快速入门即可，但是对于 JavaScript，假如你时间不是很紧，那么我推荐你用书籍系统学一下，有些知识，趁着有时间，一定要系统学，这样可以打下很深的底子，如果你觉得难的话，也可以先用视频快速入门，之后再回过头来钻研书籍，系统过一遍，通过系统学习，你会明白很多原理，学到很多设计思想，我看过一本《JavaScript 高级程序设计》，感觉还好，就推荐这一本吧。

学了 JavaScript 之后，可以学一学 ES6，面试貌似也经常会问到，可以看一看阮一峰写的一份入门教程：https://wangdoc.com/es6/

三大件的面试也整理了：

CSS 基础面试题阅读指南（必看）

HTML 基础面试题阅读指南（必看）

JavaScript基础面试题阅读指南（必看）

二、框架

目前前端用的比较多的主要有 Vue 和 React ,在学习框架之前，一定要先用 HTML + CSS + JavaScript 这些做一些项目，因为这些框架的底层实现，其实就是 JavaScript 实现的，然而，居然还有人知道如何使用 Vue，但没学过 JavaScript，这显然不合适，只有你体验过 HTML + CSS + JavaScript ，你才能更好着明白 Vue 和 React 的好处。

不过对于初学者，可以先学习 Vue，Vue 可能更好入门一些，之前实习的时候，被迫学习了几天的 vue，我是在慕课网先快速入门看的，学起来不难，就是细节容易忘，入门课程直达： https://www.imooc.com/coursescore/980

不过你看了课程之后，你去做项目的话，其实还是会遇到好多问题的，特别是在网络请求那块，在解决问题的过程中，你就能更加理解一些原理了。

学到什么程度？

对于初学者，我的一半建议就是，跟着一份教程，过一遍，然后做对应的项目即可，之后遇到啥，就去搜索啥，不用纠结这个学到什么程度。

Vue 和 React 随便选一个重点学习即可，我推荐 vue，不过学了 Vue 之后，有时间的话，我建议可以了解下 React，快入通过视频了解，感觉几个小时或者一两天就够了。

另外，相关面试题帅地也有整理：Vue基础面试题阅读指南（必看）

三、数据结构

无论你是走什么岗位，数据结构都是必须学习的一门课程，从面试的角度来讲，面试基本比问，特别是校招；从个人的提升上来看，学好数据结构与算法，可以让你走的更远。

但是，数据结构与算法这玩意，可深可浅，不过我觉得至少得掌握如下基础知识：

1、时间复杂度、空间复杂度

2、链表、队列、栈

3、树：初级：二叉树，查找二叉树，进阶：AVL树，红黑树等，至少掌握初级吧。

4、图（图有好多种算法，深度/广度搜索，最短路径、最小生存树等），对于图，其实无论是面试还是工作，都挺少用到，学起来也有一定难度，假如你时间不多，我觉得可以先不学。

不过如果你是科班的，那么这些我觉得你大一第二学期把这些都学完是最好的了，没学完也问题不大，有些人可能是先教《离散数学》这本课，为数据结构与算法做铺垫。

书籍推荐：你学过 JavaScript，所以可以用 Javascript 来写这些数据结构，至于书籍，其实我也不知道推荐啥，网上根据目录找一本。

把基础数据结构学了之后，我觉得你要保持刷题，这个还是挺重要的，例如可以每天保持刷一两道，刚开始刷会挺吃力，但后面熟练了，就会快很多，不过很多人在吃力的那会，就放弃了，所以也就有了人与人之间的差距。

我觉得至少把《剑指 offer》刷完吧，刷完之后，可以去把 leetcode 中 top 100 的热门题做了就差不多了，前端对算法的考察，相对没有后端严格。

另外，如果时间不多的，那就把《剑指offer》刷个一两遍就行了，只有剑指offer 的刷题攻略，我也写过：剑指offer刷题攻略

四、计算机网络

无论是前端开发还是后端开发，说到底都是数据通过网络在多台主机之间的交互，而且对于前端，计算机网络的知识，用的可能比后端还多，特别是 HTTP 这块，所以呢，计算机网络必须好好学，而且还得重点学。

入门我推荐《图解 HTTP》，不过看完这本我觉得还不够，可以看《计算机网络：自顶向下》这本书，多看两遍，以后面试就可以和面试杆上了。

一边看一边犯困怎么办？

我的建议是，硬着头皮死磕一边，因为根据读者的反馈，确实有挺多人跟我说这玩意看着好困，不过我当时学习的时候，看着好带劲，就是了解了很多原因，很爽，然而事实是，有些人，看着却是一种煎熬，，，，学计算机网络，就一条主线：理解一台计算机是如何找到另外一台计算机，并且把数据交付给他的，或者你可以看我这篇科普文章：一文读懂一台计算机是如何把数据发送给另一台计算机的

也写了一个极简教程：计算机网络入门简介

下面说一下需要重点掌握的内容吧：

物理层、链路层：

MTU，MAC地址，以太网协议。
广播与 ARP 协议

网络层

ip 地址分类
IP 地址与 MAC 地址区别
子网划分，子网掩码
ICMP 协议及其应用
路由寻址
局域网，广域网区别

传输层（主要就是 TCP）

TCP首部报文格式（SYN、ACK、FIN、RST必须知道）
TCP滑动窗口原理，TCP 超时重传时间选择
TCP 拥塞控制，TCP 流量控制
TCP 三次握手与四次挥手以及状态码的变化
TCP连接释放中TIME_WAIT状态的作用
TCP 粘包，心跳包
UDP 如何实现可靠传输
UDP 与 TCP 的区别
UDP 以及 TCP 的应用场景

应用层

DNS 原理以及应用
HTTP 报文格式，HTTP1.0、HTTP1.1、HTTP2.0 之间的区别
HTTP 请求方法的区别：GET、HEAD、POST、PUT、DELETE
HTTP 状态码
HTTP 与 HTTPS 的区别
数字证书，对称加密与非对称加密
cookie与session区别
输入一个URL到显示页面的流程（越详细越好，搞明白这个，网络这块就差不多了）

学完之后可以刷一刷对应的面试题，可以在帅地的网站看：计算机网络面试真题

五、浏览器工作原理

学前端，基本天天和浏览器打交道，因为网页上的各种界面，都是由浏览器来渲染的，所以还是非常有必要学习一下浏览器相关的知识。

如果你在浏览器按 F12，会出现一个「调试」的界面

里面有很多东西，例如各种网络请求数据，各种脚本数据，感兴趣的话，可以去研究研究。

那么具体要学习哪些呢？

我觉得至少得了解一下本地 cookie ，localStorage，SessionStorage 存储吧，还有就是，如何查看一个 http 的请求状态，浏览器关闭后会做哪些处理之类的。

总的来说，就是，从我们发起一个 http 请求，到页面展示如初，浏览器都经历了哪些逻辑处理？

六、进阶

学完了上面这些，可以学一些帮助我们更好着构建一个前端项目的工具，比较常见的有如下几种：

Node.js：这个必须学，主要就是可以帮助我们很快着构建出一个 web 项目，一条命令就搞定了，入门可以在慕课网看视频，我之前看过一个，顺便推荐一下：

进阶或者更甚层次了解，一般都得看书，自己网上搜一本吧。

Webpack：不同浏览器对 JavaScript 的特性支持的不一致，可以通过构建工具把 JavaScript 代码转换成浏览器能支持的。使用构建工具也能够做到性能优化，比如压缩代码，这个 webpack 可以了解一下，在以后做项目的过程中，还是经常用到 node.js 和 webpack 的，我觉得刚开始会使用就好，后面遇到问题了，在通过问题驱动的方式去深入了家。

七、项目

学了 HTML + CSS + JavaScript 的时候，可以做一些小小的项目，这里我这边暂时没有对应的项目，我后面补充。

建议项目的话，可以做一做 vue 相关的项目。

八、学习顺序问题

这里讲一下学习顺序的问题，就是说学习了 html + css + javascript 之后，我是先学习前端的一些框架好啊，还是学习数据结构与算法好啊，还是学习计算机网络，浏览器工作原理好呢？

我觉得这个和你时间有关，假如你还是大一大二的话，学校会有数据结构，计算机网络的课程，我觉得跟着学校的顺序学就行，然后的话，像刷题，我觉得有些东西同时做并不会存在矛盾，例如我就建议刷题这个时期，长期保持，然后一边做其他的。

总的来说，我觉得也可以按照我说的这个学习顺序来学，然后算法那一块，当你学习了 Javascript 之后，就可以穿拆整个过程了。