「斑愿称为最肝」小狮子前端知识食谱 / 生日之际，好运分享 / 秋招和你手摸手入大厂【史上最全指北】

生日之际，记录自己前端拼搏之路~

2020年8月12日，破壳的一天，小狮子の21岁。特意在前一周准备了这篇博文，记录自己前端拼搏之路。此外，也入驻了掘金社区，发现了许多优秀前端博主，他们的文章内容输出都非常精致，我觉得有必要好好学习一下。

下文会有一部分自己感想，如果大家想要看干货的话，不妨跳到正文处阅读即可。其余部分闲暇时间阅读一下也是不错的嗷。

生日愿望：希望拿到一个满意的 offer ，成为一个优秀的前端博主！

秋招在即，经过反复思考之后，我想到了一个提高效率的方式。原本的话，我可能会从头开始又把前端分模块复习一遍，但是这样效率不是很高，也 Get 不到重要部分，往往时间周期会比较长。本次呢，我打算采用面经复习法，将别人的面经整理一份知识点来学习。这样既能检测自己会不会这道题，同时也跟着大家步伐更新，个人觉得也是一个事半功倍的方式。

赶快来关注我吧，接下来的几个月里，我们一起逆风微笑，乘风破浪！

过去几个月的我

大家好，我是 Chocolate，一个不是只会写业务代码的前端攻城狮（我的文章里有我的故事，所以你要带酒来倾听吗？）

2020年刚开始的时候，正是疫情蔓延的时候，起初作为学生党的我，丝毫没感觉有啥变化。但当事情变的越来越糟糕时，我又不得不认识到严重性。学校停止开学，封闭在家中没办法出门，各大城市都开始封城…虽然说过年的氛围一年不如一年了，但今年连团聚的机会都没有了。但疫情对我生活的影响也不算很大，毕竟我就很宅… 在家里，我依旧保持着学校的状态，每天都会有固定时间学习。

大学期间，学习了很多课程，计算机网络，Java，操作系统，数据库，网络安全，物联网，数电，模电，电路分析，甚至还有医学类课程，心理学课程等等。但是前端方面，学校就简单教了 Web，内容都是好几年前的了。正如一句话说：师傅引进门，修行靠个人。

在了解前端后，我决定不走 Java方向了，于是在2月份就开始了我的春招找实习之路了，大家可以随心阅读，里面有我整理的一些优质笔记，这里我就不再赘述了。

【春招&实习&秋招】前端学习の优质资料整理&心路历程

博客专家之路

3月份，我成功在 CSDN 平台获得了 博客专家 的称号，两年了，也算是一波小丰收了，看到了坚持的美好。并且这两年的写博客让我养成了习惯，每个自然月我都会出产许多篇博客。

【长文总结】2020 从零到博客专家过去的我，现在的我，将来的我

到现在，经常看我博客的伙伴可能会发现，我的文章内容越来越丰富了，动不动一篇就是好几w字。个人觉得书写的还是有一定深度的，这一点自信还是有的。至于原因呢，我觉得可以吸取一下 @神三元大佬 的经验：

谁的人生不是这么误打误撞过来的呢？那你可能就会问了，你凭什么能够把基础学的那么扎实，通过这些大厂的面试呢？

我觉得有两点，一点是 外在 的因素，一点是 内在 的因素。

对外在的方面，我在输入一些信息的同时，会加入自己的思考和推敲，然后用自己的方式来输出，整理成博客，这使得我能够对知识体系本身有更加深刻的理解，同时也能在忘记这部分知识点之后，重新回顾的时候能够很快捡起来，节省了非常多复习的时间。

对内在的方面，我觉得自驱力是一个比较重要的因素，即自己驱动自己学习的能力。其实说起来容易，做起来是非常难的，因为外界的诱惑实在是太多，而且学习本身就是脱离舒适区的活动，是一种反人性的活动，本身就是让人不舒服的，因此很多人不愿意主动学习，这是完全可以理解的。那我为什么会有这种强烈的自驱力呢？
因为危机感，危机感随之带来了恐惧。

