入門前端一週年總結-我是如何快速入門前端的知識分享

概述

1.2號，是我入門前端的一週年，這一年裡，自己也在不斷摸索學習的方法。這裡記錄和分享下自己在平時生活中接觸的學習資源。

先介紹下自己的經驗，18年畢業，目前在南京工作，雖然大學學的是軟體工程，直到大四才決定走這條路(因為之前打算出去做銷售類似的工作)，發現自己的興趣點，並且逐漸深入前端。本人大概是從7月份開始高強度的學習。

目前學習主要以書本（紙質書）、部落格文章、少部分付費視訊、練習網站為主。在這裡分享一下自己的學習方式和資源。

個人習慣

筆者在看書或者學習的過程中，喜歡記筆記。目前筆記大概記了有十來本了。每本 B5 紙大概60頁這樣。所以導致看書的速度會慢的多。但是效果會比較好。

為什麼鍾愛記筆記，原因有3:

1. 自認為比較笨，認為好記性不如爛筆頭。
2. 方便自己知識的查詢。只要目錄結構記得清晰點。
3. 方便自己進行知識整理的適合，對知識進行梳理，也方便了自己整理技術部落格對適合進行知識查詢。

當然，記筆記的習慣也有不好的地方。如：技術更新會導致筆記知識的技術落後或者造成誤區。在我看來，利大於弊。

書籍推薦

JavaScript部分

---

JavaScript高階程式設計，這本書自己看了兩遍，確實比較厚。但是對於基礎非常重視，其實，在第二遍仔細看的過程中，發現很多細節性的東西自己之前沒注意。所以，這本好書值得讀不止一遍，前端的聖經。

JavaScript語言精粹，很薄的一本書，但是知識點很分明，作者很清晰的指出了 JavaScript 這門語言中精華部分和糟粕部分，此外，還講解了一些編碼的技巧，很受用。

編寫可維護的 JavaScript，這本書也不厚，但是教給我很多編碼的技巧，如何編寫可讀性很高，易維護的 JavaScript 程式碼。此外，這本書是基於 ES5 編寫的。所以，很多技巧可以用 ES6 的語法進行替代。在這個過程中，自己又總結了下 ES6 程式碼和 ES5 的語法的區別，所以，我們要善於總結。

ES6 標準入門，很完整很細緻的讀完了一遍，工作中又經常翻這本書。真的是阮一峰老師的給力之作啊。強力推薦這本書。當然，也有電子稿。可以很深入的掌握 ES6 的語法，甚至將語法觸及到 ES6+。

你不知道的 JavaScript ，上中下三卷。這三本書幫助我更加深入的瞭解了 JavaScript 這門語言。這本書基本是從語言的底層來剖析 JavaSCript，所以讀的很慢。有機會會再次溫習這三本書。強烈推薦

JavaScript 忍者祕籍，這本書的作者的目的是讓這本書的讀者成為真正的火影忍者，在我看來，這本書最大的特點是作者最大限度的結合了當下最流行的幾個庫(作者當時的時代，不是現在的MVVM)，教我們如何寫出更好的程式碼，甚至是一個優秀的庫。此外，作者對跨瀏覽器的策略描述的比較多(無奈跨瀏覽器實在提不上興趣)，書中也大量運用 JQ 的思維。（因為作者就是JQ的作者）

JavaScript 函數語言程式設計指南。這本書筆者暫時讀了一半，讀的有點懵，後來又補充了很多函數語言程式設計的相關知識，等相關思維感覺成熟了，再重拾這本書。此外，筆者已經在編碼中運用了函式式的思想來編碼，還是很好的，這個是思維轉換的過程，這個過程還是很痛苦的，慢慢的領略到函數語言程式設計給我們帶來的好處之後機會覺得很棒了。

高效能 JavaScript 這本書最近正準備看。

CSS書籍

---

CSS權威指南，很透徹的剖析了CSS2的各個屬性，但是，我再讀第二遍的時候，對其中對屬性做一一嘗試，發現很多知識點其實已經被標準修改了。所以，大家也要注意，不能盲目信任權威，要自我實踐。此外，我特別喜歡作者列出對屬性支援和應用的表格，很清晰。遺憾的是，沒有CSS3部分的描述

CSS揭祕，這本書我只讀了一半，讀的過程中就不斷感嘆自己好菜，太打擊自信了。作者是 CSS 組織的規範成員之一，那些技巧足夠讓我們眼前一亮。這本書，讀一遍顯然是不夠的，我覺得重要的是要理解其中的思想。而不是把 CSS 當成一種工具來使用。唯一的缺點就是這本書有點小貴。全綵印 200 多頁，定價是 90 多。(也是讀者買過逼格最高的一本書哈)

CSS世界，是國內知名博主張鑫旭的鼎力之作，可是我還沒有讀。之後會抽時間來拜讀，現在的我時間永遠不夠用，有點學不動了的感覺。

網路，計算機，演算法相關知識

---

圖解 HTTP，這本書算是我對 HTTP 很好的入門了，全書只有200頁左右，花了週末兩整天的時間讀完了，很清晰易懂。大量的插圖我也比較喜歡的。

