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

對于前端的學習和提高，我的基本思路是這樣的。首先，前端的三個最基本的東西 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 的必讀之作。書看起來比較厚，是因為里面的代碼很多。
• HTML5 Canvas 核心技術 ，如果你要做 HTML5 游戲的話，這本書必讀。

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

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

• SVG: Scalable Vector Graphics
• Canvas API
• The WebGL API: 2D and 3D graphics for the web

最后是幾個資源列表。

• Awesome HTML5 。GitHub 上的 Awesome HTML5，其中有大量的資源和技術文章。
• Awesome SVG
• Awesome Canvas
• Awesome WebGL

CSS

在《程序員練級攻略（2018）》系列文章最開始，我們就推薦過 CSS 的在線學習文檔，這里再推薦一下

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

之后，在寫 CSS 的時候，你會發現，你的 CSS 中有很多看起來相似的東西。你的 DRY - Don’t Repeat Yourself 潔癖告訴你，這是不對的。所以，你需要學會使用 LESS 和 SaSS

這兩個 CSS 預處理工具，其可以幫你提高很多效率。

然后，你需要學習一下 CSS 的書寫規范，前面的《程序員修養》一文中提到過一些，這里再補充幾個。

• Principles of writing consistent, idiomatic CSS
• Opinionated CSS styleguide for scalable applications
• Google HTML/CSS Style Guide

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

當然，在使用 CSS 之前，你需要把你瀏覽器中的一些 HTML 標簽給標準化掉。所以，推薦幾個 Reset 或標準化的 CSS 庫： Normalize 、 MiniRest.css 、 sanitize.css 和 unstyle.css 。

關于更多的 CSS 框架，你可以參看 Awesome CSS Frameworks

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

CodePen’s CSS

Github 的 CSS

Medium’s CSS is actually pretty f * ing good

CSS at BBC Sport

Refining The Way We Structure Our CSS At Trello

最后是一個可以寫出可擴展的 CSS 的閱讀列表 A Scalable CSS Reading List

JavaScript

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

• JavaScript: The Good Parts ，中文翻譯版為《JavaScript 語言精粹》。這是一本介紹 JavaScript 語言本質的權威圖書，值得任何正在或準備從事 JavaScript 開發的人閱讀，并且需要反復閱讀。學習、理解、實踐大師的思想，我們才可能站在巨人的肩上，才有機會超越大師，這本書就是開始。
• Secrets of the JavaScript Ninja ，中文翻譯版為《JavaScript 忍者秘籍》，本書是 jQuery 庫創始人編寫的一本深入剖析 JavaScript 語言的書。適合具備一定 JavaScript 基礎知識的讀者閱讀，也適合從事程序設計工作并想要深入探索 JavaScript 語言的讀者閱讀。這本書有很多晦澀難懂的地方，需要仔細閱讀，反復琢磨。
• Effective JavaScript ，Ecma 的 JavaScript 標準化委員會著名專家撰寫，作者憑借多年標準化委員會工作和實踐經驗，深刻辨析 JavaScript 的內部運作機制、特性、陷阱和編程最佳實踐，將它們高度濃縮為極具實踐指導意義的 68 條精華建議。
• 接下來是 ES6 的學習，這里給三個學習手冊源。
• ES6 in Depth ，InfoQ 上有相關的中文版 - ES6 深入淺出 。還可以看看 A simple interactive ES6 Feature list ，或是看一下 阮一峰翻譯的 ES6 的教程 。
• ECMAScript 6 Tools ，這是一堆 ES6 工具的列表，可以幫助你提高開發效率。
• Modern JS Cheatsheet ，這個 Cheatsheet 在 GitHub 上有 1 萬 6 千顆星，你就可見其影響力了。
• 然后，還有一組很不錯的《 You Don’t Know JS 系列 》 的書。
• You Don’t Know JS: “Up & Going”
• You Don’t Know JS: “Scope & Closures”
• You Don’t Know JS: “this & Object Prototypes”
• You Don’t Know JS: “ES6 & Beyond”
• 接下來是一些和編程范式相關的文章。
• Glossary of Modern JavaScript Concepts: Part 1 ，首先推薦這篇文章，其中收集了一些編程范式方面的內容，比如純函數、狀態、可變性和不可變性、指令型語言和聲明式語言、函數式編程、響應式編程、函數式響應編程。
• Glossary of Modern JavaScript Concepts: Part 2 ，在第二部分中主要討論了作用域和閉包，數據流，變更檢測，組件化……
• 下面三篇文章是德米特里·索什尼科夫（Dmitry Soshnikov）個人網站上三篇講 JavaScript 內在的文章。
• JavaScript. The Core: 2nd Edition
• JavaScript. The Core (older ES3 version)
• JS scope: static, dynamic, and runtime-augmented
• How JavaScript Works” 是一組非常不錯的文章（可能還沒有寫完），強烈推薦。這一系列的文章是 SessionStake 的 CEO 寫的，現在有 13 篇，我感覺可能還沒有寫完。這個叫 亞歷山大·茲拉特科夫（Alexander Zlatkov） 的 CEO 太猛了。
• An overview of the engine, the runtime, and the call stack
• Inside the V8 engine + 5 tips on how to write optimized code ，了解 V8 引擎。這里，也推薦 Understanding V8’s Bytecode 這篇文章可以讓你了解 V8 引擎的底層字節碼。
• Memory management + how to handle 4 common memory leaks ，內存管理和 4 種常見的內存泄露問題。
• Event loop and the rise of Async programming + 5 ways to better coding with async/await ，Event Loop 和異步編程。
• Deep dive into WebSockets and HTTP/2 with SSE + how to pick the right path ，WebSocket 和 HTTP/2。
• A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript ，JavaScript 內在原理。
• The building blocks of Web Workers + 5 cases when you should use them ，Web Workers 技術。
• Service Workers, their lifecycle and use cases ，Service Worker 技術。
• The mechanics of Web Push Notifications ，Web 端 Push 通知技術。
• Tracking changes in the DOM using MutationObserver ，Mutation Observer 技術。
• The rendering engine and tips to optimize its performance ，渲染引擎和性能優化。
• Inside the Networking Layer + How to Optimize Its Performance and Security ，網絡性能和安全相關。
• Under the hood of CSS and JS animations + how to optimize their performance ，CSS 和 JavaScript 動畫性能優化。
• 接下來是 Google Chrome 工程經理 阿迪·奧斯馬尼（Addy Osmani） 的幾篇 JavaScript 性能相關的文章，也是非常好的。
• The Cost Of JavaScript
• JavaScript Start-up Performance
• 其它與 JavaScript 相關的資源。
• JavScript has Unicode Problem ，這是一篇很有價值的 JavaScript 處理 Unicode 的文章。
• JavaScript Algorithms ，用 JavaScript 實現的各種基礎算法庫。
• JavaScript 30 秒代碼 ，一堆你可以在 30 秒內看懂各種有用的 JavaScript 的代碼，在 GitHub 上有 2 萬顆星了。
• What the f*ck JavaScript ，一堆 JavaScript 搞笑和比較 tricky 的樣例。
• Airbnb JavaScript Style Guide ，Airbnb 的 JavaScript 的代碼規范，GitHub 上有 7 萬多顆星。
• JavaScript Patterns for 2017 ，YouTube 上的一個 JavaScript 模式分享，值得一看。

