自我介绍

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

简短介绍：【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 学习课程，将许多问题分成了一小节，这样你空闲的时候没事刷上一两集，日复一日，你就能学完整套课程了~

有了上文铺垫之后，你的 js 基础知识应该足够了，但是此时可能没有形成思维体系，并且实践方面也会比较少，可能记着记着忘记很多了，那么就需要进行手写实践了，也就是下文我给你提出的问题。

Chocolate 同学的提问

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

  • 说说你所知道的数组的一系列方法
  • 数组方法中改变原数组的方法你知道的有哪些，说说？
  • 数组扁平化你怎么做？有几种方式？
  • 数组去重你怎么做？有几种方式？
  • 说说你对 reduce 的理解

待更新…

JS 数组操作

JS 数组操作思维导图

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

优质文章推荐

神三元的 JS 灵魂之问系列，个人觉得有必要读一读~

TianTianUp 博主的文章，也值得大家去阅读~

LinDaiDai_霖呆呆 博主的文章推荐：

待更新…

小狮子有话说

关于 JS 这一块是整个前端的核心，那么要整理这一模块知识是需要花大量时间，因此我会持续更新这个模块知识体系。

非常建议大家能来交流群一起交流JS，大家一起学会更有动力，【小狮子前端】技术交流群：666151691 欢迎大家加入。