圖解 TCP，還沒開始讀，但是因為圖解 HTTP 的緣故，我也會好好的讀這本書的。

HTTP 權威指南，這本書太厚了，足足有 600 多頁，現在筆者讀了 300 多頁了，讀的比較慢，且記得筆記比較多。這讓我第一次如此深入讀了解 HTTP，雖然書很厚，但是讀起來不會很晦澀，語言和樸實易懂。只能說，譯者太厲害了。

電腦科學導論，這本書作者是這樣解釋的，是給未了解過計算機的人們普及計算機相關知識。但是我覺得就是在扯淡。全書讀起來很晦澀，理解其中的內容，需要大量的計算機知識，要不然根本讀不下來。我讀的過程中，一邊讀，一邊做習題。覺得對計算機的一些知識做了很好的儲備，比如說：計算機的儲存原理，整數以補碼的形式存，浮點數以餘碼的形式存，為什麼不用原碼的形式存，這樣做的好處有哪些？所以，這本書很值得一讀。在讀到一半的時候，讀到了HTTP相關的知識，所以，直接轉到了 HTTP 權威指南了。後面的演算法，作業系統章節，自己都準備好了對應的書籍。

深入理解計算機系統，很厚的一本書，沒有讀。之後會抽時間讀，現在時間安排的比較滿。

TCP/IP 協議 （卷一），這本書也特別厚，但是總覺得自己對TCP/IP 協議的理解不夠深刻，有時間會拜讀這本書。

資料結構與演算法 JavaSCript 描述，這本書只能作為我深入演算法和資料結構的開胃菜，全書也就不到 200 頁。還沒開始讀。

演算法導論，最厚的一本書，目測有 1000 頁左右。讓我很恐懼，同事跟我說，這本書比較生澀，但是自己還是買下來了。深入瞭解了 HTTP 和 TCP 之後，會把重心放在 資料結構和演算法 上。

瀏覽器核心的相關知識。

最近剛入手了一本書，叫 WebKit 技術內幕，是一本二手書，也是絕版書籍。我買過的最貴的一本書，要 200 多。翻了部分，自己非常喜歡。一個前端，怎麼能不對自己整天打交道的工具 瀏覽器 進行一次近距離的瞭解呢。之前有大概瞭解過瀏覽器的渲染原理，但是目前的一些教程不滿足自己的期望，深入的瞭解了這本書，自己對其中的原理和一些實踐有一些自己的見解，後期會以部落格的形式，以3到4篇到篇幅來詳細介紹一下，從輸入URL到頁面到渲染完成，到底發生了什麼。

學習資源

現在接觸的很多都是 英文的網站，無奈自己英語太差，最多能以龜速讀英文文章，視訊基本聽不懂，所以，準備苦練英語，沒這玩意不行啊。 這裡還是把我收藏的一些技術型網站或者部落格推薦出來。

學習網站

---

這些資源都是本人平日中學習進行逐漸收集到的，對本人的學習起到了很大的幫助作用。 這些只是自己在學習的過程中用到的，並且今後還會一直用到。

前端基礎知識

1. 首推 Frontend Master，光看到裡面的講師陣容，就吊起了我的興趣，不過該視訊是收費的，而且收費還不便宜，但是，優質的課程就值這個價不是嗎？買不起怎麼辦？看下面

2. 推薦 egghead，該網站很多視訊都是免費的，而且講師陣容也很強大，很多知名庫作者也都會在該網站做分享。如：Redux 的作者 Dan Abramov，所以，有一定的英語基礎的可以收下。

3. 慕課網中一些免費的課程，和付費的課程質量也是相當高的，筆者當初就在慕課網上花 699 元購得 Vue.js 原始碼全方位深入解析，使自己對 Vue.js 的理解更加深入了。

4. Vue 技術內幕，該網站是開源的，也是 Vue 作者推薦的原始碼分析的首選，作者分析的很有層次，自己對著原始碼看這個教程，可以很有條理的解讀原始碼，並且作者教會了我很多閱讀原始碼的技巧。

5. 湯姆大叔的深入理解JavaScript系列，個人最開始接觸到的技術部落格，對於 JavaScript 有著比較深入的分析。

6. 2018年你應該知道的 15個 JavaScript 實用程式庫，推薦了很多實用的 JavaScript 庫，比如：筆者喜歡的 Ramda，還有很有實用意義的 30 seconds of code，我在後者的 30 seconds of code 中學到了很多編寫函式的技巧。也通過該系列更加去深入了一些 JavaScript 中的高階函式的用法 如 reduce，filter等。雖然有中文翻譯，但是建議跟著 github 上學習，因為中文翻譯不會隨著原始碼更新。此外，還有其他等系列，如 CSS，React 都是相當不錯的。

7. codewar，這是站外的練習網站，語言和 task 都比較全面。可能需要翻牆。大家自行選擇。

8. leetcode，這是站內的專注於演算法的練習網站。大家可以斟酌選擇。

9. img標籤中，不為人知的事情，該文章是關於 img 標籤的一些隱藏的知識點，通過閱讀這篇文章，可以更加清晰的瞭解 img 標籤中一些知識。

