入门精通web前端：三大核心HTML5、CSS3 、JS必学

WEB前端三大基础核心内容【HTML5、CSS3 和 JavaScript】

对于前端的学习和提高，我的基本思路是这样的。首先，前端的三个最基本的东西 HTML5、CSS3 和 JavaScript（ES6）是必须要学好的。这其中有很多很多的技术，比如，CSS3 引申出来的 Canvas（位图）、SVG（矢量图） 和 WebGL（3D 图），以及 CSS 的各种图形变换可以让你做出非常丰富的渲染效果和动画效果。ES6 简直就是把 JavaScript 带到了一个新的台阶，JavaScript 语言的强大，大大释放了前端开发人员的生产力，让前端得以开发更为复杂的代码和程序，于是像 React 和 Vue 这样的框架开始成为前端编程的不二之选。

我一直认为学习任何知识都要从基础出发，所以我会有很大的篇幅在讲各种技术的基础知识和基本原理，尤其是如下的这些知识，都是前端程序员需要一块一块啃掉的硬骨头。在这里相信有许多想要学习web前端的同学，大家可以+下web前端学习分享裙：九六零+五零八+九二零，即可免费领取一整套系统的 web前端学习教程！

JavaScript 的核心原理。这里我会给出好些网上很不错的讲 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 小游戏也因此蓬勃发展。所以，你可以学习一下。

CSS

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 JavaScriptNinja ，中文翻译版为《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 ，在第二部分中主要讨论了作用域和闭包，数据流，变更检测，组件化…

浏览器原理

你需要了解一下浏览器是怎么工作的，所以，你必需要看《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 等现代浏览器新增的能力。