「星辰大海」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】ShutdownHTTP系列-基础篇
- 🐲【2】ShutdownHTTP系列-HTTP报文篇
- 🐲【3】Shutdown HTTP系列-Cookie篇
- 🐲【4】Shutdown HTTP系列-HTTPS篇
当你学完上面四篇文章后,可以继续挑战下面两篇文章,灵魂之问,巩固知识~
小狮子有话说
最近有粉丝私信看了我对于网络方面的认识,也提出了不仅仅是这些,还有其它部分,例如计算字节存储分辨率大小,对网络带宽影响情况这一系列问题等等,但是我觉得学习应该是持续、坚持的过程,本章节网络方面能够涉及的知识何止这些,简直太多太多,我们能做的是先把基础打牢,这样我们学习其它方面知识也会融会贯通。在没有实际项目经验之前,掌握基础知识,在遇到实际项目时,通过项目让自己成长~
每一发奋努力的背后,必有加倍的赏赐。
互联网的“咽喉”:浏览器工作原理
前言
浏览器工作原理这一块能扯到很多很多的知识,为此我还做了思维导图,一图胜千言。
或许你会好奇这份思维导图怎么出来的,当然是学的呀(滑稽)
进入正题,在此比较推荐极客时间李兵老师讲授的课程 ↓ ,前文也说了减少大家学习的成本与费用,这个课程在极客时间新人价只要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 的固化 | 多层嵌套
- 各种输出题(见推荐博文↓)
优质文章推荐
- 「导航渲染流程」你真的知道从输入URL到页面展示发生了什么吗?(内附思维导图)
- 「浏览器安全」你可能需要的一份浏览器安全的总结(内附思维导图)
- 「浏览器工作原理」写给女友的秘籍-浏览器组成&网络请求篇(1.2W字)
- 「浏览器工作原理」写给女友的秘籍-渲染流程篇(1.1W字)
- 「高频面试题」女友:消息队列 和 事件循环系统终于弄明白了!(内附思维导图)
- 「星辰大海」你可能需要知道的 promise 知识的总结(内附思维导图)
- 「查缺补漏」送你18道浏览器面试题
- 「浏览器工作原理」写给女友的秘籍-渲染流程篇(1.1W字)
小狮子有话说
关于浏览器这一块,真算是 互联网的“咽喉”
,在前端领域浏览器这块知识非常重要,还是非常建议大家看一看李兵老师的文章,这对于你理解浏览器渲染机制以及思维方面很有帮助。
自己选的路,跪着也要走完。
前端工程师能力体现:JavaScript
前言
对于JS来说,我觉得是整个前端工程师能力的体现,JS基本功扎实,不仅对于面试很有帮助,还对于源码理解,框架使用方面都大有用处。比如大家都觉得 React
很难,然后都去学习 Vue
,那么如果一个岗位就是只招 React
,那么如果你会的话,岂不是一下少了很多竞争对手,并且在我看来,Vue
和 React
只是方便我们开发的一个工具,只要 JS
能力足够强,学起来也不是很难的。
那么,我们现在来整理一下如何学习JS(持续更新)
首先,我觉得看书是很有必要的,我想前端小伙伴应该都知道一本大家都很推崇的书:红宝书
,今年已经出了第四版了,作为前端爱好者,必须购买一本啦。此时,就有小伙伴问了,我不太爱看纸质版的,爱看电子版的,并且我又想 白嫖 。
我就知道会有一部分白嫖党这样想,小狮子已经为你们准备好了,在【小狮子前端】回复【红宝书】即可领取第四版红宝书电子版书籍,如有失效请及时联系~
其次,观看学习视频也是很有必要的,对于小白直接上手红宝书可能还有一些困难,并且现在第四版红宝书整体都是用 ES6
来写了,这又给这本书阅读提升了门槛,但是我觉得第一遍读没必要一个字一个字完全弄明白,看个大概就好了,至于怎么去看红宝书,下面给了一份思维导图(转自 蜗牛老湿_大圣
:【前端红宝书】精读训练营开始拉!一起来学习吧)。
然后我们就去看一些 js
教程视频,这里比较推荐的是 后盾人教程视频,在里面有比较完整 js
学习课程,将许多问题分成了一小节,这样你空闲的时候没事刷上一两集,日复一日,你就能学完整套课程了~
有了上文铺垫之后,你的 js
基础知识应该足够了,但是此时可能没有形成思维体系,并且实践方面也会比较少,可能记着记着忘记很多了,那么就需要进行手写实践了,也就是下文我给你提出的问题。
Chocolate 同学的提问
希望你能带着这几个问题学习,同时你在复盘时也可以根据如下问题进行检验。
- 说说你所知道的数组的一系列方法
- 数组方法中改变原数组的方法你知道的有哪些,说说?
- 数组扁平化你怎么做?有几种方式?
- 数组去重你怎么做?有几种方式?
- 说说你对 reduce 的理解
待更新…
JS 数组操作
JS 数组操作思维导图
(手机端可能看不清)获取高清PDF,请在微信公众号【小狮子前端】回复【数组方法】
优质文章推荐
- 「数组方法」写给女友的一系列 JS 数组操作(建议收藏 | 内附思维导图)
- 星辰大海」JS自测清单(一)
- 星辰大海」JS自测清单(二)
- 星辰大海」JS自测清单(三)
- 「JavaScript灵魂之问」前端知识梳理之 JS 篇(上篇)
- 「JavaScript灵魂之问」前端知识梳理之 JS 篇(中篇)
- 「JavaScript灵魂之问」前端知识梳理之 JS 篇(下篇)
- 「JavaScript灵魂之问」前端知识梳理之 JS 篇(中秋特别篇)
神三元的 JS
灵魂之问系列,个人觉得有必要读一读~
- (建议收藏)原生JS灵魂之问, 请问你能接得住几个?(上)
- (建议精读)原生JS灵魂之问(中),检验自己是否真的熟悉JavaScript?
- (2.4w字,建议收藏)😇原生JS灵魂之问(下), 冲刺🚀进阶最后一公里(附个人成长经验分享)
TianTianUp 博主的文章,也值得大家去阅读~
LinDaiDai_霖呆呆 博主的文章推荐:
- 读《三元-JS灵魂之问》总结,给自己的一份原生JS补给(上)
- 【精】从206个console.log()完全弄懂数据类型转换的前世今生(上)
- 【精】从206个console.log()完全弄懂数据类型转换的前世今生(下)
- 【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)
- 【建议👍】再来40道this面试题酸爽继续(1.2w字用手整理)
- 💦【何不三连】做完这48道题彻底弄懂JS继承(1.7w字含辛整理-返璞归真)
- 🔥【何不三连】比继承家业还要简单的JS继承题-封装篇(牛刀小试)
待更新…
小狮子有话说
关于 JS
这一块是整个前端的核心,那么要整理这一模块知识是需要花大量时间,因此我会持续更新这个模块知识体系。
非常建议大家能来交流群一起交流JS,大家一起学会更有动力,【小狮子前端】技术交流群:
666151691
欢迎大家加入。