'如何系統地學習前端基礎和底層原理?看完這些書就夠了'
前端小智:https://segmentfault.com/a/1190000017072371
前端小智:https://segmentfault.com/a/1190000017072371
對於前端的學習和提高,首先前端的三個最基本的東西 HTML5、CSS3 和 JavaScript(ES6)是必須要學好的。這其中有很多很多的技術,比如,CSS3 引申出來的 Canvas(位圖)、SVG(矢量圖) 和 WebGL(3D 圖),以及 CSS 的各種圖形變換可以讓你做出非常豐富的渲染效果和動畫效果。
ES6 簡直就是把 JavaScript 帶到了一個新的臺階,JavaScript 語言的強大,大大釋放了前端開發人員的生產力,讓前端得以開發更為複雜的代碼和程序,於是像 React 和 Vue 這樣的框架開始成為前端編程的不二之選。
我一直認為學習任何知識都要從基礎出發,所以我會有很大的篇幅在講各種技術的基礎知識和基本原理,尤其是如下的這些知識,都是前端程序員需要一塊一塊啃掉的硬骨頭。
JavaScrit 的核心原理。
我會給出好些網上很不錯的講 JavaScript 的原理的文章或圖書,你一定要學好語言的特性和其中的各種坑。
瀏覽器的工作原理。
這也是一塊硬骨頭,我覺得這是前端程序員需要了解和明白的東西,不然,你將無法深入下去。
網絡協議 HTTP。
也是要著重瞭解的,尤其是 HTTP/2,還有 HTTP 的幾種請求方式:短連接、長連接、Stream 連接、WebSocket 連接。
前端性能調優。
有了以上的這些基礎後,就可以進入前端性能調優的主題了,可以很容易上手各種性能調優技術的。
框架學習。
推薦 React 和 Vue 兩個框架。就這兩個框架來說,Virtual DOM 技術是其底層技術,組件化是其思想,管理組件的狀態是其重點。而對於 React 來說,函數式編程又是其編程思想,所以,這些基礎技術都是你需要好好研究和學習的。
UI 設計。
設計也是前端需要做的一個事,比如像 Google 的 Material UI,或是比較流行的 Atomic Design 等應該是前端工程師需要學習的。
下面我們從前端基礎和底層原理開始講起。先來講講 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 。。
- Awesome SVG
- Awesome Canvas
- Awesome WebGL
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 相關實踐,供參考。
- 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 的一些圖書和文章。
Professional JavaScript for Web Developers,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》,其中還包括中文版。這篇文章非常非常長,所以,你要有耐心看完。然後,是對 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/2RFC 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 資源列表。
小結
學習任何知識都要從基礎出發,主要講述了 HTML5、CSS3 和 JavaScript(ES6)這三大基礎核心,給出了大量的圖書、文章以及其他一些相關的學習資源。之後,建議你學習瀏覽器的工作原理和網絡協議相關的內容。掌握這些原理也是學好前端知識的前提和基礎。值得花時間,好好學習消化。