为什么这么说？

以前听《得到》APP上的梁宁老师讲过，人性其实只有两大痛点: 一个是愉悦，一个是恐惧。 愉悦感可以让人沉浸在一件事情当中干一万小时，成为高手，而恐惧带来的动力更加显著。 对产品来说，要么就让用户爆爽，要么就去帮助他抵御恐惧，否则就不是一个优秀的产品。那么对于个人的成长而言，你做一件事情，没有找到任何愉悦的感觉，也没有产生过任何恐惧，那么他基本上在这个领域一事无成。
换句话说，如果一件事情让你非常疯狂地去做，要么这件事让你爆爽，要么它帮助你抵御恐惧。

对我来讲，真正驱动我的是后者。危机意识让我挖掘出真正的痛点，发现自己的恐惧所在，从而带来强大的自驱力。如果说仅仅是学一些东西来炫耀一番，或者只是去迎合外界的期望，这种动力可以有，但仅仅只是暂时的。当你走出舒适区，面对外界无数诱惑的时候，真正能 carry 你继续学习的是你内心的痛点。

我觉得明白这一点，比所谓的学习路径、学习方法重要得多。因为大多数时候我们不是缺少学习资料，或者没有掌握什么高效的学习方法，只是因为你动力不足、容易懈怠罢了。每个人情况都各不相同，但我觉得想要成长，挖掘自己真正的痛点是最重要的一件事情。

阶段性反馈机制

现在8月份了，正是秋招旺季，各大厂都开始招人了。这个模块是介绍过去几个月的我，那我还是先讲讲过去一点事吧。在找到一份个人觉得还不错的实习后，我开始有点懈怠了，尽管每天上班时间我会认认真真完成导师给我的任务。但是下班后以及周末，几乎不会动任何代码，也无心学习。在实习之前我给自己的目标就是边实习边准备秋招，周末阶段学习 React 。人都是充满惰性的，而且学习本身就是脱离舒适区的活动，本身就不会让你觉的很舒服。 那为什么我们在打王者荣耀的时候，会发了疯地想要上分呢？这就要提到一个阶段性反馈机制了：

雷军曾经说：野心和执行力，才是一个人最核心的竞争力。一个被巨大野心驱动的人，会极度自律、昼度夜思、殚精竭虑、不知疲倦，因为他不是想赢，而是必须赢。

反馈机制拿玩王者荣耀举例子太好不过了，对于快节奏的手游，·打野刷完野怪能够获得金币，尤其是当你用很需要操作的英雄击杀对面之后，游戏带来的音效和画面刺激你的大脑，你想赢，也必须赢。这些都是小小的反馈，其次，当你一波上流操作，绝地翻盘带来的快感我想应该更加强烈，你甚至可以为此一天不休息，不疲劳的玩下去。

从此看来，奖励机制十分重要，所以如果想要努力的做一件事情，就要反复的告诉自己我如果做成功了，能得到什么？比如你爱看动漫，那你可以告诉自己，把这100个单词背完，奖励自己看一集动漫。这里我就想到 英雄联盟里的一个梗了，诶，奖励自己一把亚索！ 这句话一出，我想你对反馈机制有了更加深入的了解了，因此，我们在某个小阶段，可以试试这个反馈机制，达成一个小目标给自己一点小奖励，然后不断刷新自己的目标，这样总比刷一天手机，然后感叹一天啥事也没干好很多。至于我们是否能得到最终的结果不重要，而是你在这个努力的过程，潜移默化的形成了一个优秀的习惯！

疫情是恋爱的照明弹

这个我也是逛了许多博主体会到的，而我自己也是其中一员。作为一个程序员来说，我不擅长写作，但一直觉得自己挺重感情的，每一段感情经历过后，我都需要很久很久才能恢复日常状态。原本看着身边有人发着说说分手了，我没太多在意，甚至有点想笑，在校期间都好好的，为啥还能在网恋的过程中分开了…

世界就是这样，永远不要笑别人，因为保不准那天你就成了故事里的主人公，成为了被笑的那个。

