我是如何从零基础到淘系前端offer - 阶段性总结

零、 这篇文章是什么

这是我阶段性总结，写这篇文章有 2 个目的：

1. 自我回顾，是我对本身过去转码学习的总结
2. 回馈社区，由于学习的时候得到了社区提供的不少帮助

若是个人经历和你有类似，同时也帮助到你，那真是太好了。

• 注意：由于有自我回顾的部分，因此若是下文可能会某些流水帐同样的东西，能够跳过，那是由于我单纯想回顾下当时的情景和心态

1、个人背景介绍

我本科的专业是能源与动力工程，研究生专业是农业与生物工程，如今立刻要结束研究生的第三个学期。本科跟着老师参加过咱们专业的相关的竞赛，也作过科研，是用 Matlab 作模拟，若是算上本科学的 C 语言，那么他们俩是我本科惟二的与写码有关的东西。

既然我与 Computer Science (CS) 联系也很少，那为何转行 CS ？

由于我作的方向虽然是工科，但这个方向工程价值并非特别高。并且我本身对写码一直有一种迷之憧憬，加上当时申请到了研究生这个学校，它的 CS 课不错，我选课也没有专业限制，因此决定转行 CS。

因而研究生第一学期上了一门 CS 课程，数据挖掘。第二学期上了两门，人工智能和数据结构。我也就是在第二学期接触的前端。

诶，等等，你不是说你零基础吗，你看你不是学过数据结构嘛？标题党，举报了。哈哈，别，我是学数据结构的同时学的前端，前端是零基础开始学的。好啦，我知道啦，别说我了，每一个人前端都是从零开始学习的 😝

总之，这就是个人背景啦，而后我 19 年下半年开始学习前端，虽然期间还在上课，可是接触了前端后，几乎是半脱产的状态在学习。接下来我会详细叙述个人学习经历，面试经历，和个人一些学习的想法。

OK，先说下个人淘系面试经历吧

2、个人淘系面试经历

这个章节，我更多的偏记录，因此会有些流水帐，我把它折叠了，不想看的小伙伴能够跳过

面试淘系以前，有看过不少的面经，可是除了一面的时候被问了不少基础知识，后面就被问得不多了，因此这个面经不具有通用性。（更新4.30：个人是实习 offer，不是全职啊啊啊）

面试的过程是 4 轮技术面 + 1 轮 HR 面，由于当时没有记录，我只能挑还记得的问题说

一面

一面和常规同样，考察基础知识，经典的题目有浏览器缓存，闭包一句话解释下，网页优化的技巧等等

二面

而后，二面我记得最清楚，彻底出乎我意料，被降维打击了。面试官是一位 P8 大佬（难道大佬都不按照套路出牌？）

点击下方按钮，展开内容👇
复制代码

点我点我点我 🚀

• 给你们还原下当时的场景，如何从一个点，穿透到你的知识边界
  • 面试官说，看你学过数据结构，讲讲你以为哪一个数据结构最有意思吧
    • 第一个问题我直接懵了，不是该常规的 JS CSS 和 计算机网络 来一套吗。可是也就是懵了 0.5 秒，脑子里开始疯狂思索有哪些数据结构能够拿出来讲。我首先想到了map，第二个想到 tree，原本想说说树，可是电光火之间我想到我可能会给本身挖坑，由于计算机领域太多地方用到树了，好比 DOM tree，抽象语法树AST，B/B+ 树，k-d树，红黑树。。。想到这里，我忽然发现我，对于有些树不是很熟悉，若是问的问题往编译原理和数据库方向走了，那不就GG了，因此为了不给本身挖坑
  • 我就说，我以为图最优意思
  • 面试官说，为何以为图有意思呢
  • 我说，由于它是最复杂的数据结构 （后来想一想，这才是给本身挖坑嘛）
  • 面试官说，那你能具体说说吗
  • 我说，我上过一门课人工智能，里面学了一个寻路算法，其中有个算法叫作 A星算法（A*），Blablabla，幸亏上个学期刚上过，尚未忘完
  • 而后面试官说，那你以为淘宝有哪些地方能够用到图这个数据结构（这个时候我已经有点绷不住了）
  • 我想了一会说，推荐系统吧，由于用户与商品间有联系，商品与商品间也有联系（我瞎说的，我根本不知道）
  • 那你说说推荐算法（好了，绷不住了）
  • 我不知道，没有学过，我上的人工智能的课主要仍是作了些关于像以前的寻路算法，天然语言处理，人工神经网络的做业
  • 那你讲讲人工神经网络是如何工做的吧
  • 而后我blabla。由于做业是调用 PyTorch 这个库作的，因此不会涉及到里面复杂的算法，我就只说了最基础的理解。
  • 嗯好，对了，你刚才说到了天然语言处理，你知道中文不像英文，语义化的分析很复杂，你说说看看你的理解
  • 而后我隐约记得以前看过篇推文（后来查下是知乎），说谷歌翻译中文准确度猛地提升了，里面就应用了神经网络/深度学习。（到这里我就真的说不下去了，由于我上的课是很是入门的课，并没深刻研究）
