初阶前端知识体系

如何梳理繁多又散乱的前端知识？那就是把所有分散、零碎和杂乱的前端知识梳理清楚，变成结构化、有组织和易扩展的前端知识体系。

今天，我们针对初阶前端做一个全面梳理，整理了一整套初阶前端知识体系，给当下迷茫的初阶前端一点参考。

文章略长，请保持一点耐心。

壹｜前端基础

任何行业都有标准，前端行业标准有两个，一个是 W3C/WHATWG，一个是 ECMA-TC39。

W3C 是万维网联盟，制定CSS、SVG、小程序等标准。

WHATWG 是浏览器厂商组成的行业组织，制定 HTML、DOM标准。

ECMA-TC39 是一个推动 JavaScript 发展的委员会，由各个主流浏览器厂商的代表构成。他们制定 ECMAScript 标准，整个流程包含五个步骤：

1. stage 0 strawman：任何讨论、想法、改变、特性。
2. stage 1 proposal：产出一个正式的提案,包含 API 描述、使用示例、主要挑战。
3. stage 2 draft：提供一个初始的草案规范，开始实验如何实现，实现形式包括 polyfill，实现引擎，babel。
4. stage 3 candidate：候选阶段，获得具体实现和用户的反馈。规范文档完整，浏览器中实现，提供polyfill或者babel插件。
5. stage 4 finished：已准备就绪，下个版本正式发布。

明白前端标准，前端基础就是客户端、网络和服务端。

客户端包含 Chrome、Safari、Firefox、小程序、WebView等。

服务端包含 WebServer、服务端语言、数据库和操作系统。

网络是帮助客户端和服务端进行交互的系统。

贰｜研发工具

工欲善其事，必先利其器。

编辑器包含Sublime Text、Visual Studio Code 和 WebStorm。一般我们使用 Visual Studio Code。

调试预览包含浏览器调试工具（Chrome DevTools、FireBug）、本地服务、在线服务（CodePen、JSFiddle）、网络调试（hosts、switchhosts、Debugging Proxy、Charle）。

图片编辑器包含 Photoshop、Sketch。

版本管理包含 Git、SVN。

叁｜HTML

HTML 是超文本标记语言，是一种用于创建网页的标准标记语言。

HTML 由元素、属性、事件和编码组成。

元素的种类有很多：

• 根元素（html、body）
• 元数据（base、head）
• 内容分区（header、footer）
• 内容（div、dir、a、b、strong）
• 图片和多媒体（audio、img）
• 内嵌内容（iframe、object）
• 脚本（canvas、script）
• 表格（table、tbody）
• 表单（button、input）
• 可交互元素（menu、menuitem）

属性包含常用属性（class、id、style、title）和全局属性。

事件包含窗口事件、表单事件、键盘事件、鼠标事件、多媒体事件。

编码包含 URL 编码、语言代码、字符集。

肆｜CSS

CSS 是层叠样式表，用来描述 HTML 或 XML 文档的呈现。

CSS 有语法、选择器、定位、布局、样式、动画和应用。

语法包含@规则、层叠、注释、解释器、继承、简写、优先级、值定义、单位与取值类型。

选择器包含元素选择器、选择器分组、类选择器、ID 选择器、属性选择器、后代选择器、子元素选择器、相邻选择器、伪类、伪元素。

定位包含 position、top、left、bottom、right、z-index。

布局包含 Box model、FlexBox、Grid、Column。

样式包含背景、文本、轮廓、列表。

动画包含 Animation、transition。

应用包含响应式和自适应。

伍｜JavaScript

JavaScript 是一种具有函数优先的轻量级，解释型或即使编译型的编程语言。

JavaScript 有语法、数据类型深入、对象、函数、原型、类、异步流程控制、模块化、异常捕获。

语法包含值、变量、数据类型、流程控制、运算（表达式、运算符）、函数。

数据类型深入包含原始类型的方法、数字类型、字符串、数组、数组方法、可迭代对象、Map、Set、WeakMap、WeakSet、Object.keys、values、entries、解构赋值、日期和事件、JSON序列化、反序列化。

对象包含属性/字面量、in、for...in、对象引用、深拷贝、浅拷贝、Symbol、垃圾收集机制、this、new、Optional chaining、Symbol.toPrimitive、Property flags、descriptors、getters、setters。

函数包含调用栈、递归、尾递归、arguments、params spread、作用域、闭包、var、变量提升、IIFE、匿名自执行函数、NFE、函数命名表达式、箭头函数、new Function、setTimeout、setInterval、call、apply、bind、部分施用、柯里化。

原型包含原型链、继承、F.prototype、Object.prototype。

类包含继承、方法重载、构造函数、Super、[[HomeObject]]、静态属性、静态函数、私有属性、私有函数、混合、Mixins。

异步流程控制包含 Callback、Promise、async/await、generator、iterable。

模块化包含 commonJS、amd、cmd、umd、es-module。

异常捕获包含 try...catch...finally、throw、Error。

陆｜浏览器

浏览器是指可以显示网页服务器或者文件系统的 HTML 文件内容，并让用户与这些文件交互的一种软件。

浏览器有 DOM、浏览器 API、网络、权限、安全与隐私、兼容性、开发者工具。

DOM 包含 DOM Tree、DOM Node、DOM Query、DOM Properties、DOM Modify、Styles、Coordinates、Element Scrolling、DOM Events。

浏览器 API 包含 location、history、navigator、Default Actions、Form。

网络包含 XHR、Fetch、JSONP、WebSocket。

权限包含 Cookie、Session、OAuth、SSO、JWT。

安全与隐私包含 Content Security Policy（CSP）、CORS、XSS、CSRF、MITM、Samesite。

兼容性包含 Can I Use、polyfill、shim、browserslist、Autoprefixer。

开发者工具包含设备模式、元素面板、控制台面板、源代码面板、网络面板、性能面板、内存面板、应用面板、安全面板。