「星辰大海」Chocolate 同学前端学习路线总结【建议收藏】

自我介绍

哈喽，小伙伴，很高兴你能阅读我的这篇文章，能点进来也是一份缘分，在这篇文章你将收获许多干货。

简短介绍：【CSDN】【掘金】【B站】【知乎】【Github】【https://yangchaoyi.vip】【公众号：小狮子前端】重度使用者。
JS，TS，LeetCode，Vue，React，算法爱好者。
座右铭：学如逆水行舟，不进则退！

前言

最近很多小伙伴们以及学弟学妹们都来私信我，询问我前端是怎么学习的，想了又想，还是打算写一份自己的前端学习路线，至于为什么要写这一份前端学习路线呢？我觉得有如下几点：

春招以及秋招过程受很多大佬的教导，最终的offer离不开他们的支持，我想着自己受到过许多人的帮助，而自己写一份学习路线，也是一份回馈。
很早就想写一份学习路线图，但整个秋招下来又让我停止了脚步，我觉得还是要继续扎实基础，但现在，我有了时间来输出一些文章，因此，这篇文章它来了！
临近毕业，有许多不舍，我也想留下一些有价值的东西，那就是将自己学习过程中的坑埋住，少走我的坑，让学弟学妹们看到后能有一份指导路线。
一份挑战，我也在带人学习，她会参加2021年春招，这份学习路线基本上就是我教导的学习路线，因此即是一份学习路线，也是一份挑战，并且这份路线是会持续更新到2021年春招结束。
座右铭：学如逆水行舟，不进则退！ 我也在征途中重温基础知识，为后续工作做准备。

简简单单，主要就是如上五点了，一些关键理由已经加粗标记啦~

小狮子前端技术交流

友情提醒：博主建了一个【小狮子前端】技术交流群：666151691 欢迎大家加入，在此我会分享前端体系的知识，为你的春秋招保驾护航。群主：Chocolate 同学，同时 小周同学 也会分享优质文章。

微信公众号同名【小狮子前端】资源、书籍、思维导图会放在这里面，需要的小伙伴自取即可~

前端博客友链：

超逸の博客： https://yangchaoyi.vip/

HearLingの博客: https://hearling.github.io/

我们的征途是星辰大海，祝愿我们都能见证努力之后的成功！

阅读须知

这一模块一定要阅读！一定要阅读！一定要阅读！

本篇文章是会不断更新的，首发在 yangchaoyi.vip 超逸の博客上。建议收藏在书签栏，或者记住我的域名 yangchaoyi.vip。

上文已经介绍，这篇博客将会持续更新到 2021年春招结束，我想到那时候应该是一份比较详细完备的前端学习路线了，在此，也承诺（promise）本篇文章绝对不鸽，同时，你也可以评论区来催更我（尽管不一定有效，但评论留个言踩个脚印又不是不可以是吧？）

其次，本文会推荐一些我在学习过程中用到的一些小工具，一些优质文章，还有一些课程，当然，我觉得 为知识而付费 是有必要的，但是我会尽可能减少你的学习花费，一些相关资源我会在文章中提供给你。

那么，关于 Chocolate 同学前端学习路线文章正式出炉 ✿✿ヽ(°▽°)ノ✿

开篇：学好计算机网络，很重要

前言

可能你会疑问，啊这，前端不就是 html,css,js这些吗？（前端小白的疑问）如果你有这个疑问，你能阅读到这篇文章简直是起飞，这将颠覆你对前端的认知。

我觉得不管是前端还是后端，甚至只要是技术岗位，计算机网络这一门学科都是重中之重，因此在开篇，我们就来系统学习计算机网络原理知识。

尽管我们在学校一般都会开设计算机网络原理的课程，但大学课程很少能让我们掌握的很扎实，基本上学完大部分知识就还给老师了，离谱的可能当天学当天就忘了。

Chocolate 同学的提问

希望你能带着这几个问题学习，同时你在复盘时也可以根据如下问题进行检验。

说说 HTTP 特点
有了解过 HTTP 队头阻塞吗？如何解决？
HTTP 中常见请求方法
例举一些常见 HTTP 状态码
get 和 post 有什么区别，说一说
HTTP 报文组成
例举 HTTP 比较常见的一些首部字段
说一说 HTTP 中的内容编码与压缩
Transfer-Encoding 有了解过么
说一说多部分对象集合(Multipart)
如何获取部分内容的范围请求？
HTTP/2 有哪些改进？
说说你对 Cookie 的理解以及在安全性上面的问题
为什么需要 HTTPS ，它解决了哪些问题
说说 HTTP 与 HTTPS 的区别
对称加密与非对称加密的区别
怎样验证数签名？
请你细说一下 HTTPS 加密通信方法具体过程
SSL/TLS 有了解过么，说一说
为何不是所有网站都用HTTPS？
说一说 TCP 和 UDP 的区别？
TCP 三次握手的过程
为什么 TCP 需要三次握手，而不是两次，又或者四次以及更多？
说说 TCP 四次挥手的过程
为什么需要四次挥手，三次可以吗？
四次挥手中等待 2MSL 有什么意义？
说说半连接队列和 SYN Flood 攻击
TCP 快速打开的原理(TFO) 有了解过么？
说一说 TCP 的流量控制以及滑动窗口的理解？
说说 TCP 的拥塞控制？（慢启动、拥塞避免、快速重传和快速恢复）
什么是跨域？浏览器如何拦截响应？如何解决？

优质文章推荐

下面是我在学习 HTTP 经常会看的文章，因此，也建议你 细读，精读，多读，整理一份自己的博客，最好也配上思维导图。