• 上面这只是其中一部分对话，相似的还问了
  • 浏览器和Node的事件循环有差异，为何要这么设计；
  • 若是你来设计，如何设计 js 的事件循环；
  • 关于你对 Flutter 发展的见解；
  • 不一样框架性能比较过吗；
  • React Native是如何实现的；
• 我当时就以为为何我这么菜啊，几乎一个问题都回答不出来，这些一连串的问题，直接把我问懵了，感觉到了降维打击。固然啦，我仍是努力地回答了全部的问题。

三面，四面，HR面

接下来几面问的基础知识不是不少，有深入印象的就下面 2 个，至于为何印象深，嘿嘿，我是不会说出来的 😆

• ES6 中的 let 有块级做用域，那 ES5 是如何实现块级做用域的呢
• Chrome 如何检测内存泄漏，怎么定位到哪一行
• 最后 HR 面是单纯聊天，不要皮，问你想不想来杭州，不要瞎说，说很是想来，上有天堂下有苏杭

总结一下

• 当时以为二面压迫感挺强的。面对一个在前端领域深耕了10年的高级专家，以前的面经一点用也没有，我甚至有怀疑本身白学了前端，
  • 但回头看看，哪一个学校里的教授不是在专业领域耕耘了一二十年的，为何压迫感没有那么强呢
  • 想了想有 2 个缘由
    • 一个是并无被教授以求职的要求面试过，若是他拿出真正的东西想考你，你也直接被问懵B
    • 二来仍是心理因素，不该该以为前端很神秘，也不能以为前端很容易，保持敬畏谦虚，同时也不惧怕就好@

3、我是如何学习前端的

这节我按时间线，回顾记录了下个人学习路线，供小伙伴参考

前端学习时间线梳理

我最先开始学习是从买了 Udemy 的一个网课开始的 The Complete JavaScript Course 2020: Build Real Projects! （当时还不是2020，仍是2019，我以前觉得是2019年出的呢，哪知道它每一年都改个名字！），跟着这个网课学习了JS基础，最后作了一个 搜索菜谱 的页面。我对于前端的兴趣也是在这个过程当中被点燃了。过程当中我也边写边作笔记，如今看来有点形式大于收益了，写得像 流水帐 同样，固然当时我也乐在其中。

可是紧接着，我就犯了一个错误，我在 Coursera 上买了一个前端课程。

也许你会说，什么？Coursera 不是都是大学教授上课吗，他们也教前端？对，真的有，可是我错就错在这里。

以前也上过 Coursera 上的数据结构课程，我对它的印象很不错，可是前端是很是贴近业界的行业，而大学教授讲的课程，显然比不上一线从业人员的课程，除非老师深刻到了某些细分的能够深刻研究的领域，好比人机交互。可是，这个老师讲的是基础Web开发，因而跟他学习了 Bootstrap，再接着上 React，而 React 的课程上到一半，我是真的听不懂了，不知道他在讲什么，我就中止了。因而由于这个，我大概歇了10多天没有学习前端。

然后我发现，YouTube 上不少免费的视频质量其实很是高，好比这些频道 Coding Tech 和 freeCodeCamp.org，应该也有中文翻译，你们能够酌情学习。

再说回来，自从不上那个老师的课以后，我就轻松多了，开始换了个方式学习 React。先是把 React官方文档 里面的 小游戏 跟着教程走了一遍，而后本身用 React 写了我的主页部署到了GitHub。创造点东西对于我来讲，是很是重要的保持学习热情的手段。

再日后，就没跟着某个教程学习了，这段时间就是哪里不会学哪里，遇到问题，搜索，解决问题，记下来，再遇到问题，开启循环。大概是这么一个学习路线。

