我是如何從零基礎到淘系前端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），值得我學習。
• 完