瀏覽器原理

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

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

• How to write your own Virtual DOM
• Write your Virtual DOM 2: Props & Events
• How Virtual-DOM and diffing works in React
• The Inner Workings Of Virtual DOM
• 深度剖析：如何實現一個 Virtual DOM 算法
• 以及兩個 Vitual-DOM 實現供你參考：
• Matt-Esch/Virtual-DOM
• Maquette

網絡協議

• High Performance Browser Networking
• ，本書是谷歌公司高性能團隊核心成員的權威之作，堪稱實戰經驗與規范解讀完美結合的產物。本書目標是涵蓋 Web 開發者技術體系中應該掌握的所有網絡及性能優化知識。
• 全書以性能優化為主線，從 TCP、UDP 和 TLS 協議講起，解釋了如何針對這幾種協議和基礎設施來優化應用。然后深入探討了無線和移動網絡的工作機制。最后，揭示了 HTTP 協議的底層細節，同時詳細介紹了 HTTP 2.0、 XHR、SSE、WebSocket、WebRTC 和 DataChannel 等現代瀏覽器新增的能力。
• 另外， HTTP/2 也是 HTTP 的一個新的協議，于 2015 年被批準通過，現在基本上所有的主流瀏覽器都默認啟用這個協議。所以，你有必要學習一下這個協議。下面相關的學習資源。
• Gitbook - HTTP/2 詳解
• http2 explained （ 中譯版 ）
• HTTP/2 for a Faster Web
• HTTP/2 的兩個 RFC：
• RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) ，HTTP/2 的協議本身。
• RFC 7541 - HPACK: Header Compression for HTTP/2 RFC 7541 - HPACK: Header Compression for HTTP/2
• 新的 HTML5 支持 WebSocket ，所以，這也是你要學的一個重要協議。
• HTML5 WebSocket: A Quantum Leap in Scalability for the Web ，這篇文章比較了 HTTP 的幾種鏈接方式，Polling、Long Polling 和 Streaming，并引入了終級解決方案 WebSocket。你知道的，了解一個技術的緣由是非常重要的。
• StackOverflow: My Understanding of HTTP Polling, Long Polling, HTTP Streaming and WebSockets ，這是 StackOverflow 上的一個 HTTP 各種鏈接方式的比較，也可以讓你有所認識。
• An introduction to Websockets ，一個 WebSocket 的簡單教程。
• Awesome Websockets ，GitHub 的 Awesome 資源列表。
• 一些和 WebSocket 相關的想法，可以開闊你的思路：
• Introducing WebSockets: Bringing Sockets to the Web
• Websockets 101
• Real-Time Web by Paul Banks
• Are WebSockets the future?

小結

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

TML5逐漸成為網絡搭建的主流語言。隨著移動網絡的快速發展，HTML5的應用范圍和發展速度也越來越快，并且企業也越來越重視HTML5的開發人才。HTML5雖然興起時間不長，但是發展勢頭卻無比迅猛，因此學習HTML5的人逐漸增多。

小編為各位想要學習HTML5的人士做簡單介紹。

1.HTML5學習難度大嗎？HTML5好學嗎？

首先我們需要知道，要想成為HTML5工程師，需要學哪些東西。像HTML。XHTML。CSS3。JavaScript。JQuery(JQuery-UI、JQuery-Mobile)，這些軟件，都是基礎，是必須要學會，沒得捷徑可走，只能自己慢慢練習，直至精通。

綜上所述，要成為一名優秀的高薪HTML5工程師，是需要學不少東西的。但是也不要覺得這門技術很難學。其實入門還是很簡單的，只要你肯多動手練習，再加上科學的學習方式以及專業老師的輔導，學HTML5是不難的哦!

HTML5應用的最大優勢就是可以在網頁上直接調試和修改，為桌面和移動平臺帶來無縫銜接的豐富內容，這就使得HTML5技術迅速風靡全球。