同时，也去阅读了一些博客，专栏文章，别人的学习经验，创建了本身的知识体系。后来，各个企业春招开始了，我开始经过面经，完善了本身的知识体系（确实颇有效，这跟高中作模考复习，而不是通读课本复习是一个道理）

由于不喜欢用电脑读书，因此整个过程当中，有任何问题，我都是直接用搜索引擎学习。

总结下我学习的路线

网课入门 --> 写了第一个项目 --> 点燃热情 --> 
继续上课 --> 阅读博客、专栏 --> 创建体系 --> 
面向面经编程 --> 完善知识体系
复制代码

我如今本身的不足之处仍是不少，好比和科班的同窗相比，我没有学过编译原理，计算机结构，操做系统。这些东西我都放在了我往后的学习计划里。

4、本身的经验（干货阶段）

我结合我自身的状况，推荐一些影响个人文章和人 也能够理解为，若是让我如今给入门时的本身一些建议，我会给我本身这些建议，你们能够参考

1. Coursera 前端课程千万不要看

哈哈，抖个机灵，（逃

2. 必定要阅读高质量的文章

阅读最优质的的文章，才能学到优质的内容，知识自己无高低，可是通过整理消化后的让你容易吸取，这就是好的文章带来的附加值。

掘金上面就有不少优质的文章

1. 从输入URL到页面加载的过程？如何由一道题完善本身的前端知识体系！，做者是钉钉的前端大佬，写得很是详细，涵盖了大部分知识点，梳理整个体系，我首推这篇文章。如笔者所说，特别对于新手，不建议一次就看完，而是常常去回顾，总有新收获（一年逛两次海澜之家，每次都有新收获？）

2. (1.6w字)浏览器灵魂之问，请问你能接得住几个？，做者是神三元大佬，常常混迹掘金的同窗应该不会陌生，写的文章深刻浅出，是我辈学习的榜样，常常看标题就会忍不住点进去。这篇文章和上一篇结合着看，效果奇好。

3. 我如何零基础转行成为一个自信的前端，我要重磅推一下这篇文章，做者应该如今是在蚂蚁金服，他很是详细地介绍了他从一个零基础的文科生转行到前端的过程，而且推荐了很是多的行业大牛以及函数式编程的学习方法。虽然我也在跟着学，但我感受把他推荐的东西学完，至少得脱产学习大半年，而这篇文章真正带给个人是一种思惟模式和视野，让我知道了我能够用一种更大的视野去了解前端，这对于一个新人来讲，是很是可贵的。

这里列的并不全，还有不少相似的文章。这样的文章的好处是，你能够系统性梳理知识点，做者和你几乎处于同一时期，他们筛选过的知识，是你的当下最须要的。

最后是我以为读文章要适可而止，能够暂时不要深究，像 Chrome 这种庞然大物，光 V8引擎 就够喝一壶了，而且不少机制随时都在变，不能把每一个版本的变化都背下来吧，我认为新手一开始有个大概的了解就好。

3. 那如何分辨高质量的文章

有两个方法，找一手资料，或者高质量转述资料、大牛文章

1. 找一手资料
2. 找大牛写的文章

举个例子，关于 V8 的文章

• [知乎] JavaScript 在 V8 中的元素种类及性能优化，这篇文章是某次面试由于被问到 V8 里面 Array 具体是如何实现的，后来去搜索这个问题，找到了这篇文章。看完后以为这篇文章是我看过的写的最易懂的，按部就班，有理论也有例子。当时觉得是答主本身写的，结果仔细一看，这是翻译的官网的文章。（没有说答主很差的意思，答主也是位大牛，Deno 的核心贡献者）
• 'Elements kinds' in V8，顺着他给的连接，我找到原文地址，在 V8 的官网上。若是，答主没有翻译这篇文章，那我是否是就看不到这篇文章了？是的，我确定就检索不到这么好的文章了。因此不少时候，一手资料能够给你更多的主动权。 Evan You 比做为 尤小右 的身份是更活跃的。

可是，读一手资料，英语是最大的问题，我英语其实属于很是很差的。

能有多很差？嗯，我没见过托福比我还低的同窗（我也永远不会说个人分数的）

可是我也在强迫本身阅读英文材料，只要能达到4，6级的水平，读技术文章问题不会很大。你们有不会的词和句子就用翻译软件就好。