没错，我也终究成为了那一个。分手后一段时间内我一直不敢相信这件事，想要试着挽回，但是很明显的体会到有一层冰山一样阻隔。

这段时间我咆哮过，低沉过，不甘过，不过一切就像本杰明巴顿奇事里面说的一样：

你可以像疯狗一样对周围一切愤愤不平，可以疯狂咆哮诅咒命运，但到最后一刻，你还得平静的放手而去。

人生很长，我们要向前看，不能因为某些事一直消沉下去，过去的事，就让它过去。

我一直觉得，当你在某一方面做的足够好的时候，在其它方面总会有一定缺点，正如一个人总不会是完美的一样。

最近在看《二十不惑》，其中就有说到：我曾以为自己遇到了命中注定，现在才发现，原来命中是骗局，错过是注定。只是生活多么的奇妙莫测啊，我们永远不会知道，那些命中注定的发生，会把我们带往何地。

是啊，生活就是这样奇妙莫测，不知道下一秒会发生什么，你笑的别人，或许之后你就成为了故事里的主人公，成为了被笑的那个。关于感情经历，我也不想提及太多，我既然写出来了，代表已经坦荡了，调整好了自己的心态。再者，也不想因为这个让各位博友们看的很压抑，毕竟要传播正能量嘛。

亚科斯说：“我们人生中90%的不幸，都是因为不甘心引起的。”
及时止损是成年人情感中最高标准的自律。

及时止损和坚持并不冲突，真正的坚持，不是盲目做一件事情，而是及时放弃，调整和取舍。只有这样，人才会在正确的路上越走越远，越行越宽。止损是为了更好地前行，它决定了个人或者企业能否站得更高，走得更远，所以，不懂得止损，不足以谈坚持。（摘自：懂得及时止损的人，活得更高级）

成为大人最重要的前提，是阅历

《令人心动的offer》里，papi酱说自己大学毕业后，非常急于摆脱“学生”的身份，想让别人都承认，自己已经是个大人、社会人了。而社会人的标志就是喝酒。她就总会在饭局上豪饮，一副千杯不醉见过世面的样子，最后趴在马桶边狂吐。

等到不知不觉真成了大人才发现： 大人的世界，可比酒苦多了。

长大就是一座围城，里面的人想出来，外面的人想进去。

20多岁，现实分界线的年纪。

现实不是坏事，可丢了从前的热情，是坏事。

你们应该也听过那句话吧？

“你要做一个不动声色的大人了，不准情绪化，不准偷偷想念，不准回头看。”

以前觉得这种克制隐忍的腔调很酷，可岁数越大越发现，逼自己长大，本身就是一个假命题。

成为大人最重要的前提，是阅历。

是经历生活砸过来的所有意外，它早晚都会来，你想不接着都不行。

在没来的时候就早早地逼自己克制，心动时矜持，爆炸时忍耐，装也装不像，图什么呀。

该懂的道理你早晚会懂，该失去的冲动幼稚，你终究都会失去。

早晚有一天，你不会再为婚礼上的神仙爱情流泪，而是去关注婚房地段，婚车排场，婚戒牌子，还有现场布置的到底是真花还是仿花。

早晚有一天，你会觉得“有情饮水饱”就是放屁，你会坚信贫贱夫妻百事哀，明里暗里关注对方的家境，为那些还敢裸婚私奔的小姑娘叹气。

你会在短短几年内，否定自己年少时的做派，打着更成熟和现实的名义，一天又一天地被削掉锐气。

我说真的，你别不信。

没有人是迪士尼小公主，也没有国王爸爸和白马王子十年如一日地护我们周全。

你我终将要靠自己，顶天立地。

到那时，也许你就不会再后悔，年轻时丢过面子，跌过跟头，你只会后悔浪费了时间和锐气。

说真的，如果还来得及，你可以不用逼自己。

踢掉高跟鞋，想扎双马尾就扎，喝醉了给喜欢的人打电话，心情不爽就在朋友圈骂人；

你可以不用假装高情商，很懂人情交际；

