自我介绍

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

简短介绍:【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,那么如果你会的话,岂不是一下少了很多竞争对手,并且在我看来,VueReact 只是方便我们开发的一个工具,只要 JS 能力足够强,学起来也不是很难的。

那么,我们现在来整理一下如何学习JS(持续更新)

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

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

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


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

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

Chocolate 同学的提问

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

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

待更新…

JS 数组操作

JS 数组操作思维导图

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

优质文章推荐


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


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

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

待更新…

小狮子有话说

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

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