而我以为最难的地方在于开始阅读，由于我潜意识知道，我读中文必定比英文快，我眼睛对中文敏感，一次扫视，能瞬间抓住页面的关键词。

正是由于这样，当我正在兴致勃勃写代码时（或者代码所需工做量特别大时），须要查询资料，我会下意识使用中文，而不是英文，由于我不想打断写码的思路去研究英语。

因此，最好的方式是找一个专门的时间，开始一点点尝试阅读技术文章，当你自信到阅读英文材料效率不会比读中文慢太多时，那就走上正轨了，如今我本身也彻底不会抗拒英文材料

（顺便插一句，不止是英文这件事，若是以为当目前的工做已经压到你再也不有时间去提高本身的能力的时候，那是时候考虑其余出路了，由于体力劳动的可替代性太强了）

4. 高质量文章的好处

好的文章能让你快速理解消化其内容，举两个例子，

1. 闭包：以一系列高质量的博文为例
2. 原型链：以 BYVoid 大佬画的示意图为例

例子1：闭包的理解

闭包的定义

Like most modern programming languages, JavaScript uses lexical scoping. This means that functions are executed using the variable scope that was in effect when they were defined, not the variable scope that is in effect when they are invoked. In order to implement lexical scoping, the internal state of a JavaScript function object must in- clude not only the code of the function but also a reference to the current scope chain. (Before reading the rest of this section, you may want to review the material on variable scope and the scope chain in §3.10 and §3.10.3.) This combination of a function object and a scope (a set of variable bindings) in which the function’s variables are resolved is called a closure in the computer science literature. (This is an old term that refers to the fact that the function’s variables have bindings in the scope chain and that therefore the function is “closed over” its variables.)

Technically, all JavaScript functions are closures: they are objects, and they have a scope chain associated with them. Most functions are invoked using the same scope chain that was in effect when the function was defined, and it doesn’t really matter that there is a closure involved. Closures become interesting when they are invoked under a different scope chain than the one that was in effect when they were defined. This happens most commonly when a nested function object is returned from the function within which it was defined. There are a number of powerful programming techniques that involve this kind of nested function closures, and their use has become relatively common in JavaScript programming. Closures may seem confusing when you first en- counter them, but it is important that you understand them well enough to use them comfortably.

JavaScript, The Definitive Guide

不想看英文，中文翻译能够看 rccoder 的博客 JavaScript之闭包相关

带着这段定义，转跳到冴羽的博客 冴羽写博客的地方，看完它的深刻系列 2-8

最后再看懂下面 5 个例子的区别，那么 闭包 这个概念算是掌握了

// ====== 例子1 ======
for (var i = 0; i < 10; i++) {
  setTimeout (function () {
    console.log (i); 
  }, 1000);
}
// 10 10 10 ....


// ====== 例子2 ======
for (var i = 0; i < 10; i++) {
  (function (e) {
    setTimeout (function () {
      console.log (e);
    }, 1000);
  })(i);
}
// 1 2 3 4 5 6 7....


// ====== 例子3 ======
for (var i = 0; i < 10; i++) {
    setTimeout (function (i) {
        console.log (i); 
    }, 1000);
}
// undefined undefined undefined ... 


// ====== 例子4 ======
var x = 'global'
function test1() {
    console.log(x)
}
function test2() {
    x = 'local'
    test1()
}
test2()
// local


// ====== 例子5 ======
var x = 'global'
function test1() {
    console.log(x)
}
function test2() {
    var x = 'local'
    test1()
}
test2()
// global
复制代码

最后，具体应用的话，能够参考 程墨Morgan 大佬的知乎专栏，React useEffect的陷阱，理解了闭包，就理解了这篇文章

例子2：原型链的理解

BYVoid 的原博文地址JavaScript对象与原型，他用了很是简单的例子 + 一张图让我很快就明白了什么是原型链，而我以前看到文章，洋洋洒洒几百字，我也没看懂。下图来自原博文