你可以心安理得地说啤酒就是不如可乐好喝；

大大方方承认那些高逼格的纪录片你没看过；

幼稚就幼稚吧，还能幼稚几天啊。

每个人有自己的时区，不用着急，也不用可惜。以上是我最近看到的，也许就是那么一个时刻，正好读到了这里，发现了不一样的风景，也正好与目前自己处境想法相同。于是就存档一下，以后还能翻阅一下~

正文

不管你是跳转过来，直接来到这里，还是阅读过上文后过来的。接下来，我会整理前端学习知识，让我们一起手摸手的努力~

前端笔记Github仓库在这里！

危机意识能挖掘出自己真正的痛点，发现自己的恐惧所在，从而带来强大的自驱力。

CSS篇

神三元：剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

超逸の博客：前端知识梳理之CSS篇

CodeDeer：纯CSS画三角原理解析

JowayYoung：灵活运用CSS开发技巧

大志前端：【前端帮帮忙】第4期使用纯CSS制作一个开关按钮

Chocolate：CSS制作开关按钮源码（演示）

JS篇

追梦子：彻底理解 JS 中 this 的指向

追梦子：JavaScript中call,apply,bind方法的总结

JavaScript 进阶问题列表（测测你有多了解 javascript）

金色小芝麻：想自学JS吗？想提升JS底层原理吗？76张脑图带你彻底搞懂原生JS

前端小智：周末学会了 10个超级实用 Javascript 技巧!

pingan8787：1.2w字｜初中级前端 JavaScript 自测清单 - 1

ES6-ES10篇

榴莲布丁:【ES6基础】 Map用法总结

陈大鱼头：从ES6到ES10的新特性万字大总结（不得不收藏）

虚拟DOM（diff算法）

txm：大厂面试官：请阐述一下你对虚拟DOM和Dom-Diff的理解？

noobakong：虚拟DOM和Diff算法 - 入门级

vdk：Vue中的虚拟DOM及diff算法

小小晴:【React】深入理解虚拟dom和diff算法

Node.js篇

Node.js技术栈

计算机网络篇

