這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》,我整理出來是為了自己方便學習，同時也分享給你們一起學習，當然如果有興趣，可以去訂閱，為了避免廣告嫌疑，我這就不多說了！以下第一人稱是指陳皓老師。

對於前端的學習和提高，我的基本思路是這樣的。首先，前端的三個最基本的東西 HTML5、CSS3 和 JavaScript（ES6）是必須要學好的。這其中有很多很多的技術，比如，CSS3 引申出來的 Canvas（點陣圖）、SVG（向量圖） 和 WebGL（3D 圖），以及 CSS 的各種圖形變換可以讓你做出非常豐富的渲染效果和動畫效果。

ES6 簡直就是把 JavaScript 帶到了一個新的臺階，JavaScript 語言的強大，大大釋放了前端開發人員的生產力，讓前端得以開發更為複雜的程式碼和程式，於是像 React 和 Vue 這樣的框架開始成為前端程式設計的不二之選。

我一直認為學習任何知識都要從基礎出發，所以我會有很大的篇幅在講各種技術的基礎知識和基本原理，尤其是如下的這些知識，都是前端程式設計師需要一塊一塊啃掉的硬骨頭。

• JavaScript 的核心原理。這裡我會給出好些網上很不錯的講 JavaScript 的原理的文章或圖書，你一定要學好語言的特性和其中的各種坑。
• 瀏覽器的工作原理。這也是一塊硬骨頭，我覺得這是前端程式設計師需要了解和明白的東西，不然，你將無法深入下去。
• 網路協議 HTTP。也是要著重瞭解的，尤其是 HTTP/2，還有 HTTP 的幾種請求方式：短連線、長連線、Stream 連線、WebSocket 連線。
• 前端效能調優。有了以上的這些基礎後，你就可以進入前端效能調優的主題了，我相信你可以很容易上手各種效能調優技術的。
• 框架學習。我只給了 React 和 Vue 兩個框架。就這兩個框架來說，Virtual DOM 技術是其底層技術，元件化是其思想，管理元件的狀態是其重點。而對於 React 來說，函數語言程式設計又是其程式設計思想，所以，這些基礎技術都是你需要好好研究和學習的。
• UI 設計。設計也是前端需要做的一個事，比如像 Google 的 Material UI，或是比較流行的 Atomic Design 等應該是前端工程師需要學習的。

而對於工具類的東西，這裡我基本沒怎麼涉及，因為本文主要還是從原理和基礎入手。那些工具我覺得都很簡單，就像學習 Java 我沒有讓你去學習 Maven 一樣，因為只要你去動手了，這種知識你自然就會獲得，我們還是把精力重點放在更重要的地方。

下面我們從前端基礎和底層原理開始講起。先來講講 HTML5 相關的內容。

HTML5

• HTML5 權威指南 ，本書面向初學者和中等水平 Web 開發人員，是牢固掌握 HTML5、CSS3 和 JavaScript 的必讀之作。書看起來比較厚，是因為裡面的程式碼很多。

對於 SVG、Canvas 和 WebGL 這三個對應於向量圖、點陣圖和 3D 圖的渲染來說，給前端開發帶來了重武器，很多 HTML5 小遊戲也因此蓬勃發展。所以，你可以學習一下。

學習這三個技術，我個人覺得最好的地方是 MDN。

最後是幾個資源列表。

CSS

在《程式設計師練級攻略（2018）》系列文章最開始，我們就推薦過 CSS 的線上學習文件，這裡再推薦一下

MDN Web Doc - CSS 。我個人覺得只要你仔細讀一下文件，CSS 並不難學。絕大多數覺得難的，一方面是文件沒讀透，另一方面是瀏覽器支援的標準不一致。所以，學好 CSS 最關鍵的還是要仔細地讀文件。

之後，在寫 CSS 的時候，你會發現，你的 CSS 中有很多看起來相似的東西。你的 DRY - Don’t Repeat Yourself 潔癖告訴你，這是不對的。所以，你需要學會使用 LESS 和 SaSS
這兩個 CSS 預處理工具，其可以幫你提高很多效率。

然後，你需要學習一下 CSS 的書寫規範，前面的《程式設計師修養》一文中提到過一些，這裡再補充幾個。

如果你需要更有效率，那麼你還需要使用一些 CSS Framework，其中最著名的就是 Twitter 公司的 Bootstrap，其有很多不錯的 UI 元件，頁面佈局方案，可以讓你非常方便也非常快速地開發頁面。除此之外，還有，主打清新 UI 的 Semantic UI 、主打響應式介面的 Foundation 和基於 Flexbox 的 Bulma。

接下來，是幾個公司的 CSS 相關實踐，供你參考。

JavaScript

下面是學習 JavaScript 的一些圖書和文章。

瀏覽器原理

你需要了解一下瀏覽器是怎麼工作的，所以，你必需要看《How browsers work》。這篇文章受眾之大，後來被人重新整理併發布為《How Browsers Work: Behind the scenes of modern web browsers》，其中還包括中文版。這篇文章非常非常長，所以，你要有耐心看完。如果你想看個精簡版的，可以看我在 Coolshell 上發的《瀏覽器的渲染原理簡介》或是看一下這個幻燈片。

然後，是對 Virtual DOM 的學習。Virtual DOM 是 React 的一個非常核心的技術細節，它也是前端渲染和效能的關鍵技術。所以，你有必要要好好學習一下這個技術的實現原理和演算法。當然，前提條件是你需要學習過前面我所推薦過的瀏覽器的工作原理。下面是一些不錯的文章可以幫你學習這一技術。

網路協議

小結

總結一下今天的內容。我一直認為學習任何知識都要從基礎出發，所以今天我主要講述了 HTML5、CSS3 和 JavaScript（ES6）這三大基礎核心，給出了大量的圖書、文章以及其他一些相關的學習資源。之後，我建議你學習瀏覽器的工作原理和網路協議相關的內容。我認為，掌握這些原理也是學好前端知識的前提和基礎。值得花時間，好好學習消化。

你們的點贊是我持續分享好東西的動力，歡迎點贊！

一個笨笨的碼農，我的世界只能終身學習！