Javascript语言其实是两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程`

Javascript诞生记

若是有兴趣，也能够看下阮一峰老师写的关于JavaScript的起源 Javascript诞生记，了解下为何 JS 会有原型链，同时也支持函数为一等公民

5. 推荐的一些博客

我说一些我本身的平时看的博客吧（感受不少大牛主阵地在知乎了，你们能够去知乎找到他们）

1. 冴羽的博客 - GitHub，冴羽大佬的博客，他的深刻js系列，我从中受益颇多
2. 阮一峰的网络日志，阮一峰大大的博客，刚才才提到，这个不用说，知识深度广度都有
3. 固然我在扯淡，王垠大神的博客，博客名字不是我瞎写的，就叫这个。他写的东西不是应用层的，更偏向于理论层，因此我本身多数时候也看不懂。另外知乎上对他褒贬不一，但暂时还轮不到我，个人话膜就完事了。
4. 酷壳 - coolshell，陈皓，网名左耳朵耗子，是一位有 20 年软件开发相关工做经验的大佬（能 20 年一直持续作技术，这样的人太少了，最新的一篇博文是2020年4月4号的，你们感觉一下）
5. 玉伯的博客 - GitHub，玉伯大神的博客，8年前就下了前端的归宿与价值，有时看一看前辈们从前对于行业的感悟，是一件很是奇妙的事情
6. 张云龙的博客 - GitHub，也是一位大佬，不过像玉伯同样，早已不更新
7. ......

还有太多太多了，他们只是这个大社区的一部分，无数开源项目促成了整个生态的繁荣，这种开源的分享精神是 计算机 领域吸引个人重要的一个点。

5、 我本身的疑问和本身的思考

最后一个部分，也是一个我本身的总结，以及这段时间我想明白的一些事情

1. 为何转专业

   上文提到了，喜欢这边的开源氛围。举个不恰当的例子，不少领域你们在知识的分享上建起高墙，一生守着祖传代码吃饭，非本门派的弟子武功是不能外传的，普通人很难获取到信息，就像阶级固化严重的社会，没有背景的人机会是很小的；而在计算机领域则不一样，任何一个普通人，均可以获取到绝大部分信息，那这才是一个有流动性的社会，我做为普通人，固然支持后者

2. 学习压力很大如何应对

   我第一学期上数据挖掘，上课前连 Python 都不会用，第一个做业问了学长，他写了一个晚上4，5个小时做业，我写了大概 5 天，并且天天都在写。这个差距真的很大。

   戒指里没藏老头，肚子里没有尾兽，没有童年误食恶魔果实，也没有一个名为金的猎人老爹，无任何 buff 的新手就被扔到了大龙面前 solo，并且周围队友不是等级比我高就是有红蓝 buff 在手，这样的研究生开局没有 peer perssure 才怪。不过还好，后来我找准了本身的位置。

   我如今怎么看 peer pressure？

   任何层次都有，咱们的压力是学霸，学神；学神的压力的是大牛；行业的大牛的压力来自行业领导者，好比 Java 之父高司令，C++之父 Bjarne Stroustrup，22 岁发布 Linux 内核的源代码的 Linus（强如他们，若是，他们把本身对标历史上的伟人，好比费曼，爱因斯坦，牛顿，那他们得一生活在压力之下）。因此简单就行了

3. 为何要写博文

   我以前虽然也一直在坚持写博客，可是如今回看，不少都是垃圾博文，即无分享价值，也没有提炼关键信息供深度思考，惟一的好处是让记忆更深入 + 打字速度变快。那么我以后的计划是尽可能写高质量的博文，至少要知足下面中的其中一个

   1. 有分享价值
   2. 有回看价值
   3. 最后要注意可读性，重要的不是表达，而是表达的内容，若是让人读不下去，怎么传递内容

6、结尾

最后引用韩寒说的一句话结尾吧，虽然原话表达的意思可能不是这个，可是我以为用来描述开源精神是无比合适的。

只是他们替我撞过了每一堵我可能要撞的高墙，摔落了每一道我可能要落进的沟壑，而后告诉我，这条路没错，继续前行吧

他们先行，我替他们收拾着由于跑太快从口袋里跌落的扑克牌，我始终跑在他们划破的气流里，不过我也未曾以为风阻会减少一些，只是他们替我撞过了每一堵我可能要撞的高墙，摔落了每一道我可能要落进的沟壑，而后告诉我，这条路没错，继续前行吧，但你已经用掉了一次帮助的机会，再见了朋友。 ——韩寒 《1998 我想和这个世界谈谈》

后记

• 我原本但愿不写废话，有些废话是让个人表达更严谨了，可是这既没有增长有趣程度吸引观众，也没加强个人专业性。可。。。但是，太难了，仍是写到了6000多字
• 我以为半佛仙人老师写的文章就是 简洁 + 硬核 + 有趣（sao），值得我学习。
• 完