神三元：(建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系

神三元：(建议收藏）TCP协议灵魂之问，巩固你的网路底层基础

浪里行舟：深入理解HTTPS工作原理

浏览器篇

神三元：(1.6w字）浏览器灵魂之问，请问你能接得住几个？

浪里行舟：Ajax原理一篇就够了

数据结构与算法篇

awesome-coding-js：用JS玩转数据结构与算法

ScriptOJ：前端首个 Web 前端开发评测系统

ConardLi：前端该如何准备数据结构和算法？

JavaScript 算法与数据结构

晨曦时梦见兮：前端电商 sku 的全排列算法很难吗？学会这个套路，彻底掌握排列组合。

Jay_huaxiao：看一遍就理解，图解单链表反转

Vue篇

金色小芝麻：30张脑图带你从零开始学VUE｜VUE基础知识篇

小明同学哟：彻底理解Vue组件间通信(6种方式)

浪里行舟：Vue 组件间通信六种方式（完整版）

shotCat：可能比文档还详细–VueRouter完全指北

柚子233：如何在一个页面使用多个router-view显示不同的内容

一叶知秋666：vue-router 基本使用

晨曦时梦见兮：请你说说 Vue 中 slot 和 slot-scope 的原理（2.6.11 深度解析）

晨曦时梦见兮：Vue 的生命周期之间到底做了什么事清？（源码详解，带你从头梳理组件化流程）

晨曦时梦见兮：为什么 Vue 中不要用 index 作为 key？（diff 算法详解）

晨曦时梦见兮：驳《前端常见的Vue面试题目汇总》

React篇

wangly19：一天学习React入门后的千字基础总结

秋天不落叶：你真的了解 React 生命周期吗

卡颂：阿姨，React源码好难懂，我不想努力了

中间件

晨曦时梦见兮：Koa的洋葱中间件，Redux的中间件，Axios的拦截器让你迷惑吗？实现一个精简版的就彻底搞懂了。

小畅叙：Koa2 简单入门

xiangzhihong：Koa2开发快速入门

源码篇（手撕原理）

小鹿动画学编程：动手实践去实现 Vue 2.0 的核心原理

小鹿动画学编程：阿里面试官让我手写 Vue 2.0核心原理，我都整理好了！

小明同学哟：手写源码系列

txm：面试时，你被要求手写常见原理了吗？

蓝莓圣代：手写jsonp实现原理

迪迪同学：call, apply, bind 区别及原理

txm：手写一套完整的基于Vue的MVVM原理

Promise篇

小明同学哟：一步步教你实现Promise/A+ 规范完整版

小明同学哟：Promise系列

优秀公众号推文

前端瓶子君：前端面试基础题集合！赶紧上车！

前端面经大全

神三元：2020三元同学春招阿里淘系、阿里云、字节跳动面经 & 个人成长经验分享 | 掘金技术征文

LinDaiDai_霖呆呆：霖呆呆的近期面试128题汇总(含超详细答案) | 掘金技术征文

小明同学哟：初中级前端面试题

txm：初中级前端面试题（万字长文）

字节跳动2020面试算法题+场景题+智力题100题

题集：字节跳动2020面试算法题+场景题+智力题100题

（答案1）字节跳动算法题+场景题+智力题100题

（答案2）字节跳动算法题+场景题+智力题100题

前端优质博客/Github

yck掘金小册：前端进阶之道

ConardLi的blog

FE-Interview 前端面试题整理

大前端面试宝典 - 图解前端

心路历程 / 大佬经验分享

Bestbven：双非院校，成绩不好的他，怎么突然拿到大厂offer了？| 掘金技术征文

LienJack：艺术喵 2 年前端面试心路历程（字节跳动、YY、虎牙、BIGO）| 掘金技术征文

LienJack：2019学习学到失恋但是还要继续|2019 与我的技术之路

LienJack：一位前端 2018 绝地求生记 | 掘金年度征文

txm：生日之际，记录自己前端拼搏之路~

晨曦时梦见兮：写给初中级前端的高级进阶指南

晨曦时梦见兮：写给女朋友的中级前端面试秘籍（含详细答案，15k级别）

yck：看完跳槽少说涨 5 K，前端面试从准备到谈薪完全指南（近万字精华）

鸣谢

本篇博客知识点与相关文字都参照了各位大佬的博客，由于大佬太多了，也不太方便一个一个感谢了，但在本文已经都注明了各位大佬的博客出处，在此表示感谢，感谢各位大佬的优质文章 ✿✿ヽ(°▽°)ノ✿，小伙伴们都可以去他们主页逛逛，总会有一些好的内容等待着你去发掘~

总结

以下部分引用三元大佬经验分享

面试阶段

从上面的面经中可以看到不同方向、不同级别的面试官各自的偏好不一样，因此对于不同的面试官，采取的策略也应有所不同。但我更想分享的是一些具有共性的地方，这些策略可以适用于绝大部分的面试场景，让自己获得更大的竞争优势。当然，所谓的面试策略，都是基于你前期充分的准备，不然都只是天方夜谭，毫无可行性。

策略一: 备好杀手锏

面试官一天可能要面5-6人，甚至十几人，那么你是否想过: 他凭什么对你印象更加深刻？

心理学有一个效应叫 峰终效应 ，就是人在一个有限的活动当中，对一件陌生事物的看法大致由两个时间点所决定: 一个是高潮点，一个是结尾的点。
对面试而言，我认为同样是适用，具体来讲，和面试官的交流，其实也就是和一个陌生人的交流，如何来给他留下更深刻的印象？需要在高潮点展现自己，在结尾点保护自己，在面试的过程中适当给面试官一些和别人不一样的回答和见解，使之感到惊艳，而在结尾的时候，你说的话其实更容易被面试官记住，这个时候由于面试已经接近尾声，你可能没有当时那么紧张，这个时候需要适当的谨慎一些，不要彻底放松，避免不小心说出一些对自己处境不利的话。

其实，我更想强调的是前者，即如何将面试带上一个高潮点，并且让面试官感到惊艳。其实这并不是什么简单的事情，毕竟能惊艳的只是少数，那么如果才能做到这一点呢？
在面试前，不妨准备好自己的杀手锏。什么是杀手锏？就是每当面试官问到相关的问题的时候，你能够有自信比 90% 的人理解得更深刻，回答更出色。以我自己为例，我准备的杀手锏并不少，HTTPS 所有加密算法，chromium 进程 IPC 原理，斐波拉契第 n 数的 logn 解法，浏览器渲染过程，vue 编译器架构，vue 双向绑定，快排以及手写 V8 排序 …

在其它基础知识都 OK 的前提下，这些杀手锏是你技术上的核心竞争力，这是你和其他人相比体现不可替代性的地方。当然，时间有限，不可能每个角度都能研究很深入，但如果你不准备，跟大家背一样的答案，很难从人群当中脱颖而出。

策略二: 适当暗示

面试的过程其实就是一个和面试官互相试探的过程，一方面是他对你提问，另一方面你需要给他一些信号，引导他去挖掘你的闪光点。

其实有两个时机可以发一些暗示的信号，一个是自我介绍的环节，这个环节中可以向面试官展示出你之前深入研究过哪一块的技术，指引他往那个方向问，另一个是技术细节的提问，可以在回答的时候适当发挥，大部分面试官是愿意听你展开的。

我们的征途是星辰大海！ 在经验分享处，我说我佩服自己第一次就面腾讯，其实想说自己真的挺傻的，在没有准备好的情况下，直接去面自己想去的公司，相当于当了一次炮灰一样。而且大多数公司都是有面试记录的，太差了也会影响后续面试邀请，比如说字节跳动，自从一面凉了之后，之后所有的投递都投入 “人才库”里。其次，整个面试过程给了我一些毒打，但又让我成长了许多。比如我们去面试，与面试官交流，并不是我们单方面的一问一答，而是交流，你怎么通过交流体现出你简历上面的能力，比如你的自学能力，你的表达沟通能力，你的领导能力等等。

另外，面试也是一次双向选择的过程，面试官让你通过面试，也是觉得你可以做它的同事，因为公司拉人，多数也是部门招人，招你过去很有可能就是他的同事了，后续一些工作安排，业务等等都会打交道的。当然面试官要进行筛选，选最合适的那一批人。

其次，面试官都是挺好的，可能个别会感觉有点高冷，甚至感觉与你不搭，这也是正常的。面试过程应该是一个轻松的过程，而不是那种一遇到问题就紧张说不出话的那种，尽管有些面试官会为难你，来个难题，也是为了考察你在高压的情况下你会如何判断处理。此时，对于你完全不会的地方，例如你可以这样回答：面试官，关于这一点的话，我本科阶段没有进行了解过，但与这个相关的另外一个知识点我知道，然后xxx，又或者说是关于这一点的话，你可以给我一点提示吗？又或者说是这一点我在本科阶段没有怎么了解过，但是我可以尝试解答一下，然后xxx。通过上述三种回答都比直接说不会要好很多！

每一次面试都是好的经验，通过写博客总结的形式也是一个输入和输出的过程。这样也可以让自己知识点记得更加牢固一点，这里不得不说两年写博客经历还真是让我收获许多。其次， 心态和自信方面挺重要的，尽管自己走的很慢，但是不会停下自己的脚步。 关键是学习前端思维，明白自己要学什么，该怎么学，如何学。那么对于一份好的工作到来，也只是时间问题了。

结尾

每篇文章制作不易，养成一个阅读好习惯，觉得不错，反手就是一个赞，这样我也能发现你啦~

另外，Github 已经为前端小伙伴整理了一份完整地笔记，已获100+ star，别错过哟！

小狮子前端笔记仓库传送门

学如逆水行舟，不进则退！我们下期再见！

如果您能在评论区来一句生日祝福，那我就完全心满意足了（祝福必回复，不管是今天还是接下来的日子，祝福虽迟但到！），要继续长成厉害的大人~