這個(gè)是我訂閱 陳皓老師在極客上的專欄 《左耳聽風(fēng)》 ,我整理出來是為了自己方便學(xué)習(xí)，同時(shí)也分享給你們一起學(xué)習(xí)，當(dāng)然如果有興趣，可以去訂閱，為了避免廣告嫌疑，我這就不多說了！以下第一人稱是指陳皓老師。
對于前端的學(xué)習(xí)和提高，我的基本思路是這樣的。首先，前端的三個(gè)最基本的東西 HTML5、CSS3 和 JavaScript（ES6）是必須要學(xué)好的。這其中有很多很多的技術(shù)，比如，CSS3 引申出來的 Canvas（位圖）、SVG（矢量圖） 和 WebGL（3D 圖），以及 CSS 的各種圖形變換可以讓你做出非常豐富的渲染效果和動畫效果。
ES6 簡直就是把 JavaScript 帶到了一個(gè)新的臺階，JavaScript 語言的強(qiáng)大，大大釋放了前端開發(fā)人員的生產(chǎn)力，讓前端得以開發(fā)更為復(fù)雜的代碼和程序，于是像 React 和 Vue 這樣的框架開始成為前端編程的不二之選。
我一直認(rèn)為學(xué)習(xí)任何知識都要從基礎(chǔ)出發(fā)，所以我會有很大的篇幅在講各種技術(shù)的基礎(chǔ)知識和基本原理，尤其是如下的這些知識，都是前端程序員需要一塊一塊啃掉的硬骨頭。
- JavaScript 的核心原理 。這里我會給出好些網(wǎng)上很不錯(cuò)的講 JavaScript 的原理的文章或圖書，你一定要學(xué)好語言的特性和其中的各種坑。
- 瀏覽器的工作原理 。這也是一塊硬骨頭，我覺得這是前端程序員需要了解和明白的東西，不然，你將無法深入下去。
- 網(wǎng)絡(luò)協(xié)議 HTTP 。也是要著重了解的，尤其是 HTTP/2，還有 HTTP 的幾種請求方式：短連接、長連接、Stream 連接、WebSocket 連接。
- 前端性能調(diào)優(yōu) 。有了以上的這些基礎(chǔ)后，你就可以進(jìn)入前端性能調(diào)優(yōu)的主題了，我相信你可以很容易上手各種性能調(diào)優(yōu)技術(shù)的。
- 框架學(xué)習(xí) 。我只給了 React 和 Vue 兩個(gè)框架。就這兩個(gè)框架來說，Virtual DOM 技術(shù)是其底層技術(shù)，組件化是其思想，管理組件的狀態(tài)是其重點(diǎn)。而對于 React 來說，函數(shù)式編程又是其編程思想，所以，這些基礎(chǔ)技術(shù)都是你需要好好研究和學(xué)習(xí)的。
- UI 設(shè)計(jì) 。設(shè)計(jì)也是前端需要做的一個(gè)事，比如像 Google 的 Material UI，或是比較流行的 Atomic Design 等應(yīng)該是前端工程師需要學(xué)習(xí)的。
而對于工具類的東西，這里我基本沒怎么涉及，因?yàn)楸疚闹饕€是從原理和基礎(chǔ)入手。那些工具我覺得都很簡單，就像學(xué)習(xí) Java 沒有讓我們?nèi)W(xué)習(xí) Maven 一樣，因?yàn)橹灰覀內(nèi)邮至耍@種知識我們自然就會獲得，我們還是把精力重點(diǎn)放在更重要的地方。
下面我們從前端基礎(chǔ)和底層原理開始講起。先來講講 HTML5 相關(guān)的內(nèi)容。
HTML5
- HTML5 權(quán)威指南 ，本書面向初學(xué)者和中等水平 Web 開發(fā)人員，是牢固掌握 HTML5、CSS3 和 JavaScript 的必讀之作。書看起來比較厚，是因?yàn)槔锩娴拇a很多。
- HTML5 Canvas 核心技術(shù) ，如果你要做 HTML5 游戲的話，這本書必讀。
對于 SVG、Canvas 和 WebGL 這三個(gè)對應(yīng)于矢量圖、位圖和 3D 圖的渲染來說，給前端開發(fā)帶來了重武器，很多 HTML5 小游戲也因此蓬勃發(fā)展。所以，你可以學(xué)習(xí)一下。
學(xué)習(xí)這三個(gè)技術(shù)，我個(gè)人覺得最好的地方是 MDN。
- SVG: Scalable Vector Graphics
- Canvas API
- The WebGL API: 2D and 3D graphics for the web
最后是幾個(gè)資源列表。
- Awesome HTML5 。GitHub 上的 Awesome HTML5，其中有大量的資源和技術(shù)文章。
- Awesome SVG
- Awesome Canvas
- Awesome WebGL
CSS
在《程序員練級攻略（2018）》系列文章最開始，我們就推薦過 CSS 的在線學(xué)習(xí)文檔，這里再推薦一下
MDN Web Doc - CSS 。我個(gè)人覺得只要你仔細(xì)讀一下文檔，CSS 并不難學(xué)。絕大多數(shù)覺得難的，一方面是文檔沒讀透，另一方面是瀏覽器支持的標(biāo)準(zhǔn)不一致。所以，學(xué)好 CSS 最關(guān)鍵的還是要仔細(xì)地讀文檔。
之后，在寫 CSS 的時(shí)候，你會發(fā)現(xiàn)，你的 CSS 中有很多看起來相似的東西。你的 DRY - Don’t Repeat Yourself 潔癖告訴你，這是不對的。所以，你需要學(xué)會使用 LESS 和 SaSS
這兩個(gè) CSS 預(yù)處理工具，其可以幫你提高很多效率。
然后，你需要學(xué)習(xí)一下 CSS 的書寫規(guī)范，前面的《程序員修養(yǎng)》一文中提到過一些，這里再補(bǔ)充幾個(gè)。
- Principles of writing consistent, idiomatic CSS
- Opinionated CSS styleguide for scalable applications
- Google HTML/CSS Style Guide
如果你需要更有效率，那么你還需要使用一些 CSS Framework，其中最著名的就是 Twitter 公司的 Bootstrap ，其有很多不錯(cuò)的 UI 組件，頁面布局方案，可以讓你非常方便也非常快速地開發(fā)頁面。除此之外，還有，主打清新 UI 的 Semantic UI 、主打響應(yīng)式界面的 Foundation 和基于 Flexbox 的 Bulma 。
當(dāng)然，在使用 CSS 之前，你需要把你瀏覽器中的一些 HTML 標(biāo)簽給標(biāo)準(zhǔn)化掉。所以，推薦幾個(gè) Reset 或標(biāo)準(zhǔn)化的 CSS 庫： Normalize 、 MiniRest.css 、 sanitize.css 和 unstyle.css 。
關(guān)于更多的 CSS 框架，你可以參看 Awesome CSS Frameworks
接下來，是幾個(gè)公司的 CSS 相關(guān)實(shí)踐，供參考。
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
最后是一個(gè)可以寫出可擴(kuò)展的 CSS 的閱讀列表 A Scalable CSS Reading List
JavaScript
下面是學(xué)習(xí) JavaScript 的一些圖書和文章。
- JavaScript: The Good Parts ，中文翻譯版為《JavaScript 語言精粹》。這是一本介紹 JavaScript 語言本質(zhì)的權(quán)威圖書，值得任何正在或準(zhǔn)備從事 JavaScript 開發(fā)的人閱讀，并且需要反復(fù)閱讀。學(xué)習(xí)、理解、實(shí)踐大師的思想，我們才可能站在巨人的肩上，才有機(jī)會超越大師，這本書就是開始。
- Secrets of the JavaScript Ninja ，中文翻譯版為《JavaScript 忍者秘籍》，本書是 jQuery 庫創(chuàng)始人編寫的一本深入剖析 JavaScript 語言的書。適合具備一定 JavaScript 基礎(chǔ)知識的讀者閱讀，也適合從事程序設(shè)計(jì)工作并想要深入探索 JavaScript 語言的讀者閱讀。這本書有很多晦澀難懂的地方，需要仔細(xì)閱讀，反復(fù)琢磨。
- Effective JavaScript ，Ecma 的 JavaScript 標(biāo)準(zhǔn)化委員會著名專家撰寫，作者憑借多年標(biāo)準(zhǔn)化委員會工作和實(shí)踐經(jīng)驗(yàn)，深刻辨析 JavaScript 的內(nèi)部運(yùn)作機(jī)制、特性、陷阱和編程最佳實(shí)踐，將它們高度濃縮為極具實(shí)踐指導(dǎo)意義的 68 條精華建議。
- 接下來是 ES6 的學(xué)習(xí)，這里給三個(gè)學(xué)習(xí)手冊源。
- ES6 in Depth ，InfoQ 上有相關(guān)的中文版 - ES6 深入淺出 。還可以看看 A simple interactive ES6 Feature list ，或是看一下 阮一峰翻譯的 ES6 的教程 。
- ECMAScript 6 Tools ，這是一堆 ES6 工具的列表，可以幫助你提高開發(fā)效率。
- Modern JS Cheatsheet ，這個(gè) Cheatsheet 在 GitHub 上有 1 萬 6 千顆星，你就可見其影響力了。
- 然后，還有一組很不錯(cuò)的《 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”
- 接下來是一些和編程范式相關(guān)的文章。
- Glossary of Modern JavaScript Concepts: Part 1 ，首先推薦這篇文章，其中收集了一些編程范式方面的內(nèi)容，比如純函數(shù)、狀態(tài)、可變性和不可變性、指令型語言和聲明式語言、函數(shù)式編程、響應(yīng)式編程、函數(shù)式響應(yīng)編程。
- Glossary of Modern JavaScript Concepts: Part 2 ，在第二部分中主要討論了作用域和閉包，數(shù)據(jù)流，變更檢測，組件化……
- 下面三篇文章是德米特里·索什尼科夫（Dmitry Soshnikov）個(gè)人網(wǎng)站上三篇講 JavaScript 內(nèi)在的文章。
- JavaScript. The Core: 2nd Edition
- JavaScript. The Core (older ES3 version)
- JS scope: static, dynamic, and runtime-augmented
- How JavaScript Works” 是一組非常不錯(cuò)的文章（可能還沒有寫完），強(qiáng)烈推薦。這一系列的文章是 SessionStake 的 CEO 寫的，現(xiàn)在有 13 篇，我感覺可能還沒有寫完。這個(gè)叫 亞歷山大·茲拉特科夫（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 引擎的底層字節(jié)碼。
- Memory management + how to handle 4 common memory leaks ，內(nèi)存管理和 4 種常見的內(nèi)存泄露問題。
- 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 內(nèi)在原理。
- The building blocks of Web Workers + 5 cases when you should use them ，Web Workers 技術(shù)。
- Service Workers, their lifecycle and use cases ，Service Worker 技術(shù)。
- The mechanics of Web Push Notifications ，Web 端 Push 通知技術(shù)。
- Tracking changes in the DOM using MutationObserver ，Mutation Observer 技術(shù)。
- The rendering engine and tips to optimize its performance ，渲染引擎和性能優(yōu)化。
- Inside the Networking Layer + How to Optimize Its Performance and Security ，網(wǎng)絡(luò)性能和安全相關(guān)。
- Under the hood of CSS and JS animations + how to optimize their performance ，CSS 和 JavaScript 動畫性能優(yōu)化。
- 接下來是 Google Chrome 工程經(jīng)理 阿迪·奧斯馬尼（Addy Osmani） 的幾篇 JavaScript 性能相關(guān)的文章，也是非常好的。
- The Cost Of JavaScript
- JavaScript Start-up Performance
- 其它與 JavaScript 相關(guān)的資源。
- JavScript has Unicode Problem ，這是一篇很有價(jià)值的 JavaScript 處理 Unicode 的文章。
- JavaScript Algorithms ，用 JavaScript 實(shí)現(xiàn)的各種基礎(chǔ)算法庫。
- JavaScript 30 秒代碼 ，一堆你可以在 30 秒內(nèi)看懂各種有用的 JavaScript 的代碼，在 GitHub 上有 2 萬顆星了。
- What the f*ck JavaScript ，一堆 JavaScript 搞笑和比較 tricky 的樣例。
- Airbnb JavaScript Style Guide ，Airbnb 的 JavaScript 的代碼規(guī)范，GitHub 上有 7 萬多顆星。
- JavaScript Patterns for 2017 ，YouTube 上的一個(gè) JavaScript 模式分享，值得一看。
瀏覽器原理
你需要了解一下瀏覽器是怎么工作的，所以，你必需要看《 How browsers work 》。這篇文章受眾之大，后來被人重新整理并發(fā)布為《 How Browsers Work: Behind the scenes of modern web browsers》，其中還包括中文版。這篇文章非常非常長，所以，你要有耐心看完。如果你想看個(gè)精簡版的，可以看我在 Coolshell 上發(fā)的《 瀏覽器的渲染原理簡介 》或是看一下 這個(gè)幻燈片 。
然后，是對 Virtual DOM 的學(xué)習(xí)。Virtual DOM 是 React 的一個(gè)非常核心的技術(shù)細(xì)節(jié)，它也是前端渲染和性能的關(guān)鍵技術(shù)。所以，你有必要要好好學(xué)習(xí)一下這個(gè)技術(shù)的實(shí)現(xiàn)原理和算法。當(dāng)然，前提條件是你需要學(xué)習(xí)過前面我所推薦過的瀏覽器的工作原理。下面是一些不錯(cuò)的文章可以幫你學(xué)習(xí)這一技術(shù)。
- 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
- 深度剖析：如何實(shí)現(xiàn)一個(gè) Virtual DOM 算法
- 以及兩個(gè) Vitual-DOM 實(shí)現(xiàn)供你參考：
- Matt-Esch/Virtual-DOM
- Maquette
網(wǎng)絡(luò)協(xié)議
- High Performance Browser Networking
- ，本書是谷歌公司高性能團(tuán)隊(duì)核心成員的權(quán)威之作，堪稱實(shí)戰(zhàn)經(jīng)驗(yàn)與規(guī)范解讀完美結(jié)合的產(chǎn)物。本書目標(biāo)是涵蓋 Web 開發(fā)者技術(shù)體系中應(yīng)該掌握的所有網(wǎng)絡(luò)及性能優(yōu)化知識。
- 全書以性能優(yōu)化為主線，從 TCP、UDP 和 TLS 協(xié)議講起，解釋了如何針對這幾種協(xié)議和基礎(chǔ)設(shè)施來優(yōu)化應(yīng)用。然后深入探討了無線和移動網(wǎng)絡(luò)的工作機(jī)制。最后，揭示了 HTTP 協(xié)議的底層細(xì)節(jié)，同時(shí)詳細(xì)介紹了 HTTP 2.0、 XHR、SSE、WebSocket、WebRTC 和 DataChannel 等現(xiàn)代瀏覽器新增的能力。
- 另外， HTTP/2 也是 HTTP 的一個(gè)新的協(xié)議，于 2015 年被批準(zhǔn)通過，現(xiàn)在基本上所有的主流瀏覽器都默認(rèn)啟用這個(gè)協(xié)議。所以，你有必要學(xué)習(xí)一下這個(gè)協(xié)議。下面相關(guān)的學(xué)習(xí)資源。
- Gitbook - HTTP/2 詳解
- http2 explained （ 中譯版 ）
- HTTP/2 for a Faster Web
- HTTP/2 的兩個(gè) RFC：
- RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) ，HTTP/2 的協(xié)議本身。
- RFC 7541 - HPACK: Header Compression for HTTP/2 RFC 7541 - HPACK: Header Compression for HTTP/2
- 新的 HTML5 支持 WebSocket ，所以，這也是你要學(xué)的一個(gè)重要協(xié)議。
- HTML5 WebSocket: A Quantum Leap in Scalability for the Web ，這篇文章比較了 HTTP 的幾種鏈接方式，Polling、Long Polling 和 Streaming，并引入了終級解決方案 WebSocket。你知道的，了解一個(gè)技術(shù)的緣由是非常重要的。
- StackOverflow: My Understanding of HTTP Polling, Long Polling, HTTP Streaming and WebSockets ，這是 StackOverflow 上的一個(gè) HTTP 各種鏈接方式的比較，也可以讓你有所認(rèn)識。
- An introduction to Websockets ，一個(gè) WebSocket 的簡單教程。
- Awesome Websockets ，GitHub 的 Awesome 資源列表。
- 一些和 WebSocket 相關(guān)的想法，可以開闊你的思路：
- Introducing WebSockets: Bringing Sockets to the Web
- Websockets 101
- Real-Time Web by Paul Banks
- Are WebSockets the future?
小結(jié)
總結(jié)一下今天的內(nèi)容。我一直認(rèn)為學(xué)習(xí)任何知識都要從基礎(chǔ)出發(fā)，所以今天我主要講述了 HTML5、CSS3 和 JavaScript（ES6）這三大基礎(chǔ)核心，給出了大量的圖書、文章以及其他一些相關(guān)的學(xué)習(xí)資源。之后，我建議學(xué)習(xí)瀏覽器的工作原理和網(wǎng)絡(luò)協(xié)議相關(guān)的內(nèi)容。我認(rèn)為，掌握這些原理也是學(xué)好前端知識的前提和基礎(chǔ)。值得花時(shí)間，好好學(xué)習(xí)消化。
TML5逐漸成為網(wǎng)絡(luò)搭建的主流語言。隨著移動網(wǎng)絡(luò)的快速發(fā)展，HTML5的應(yīng)用范圍和發(fā)展速度也越來越快，并且企業(yè)也越來越重視HTML5的開發(fā)人才。HTML5雖然興起時(shí)間不長，但是發(fā)展勢頭卻無比迅猛，因此學(xué)習(xí)HTML5的人逐漸增多。
小編為各位想要學(xué)習(xí)HTML5的人士做簡單介紹。
1.HTML5學(xué)習(xí)難度大嗎？HTML5好學(xué)嗎？
首先我們需要知道，要想成為HTML5工程師，需要學(xué)哪些東西。像HTML。XHTML。CSS3。JavaScript。JQuery(JQuery-UI、JQuery-Mobile)，這些軟件，都是基礎(chǔ)，是必須要學(xué)會，沒得捷徑可走，只能自己慢慢練習(xí)，直至精通。
綜上所述，要成為一名優(yōu)秀的高薪HTML5工程師，是需要學(xué)不少東西的。但是也不要覺得這門技術(shù)很難學(xué)。其實(shí)入門還是很簡單的，只要你肯多動手練習(xí)，再加上科學(xué)的學(xué)習(xí)方式以及專業(yè)老師的輔導(dǎo)，學(xué)HTML5是不難的哦!
HTML5應(yīng)用的最大優(yōu)勢就是可以在網(wǎng)頁上直接調(diào)試和修改，為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容，這就使得HTML5技術(shù)迅速風(fēng)靡全球。
eb前端開發(fā)是現(xiàn)在互聯(lián)網(wǎng)行業(yè)中的一個(gè)熱門職位，對于想要進(jìn)入IT行業(yè)的小白來講，最疑惑的就是這門技術(shù)好不好學(xué)、我能不能學(xué)會、怎么學(xué)才能入門找到工作這些問題。優(yōu)妹兒總結(jié)了一篇關(guān)于Web前端如何學(xué)習(xí)，怎么入門找工作的文章，幫助小伙伴們答疑解惑。
隨著CSS、JavaScript、Flash等技術(shù)的發(fā)展，Web對于各類應(yīng)用的處理能力逐漸增強(qiáng)，用戶瀏覽網(wǎng)頁的體驗(yàn)已經(jīng)有了較大的改善。在企業(yè)中發(fā)揮著越來越重要的作用，Web前端廣闊的發(fā)展前景吸引了很多人想要投身其中。
Web前端開發(fā)工程師是近些年才開始受到重視的一個(gè)新興職業(yè)，前端開發(fā)是創(chuàng)建Web頁面或APP等前端界面呈現(xiàn)給用戶的過程，通過HTML、CSS、JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互 。
Web前端開發(fā)好不好學(xué)
相較于其它編程類技術(shù)，前端開發(fā)是最易學(xué)的一門技術(shù)。可以這么理解，Web前端開發(fā)技術(shù)是一個(gè)先易后難的過程，它主要包括三個(gè)大的技術(shù)架構(gòu)是：HTML、CSS、JavaScript。
HTML是一種超文本標(biāo)記語言，就是結(jié)構(gòu)標(biāo)簽，并不會涉及到復(fù)雜高深的技術(shù)邏輯，更多時(shí)候是需要牢記、背下來一些標(biāo)簽的作用。所以這個(gè)學(xué)習(xí)階段主要考驗(yàn)的是記憶力，如果記憶力不好也沒關(guān)系，可以多記筆記，需要用到什么功能的時(shí)候看筆記就可以，時(shí)間長了代碼練習(xí)多了自然就記住了。
CSS的學(xué)習(xí)方式和HTML大同小異，它的作用是樣式配置，更多時(shí)候也是一個(gè)死記硬背的過程，不涉及太復(fù)雜的邏輯。
比較有難度的是學(xué)習(xí)JavaScript的過程，這個(gè)階段需要接觸到很多復(fù)雜的邏輯。HTML和CSS需要互相結(jié)合學(xué)習(xí)，只學(xué)習(xí)這兩個(gè)只能展現(xiàn)一個(gè)靜態(tài)界面，如果想要增加動態(tài)的效果就必須要學(xué)習(xí)JavaScript。靜態(tài)頁面是比較容易就可以實(shí)現(xiàn)的，功能全面的動態(tài)頁面需要很多復(fù)雜邏輯技術(shù)的支撐，JavaScrip就是實(shí)現(xiàn)這些功能的主要技術(shù)。
Web前端技術(shù)相較于時(shí)下流行的編程語言如：Java、Python、C、C++、C# 等來講，是最容易學(xué)習(xí)的，也是最容易入門找工作的。但是想要達(dá)到高級前端開發(fā)工程的水準(zhǔn)，并不是一件容易的事，需要在工作崗位上很多年不間斷的學(xué)習(xí)新技術(shù)，付出很大努力才行。
總結(jié)：Web前端開發(fā)入門階段的學(xué)習(xí)并不難，難的是想要精通這門技術(shù)。如果你想以比較容易學(xué)習(xí)的技術(shù)入門找工作，建議可以考慮學(xué)習(xí)Web前端開發(fā)。
