极客时间-左耳听风-程序员攻略-前端基础和底层原理

前端基础和底层原理

对于前端的学习和提升，前端的三个最基本的东西 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）这三大基础核心，给出了大量的图书、文章以及其余一些相关的学习资源。

学习浏览器的工做原理和网络协议相关的内容。