当你学完上面四篇文章后，可以继续挑战下面两篇文章，灵魂之问，巩固知识~

小狮子有话说

最近有粉丝私信看了我对于网络方面的认识，也提出了不仅仅是这些，还有其它部分，例如计算字节存储分辨率大小，对网络带宽影响情况这一系列问题等等，但是我觉得学习应该是持续、坚持的过程，本章节网络方面能够涉及的知识何止这些，简直太多太多，我们能做的是先把基础打牢，这样我们学习其它方面知识也会融会贯通。在没有实际项目经验之前，掌握基础知识，在遇到实际项目时，通过项目让自己成长~

每一发奋努力的背后，必有加倍的赏赐。

互联网的“咽喉”：浏览器工作原理

前言

浏览器工作原理这一块能扯到很多很多的知识，为此我还做了思维导图，一图胜千言。

或许你会好奇这份思维导图怎么出来的，当然是学的呀（滑稽）

进入正题，在此比较推荐极客时间李兵老师讲授的课程 ↓ ，前文也说了减少大家学习的成本与费用，这个课程在极客时间新人价只要1元，我觉得是挺好的，强烈建议大家去阅读。

浏览器工作原理与实践—透过浏览器看懂前端本质

这门课程我是已经获得到了课程证书了，并且最后的知识测评也拿到了100分，有一次在公众号【小狮子前端】推送过文章，文末就有相关图片，感兴趣的小狮子们可以溜达溜达~

那么，不是新人用户怎么办，不用担心，我又在 github上找到了相关笔记，极客浏览器工作原理与实践传送门

不过对比来的话没有进行更新了，如果你是极客时间新人用户的话，还是建议通过 1 元购买一份课程，毕竟还是要支持原创！

Chocolate 同学的提问

希望你能带着这几个问题学习，同时你在复盘时也可以根据如下问题进行检验。

浏览器中的页面

浏览器工作原理思维导图

（手机端可能看不清）获取高清PDF，请在微信公众号【小狮子前端】回复【浏览器工作原理】

导航渲染流程思维导图

（手机端可能看不清）获取高清PDF，请在微信公众号【小狮子前端】回复【导航渲染流程】

进程和线程之间的区别
为什么很多站点第二次打开速度会很快？
登录状态是如何保持的？
HTTP 请求流程（8点）
导航流程：从输入URL到页面展示，这中间发生了什么？
渲染流程的具体过程
重排、重绘与合成它们之间有何区别？

浏览器安全

浏览器安全思维导图

（手机端可能看不清）获取高清PDF，请在微信公众号【小狮子前端】回复【浏览器安全】

说说你对同源策略的理解
同源策略、CSP、CROS之间的关系？
为什么XMLHttpRequest不能跨域请求资源？
跨站脚本攻击（XSS）有了解过么？如何预防？
CSRF攻击的理解，如何防范？
有了解过安全沙箱吗？说一说

浏览器中的页面循环系统

事件循环系统思维导图

（手机端可能看不清）获取高清PDF，请在微信公众号【小狮子前端】回复【事件循环】

说说你对宏任务、微任务以及消息队列的理解
各种输出题（见推荐博文↓）

promise 知识

promise 知识思维导图

（手机端可能看不清）获取高清PDF，请在微信公众号【小狮子前端】回复【promise知识】

谈谈你对 promise 的理解，解决了哪些问题
async / await 怎么捕获错误
Promise.all | Promise.race 区别
如何理解 promise 的固化 | 多层嵌套
各种输出题（见推荐博文↓）

优质文章推荐

小狮子有话说

关于浏览器这一块，真算是 互联网的“咽喉”，在前端领域浏览器这块知识非常重要，还是非常建议大家看一看李兵老师的文章，这对于你理解浏览器渲染机制以及思维方面很有帮助。

自己选的路，跪着也要走完。

前端工程师能力体现：JavaScript

前言

对于JS来说，我觉得是整个前端工程师能力的体现，JS基本功扎实，不仅对于面试很有帮助，还对于源码理解，框架使用方面都大有用处。比如大家都觉得 React很难，然后都去学习 Vue，那么如果一个岗位就是只招 React，那么如果你会的话，岂不是一下少了很多竞争对手，并且在我看来，Vue 和 React 只是方便我们开发的一个工具，只要 JS 能力足够强，学起来也不是很难的。

那么，我们现在来整理一下如何学习JS（持续更新）

首先，我觉得看书是很有必要的，我想前端小伙伴应该都知道一本大家都很推崇的书：红宝书，今年已经出了第四版了，作为前端爱好者，必须购买一本啦。此时，就有小伙伴问了，我不太爱看纸质版的，爱看电子版的，并且我又想白嫖。

我就知道会有一部分白嫖党这样想，小狮子已经为你们准备好了，在【小狮子前端】回复【红宝书】即可领取第四版红宝书电子版书籍，如有失效请及时联系~

其次，观看学习视频也是很有必要的，对于小白直接上手红宝书可能还有一些困难，并且现在第四版红宝书整体都是用 ES6 来写了，这又给这本书阅读提升了门槛，但是我觉得第一遍读没必要一个字一个字完全弄明白，看个大概就好了，至于怎么去看红宝书，下面给了一份思维导图（转自 蜗牛老湿_大圣：【前端红宝书】精读训练营开始拉！一起来学习吧）。

然后我们就去看一些 js 教程视频，这里比较推荐的是后盾人教程视频，在里面有比较完整 js 学习课程，将许多问题分成了一小节，这样你空闲的时候没事刷上一两集，日复一日，你就能学完整套课程了~