極客時間-左耳聽風-程序員攻略-前端基礎和底層原理

前端基礎和底層原理

對於前端的學習和提升，前端的三個最基本的東西 HTML 五、CSS 3 和 JavaScript（ES6）是必需要學好的。這其中有不少不少的技術，好比，CSS 3 引伸出來的 Canvas（位圖）、SVG（矢量圖） 和 WebGL（3D 圖），以及 CSS 的各類圖形變換可讓你作出很是豐富的渲染效果和動畫效果。

學習任何知識都要從基礎出發，以下的這些知識，都是前端程序員須要花力氣啃下來的硬骨頭。

• JavaScript 的核心原理。
• 瀏覽器的工做原理。
• 網絡協議 HTTP，尤爲是 HTTP/2，還有 HTTP 的幾種請求方式：短鏈接、長鏈接、Stream 鏈接、WebSocket 鏈接。
• 前端性能調優,各類性能調優技術。
• 框架學習。 React 和 Vue 兩個框架。就這兩個框架來講，Virtual DOM 技術是其底層技術，組件化是其思想，管理組件的狀態是其重點。而對於 React 來講，函數式編程又是其編程思想。
• UI 設計。設計也是前端須要作的一個事，好比像 Google 的 Material UI，或是比較流行的 Atomic Design 等應該是前端工程師須要學習的。

而對於工具類的東西，只要去動手了，這種知識天然就會得到，仍是把精力重點放在更重要的地方。

HTML 5

HTML 5 主要有如下幾本書推薦。

• HTML 5 權威指南 ，本書面向初學者和中等水平 Web 開發人員，是牢固掌握 HTML 五、CSS 3 和 JavaScript 的必讀之做。書看起來比較厚，是由於裏面的代碼不少。
• HTML 5 Canvas 核心技術 ，若是要作 HTML 5 遊戲的話，這本書必讀。

對於 SVG、Canvas 和 WebGL 這三個對應於矢量圖、位圖和 3D 圖的渲染來講，給前端開發帶來了重武器，不少 HTML5 小遊戲也所以蓬勃發展。

• 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

MDN Web Doc - CSS 。

須要學會使用 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: 「Types & Grammar」
  • You Don’t Know JS: 「Async & Performance」
  • 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
  • Nginx HTTP/2 白皮書
  • HTTP/2 的兩個 RFC：
    • RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) ，HTTP/2 的協議自己。
    • RFC 7541 - HPACK: Header Compression for HTTP/2 ，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?

小結

學習任何知識都要從基礎出發

HTML 五、CSS 3 和 JavaScript（ES6）這三大基礎核心，給出了大量的圖書、文章以及其餘一些相關的學習資源。

學習瀏覽器的工做原理和網絡協議相關的內容。