[前端]初步了解 JavaScript

JS 是目前世界上使用最多的脚本语言。网页通常由三部分构成，HTML、CSS、JS，其中 HTML 提供内容、CSS 美化页面，JS 控制行为（逻辑）。

JS 的组成：

通常 JavaScript 和 ECMAScript 会被当成一回事，但实际上 JS 的含义要比后者更多一些。

在浏览器内，JS 主要由三部分组成：ECMAScript、DOM、BOM，语法等核心内容由 ECMAScript 定义，操作 html 文档的 api 由文档对象模型（DOM）提供，操作浏览器的 api 由浏览器对象模型（BOM）提供。

ECMAScript：

ECMAScript 与 Web 浏览器没有直接的依赖关系。ECMAScript 只定义这门语言的基础概念，Web 浏览器只是 ECMAScript 的宿主环境之一，其它宿主环境还有 Node.js（服务端 JS）、Adobe Flash 等。

宿主环境不仅提供 ECMAScript 的实现，同时也提供相关扩展以便语言与环境交互，例如 DOM、BOM 就是浏览器这个环境提供的扩展。

既然 ECMAScript 不依赖于环境，那它都规定了些什么呢？大致有以下内容：

1、语法

2、类型

3、语句

4、关键字

5、保留字

6、操作符

7、对象

ECMAScript 就是对这些方面的描述，JS 实现了 ECMAScript，Adobe ActionScript 同样也实现了 ECMAScript，它们只是 ECMAScript 在不同宿主环境下的实现。

ECMAScript 的版本：

ECMAScript 的版本通常被简称为 ESx，表示第 x 版，下面简单介绍下各个版本：

ES1：与 Netscape 的 JS1.1 基本相同，只是去掉了所有针对浏览器的部分并作了一些小改动。

ES2：进一步规范化，主要是为了与 ISO/IEC-16262 规范保持严格一致。

ES3：算是第一次真正的修改，修改内容涉及字符串处理、错误类型、数值运算。新增内容有正则表达式、异常处理语句 try-catch，从各方面来看，ES3 标志着 ECMAScript 成为了一门真正的编程语言。

ES4：对 ECMAScript 进行了一次全面的修订，包含了强类型变量、新语句、新数据结构、真正的类、经典继承等。但由于修改幅度过大并不受浏览器厂商支持，这时另一个小组提出了一个名为 ES3.1 的替代性方案，该小组认为 ES4 对这门语言带来的跨越太大了，因此建议只进行小幅修改，使其便于在现有的 JS 引擎基础上实现，最终 ES3.1 获得的支持超过了 ES4，ES4 在正式发布前被废弃，而 ES3.1 成为了 ES5。

ES5：于 2009 年 12 月 3 日正式发布。ES5 力求规范 ES3 中的歧义并增添了一些新功能，包括原生 JSON 对象、原型链、高级属性定义，还增加了严格模式。

ES6：准确的说应该称为 ES2015，此后的 ECMAScript 版本都将以发布年份命名，但通常来说，习惯上直接以 ES6 指代此后所有版本，偶尔也会有 ES7/8/9 之类的称呼（都差不多啦，从 2015 往后数就可以了），ES6 进一步规范了这门语言，增加了 let、const、箭头函数、类定义、继承、Promise、generator、async 函数等内容。

DOM：

DOM 是针对标记语言的 API，开发者可借助 DOM 提供的 API 动态的操作文档，DOM 与平台、语言无关，很多语言都实现了 DOM，现在的前端业界流行不直接操作 DOM，所以下面的内容就省略一些，没什么用。

DOM 级别：

1、DOM 1 级由两部分组成：DOM Core、HTML-DOM，DOM Core 是基本标准，HTML-DOM 是专门针对 HTML 文档的扩展，添加了针对 HTML 的对象、方法。

2、DOM 2 级在 DOM 1 级的基础上增加了鼠标、用户界面事件等细分模块，并增加了对 CSS 的支持。

3、DOM 3 级再次扩展，统一了文档加载和保存的方法、新增了验证文档的方法、支持了 XML 1.0 规范。

其它 DOM 标准

除了 DOM Core、HTML-DOM，还有其它语言只针对自己定义的 DOM 标准，都是基于 XML 标准新增了与该语言相关的方法，代表的有 SVG（可伸缩矢量图）、MathML（数学标记语言）、SMIL（同步多媒体集成语言）等。

BOM：

BOM 是用来访问、操作浏览器的 API，内容大致包括：

1、弹出、移动、关闭、缩放浏览器窗口。

2、包含浏览器详细信息的 navigator 对象。

3、包含当前页面详细信息的 location 对象。

4、包含用户当前显示器分辨率信息的 screen 对象。

5、对 cookie 的支持。

6、浏览器自定义对象，如 XMLHttpRequest、ActiveXObject 等。

了解浏览器：

下面是浏览器组成的示意图：

简单介绍下图中各部分的作用：

User interface：浏览器的用户界面，负责与用户交互，包括地址栏，前进/后退按钮，书签目录等。

Browser engine：浏览器引擎，负责查询、操作渲染引擎的接口。

Rendering engine：渲染引擎，负责展示请求获取的内容，比如请求获取的是 html 文件，便负责解析该 html 文件。

Networking：网络模块，负责请求、接收资源等，完成网络调用，例如 http 请求。

JavaScript Interpreter：JavaScript 解释器，用来解释执行 js 代码。

UI Backend：UI 后端，用来绘制选择框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统提供的接口。

Data Persistence：数据持久化模块，负责提供存储服务，浏览器需要在硬盘中保存的各种数据都由它来完成，相当于浏览器的本地数据库。

大致工作流程：

1、首先，networking 发送请求（假设请求 HTML 文件），接收到服务器发来的文件后交给渲染引擎处理。

2、渲染引擎解析 HTML，当遇到 script 标签时，将 script 标签中的内容交给 JS 解释器执行

3、JS 解释器执行代码，把执行结果返回给渲染引擎。

4、渲染引擎将画面渲染完毕，通过浏览器引擎将画面显示在浏览器的用户界面上。

这只是举例简单概括下，实际流程更复杂一些，有个专家写了篇详细的解释浏览器的文章，这是中文版的链接：

How browsers work--Behind the scenes of modern web browsers：https://www.2cto.com/kf/201202/118111.html