網路相關知識

1. 車小胖技術部落格，這是關於網路方面的技術部落格，對網路對一些現象做了比較通透的解釋，本人比較喜歡。

2. 車小胖，這個是文章系列，介紹網路相關的知識。想深入瞭解可以去看一下。

3. 圖解基於 HTTPS 的 DNS，這是關於 dns 查詢到過程，配上插圖和文字到描述，可以對 dns 到查詢過程有一個大概到了解。

4. howdns.works，完全用插圖的形式來解釋了 dns 的工作方式，非常形象。

函數語言程式設計

1. functional light JavaScript，大神對輕量級的函數語言程式設計做了透徹的講解，英文原文，像我這樣英語不怎麼樣的，讀起來也不是很費力氣。我在讀的過程中對 非同步資料流的控制，還有管道流資料，curry化，反curry化，偏函式的應用，point-free，與之前相比有了更加深刻的見解了。

2. 關於函數語言程式設計的教程，這本電子教程，是一本很好的函數語言程式設計教程

3. 關於範疇論的系列文章，這是系列文章，文章的一些內容有點晦澀難懂，但是可以對函式式底層的抽象，有了更好的理解。

4. 趣學Haskell，為了更好的學習函數語言程式設計，我決定接觸 Haskell ，這篇教程由淺入深，在學習過程中，再對比下 Ramda 的官方教程，才有點體會 Ramda 這樣設計的原因。這條路不知道是不是有點偏了，但是，自己會利用其他時間來學習的。只是為了更好的理解。

5. 視覺化學習 Rx.js，以動畫的形式來展現 Rx.js，再也不需要那麼抽象的學習 Rx.js，此外，還有 redux 等，也有相應等展示。

瀏覽器相關的知識

1. WebKit技術內幕作者的部落格，很深入的講解了瀏覽器核心對相關知識。

2. Chorme瀏覽器的全面教程，系統的描述了Chrome瀏覽器的資訊，可以更加全面的瞭解Chrome瀏覽器，最給力的是所有的工具的使用介紹。

react相關

react相關的資源：前端時間從 vue 技術棧轉到 react 的過程還是很平穩的，因為對當前流行框架的背後思想已經有了自己的一些見解。所以，過渡很平穩，本著 不光要學會怎麼使用，還有透過本質理解背後的思想。這樣才能最大化的發揮框架的力量。

1. react官網，我覺得最好的學習方法就是接觸一手資源，官網應該精讀，而不是作為一個參考的網站。就比如說 react hooks。我就是在最新的官網瞭解的，英文讀起來不費勁。

2. react 小書，阮一峰老師的每週總結上看到的，這是我認為最開始學react，redux最好的教程，它不會教你怎麼運用這些知識，它通過背後的思想告訴你，redux 為什麼要有這個 API，沒有這個功能會怎麼樣，以及自己怎麼實現這樣的功能，通過精讀該教程，自己實現了一個簡單版本的 redux 和 react-redux，當然啦，背後的思想最重要。後面自己又去看了下 redux 和 react-redux 庫的官方實現，找出區別在哪，優化點有哪些，這些對於理解其背後的本質十分重要。

3. react-router，我直接學習的 V4 版本，該教程是英文的，但是程式碼居多，自己可以慢慢琢磨。

4. 大神呂思遠、張立理、唐一等 6 位作者的知乎，雖然現在知乎逛的比較少，但是，還是有很多高質量的文章的，自己在學習 react 的過程中，難免會遇到很多困惑，如：PureComponent 的優化效率到底有多高，元件的狀態 和 渲染是否應該都要分開，如何更高效的避免無意義的渲染，是否應該對元件進行更加細粒度的拆分。這些都應該在實踐中去尋找答案，然後解惑。

5. React In Depth，大神justjavac的專欄，深刻的去理解 react 中的一些思想，還是那句話，思想大於程式碼，好的思想值得我們去借鑑，我們使用一個框架，必須要先去了解其思想。

6. 進擊的react，大神 Morgan 的專欄，文章的內容很經典。

7. 國內React Fiber的佈道者，我是看了他很多的文章，才有了學習的思路，很好的指路人。

其他

1. 阮一峰老師的部落格，我就不列出來了，我們都應該經常去看一下。

2. 還有掘金上的文章也有好多，大家可以關注下我贊過的文章，我覺得質量都是很好的。

總結

這裡我想說的是，實踐要與理論並存，不能一味的看書，我的宗旨就是學以致用，我們應該善於思考和總結。學到的知識要思考如何更加有效的應用在實際專案中，筆者一般都是先看書，然後練習，成熟的方式會在實際專案中應用。如果大家有更好的方式，歡迎交流和學習。

以上是筆者目前自己遵循的學習方法，當然，學習的方式有很多種，筆者會不定期的更新，可能更新不會同步到掘金，我會在自己的GitHub pages上進行更新，歡迎大家關注並一起交流。如果有好的書籍或者學習方式的話，請推薦給我。感激不盡。

關於之後的計劃，筆者將會把更多的重心放在 react，http，演算法之上，同時，開始深入學習一些前端生態中的工具，如 node，webpack。