认识 JavaScript

2016/11/23  Hugo

1. 标准

  • Ecma International 制定

 

  • ECMA-262 标准，TC39 负责具体的制定

 

  • ECMAScript® 编程语言

标准层面主要做了哪些工作？

 

定义了 ECMAScript® 语言应该是什么样的。以 ES2015 标准的官方文件为例：

 

  • 第1章到第3章是对文件本身的介绍，与语言关系不大。
  • 第4章是对这门语言总体设计的描述。
  • 第5章到第8章是语言宏观层面的描述。第5章是规格的名词解释和写法的介绍，第6章介绍数据类型，第7章介绍语言内部用到的抽象操作，第8章介绍代码如何运行。
  • 第9章到第26章介绍具体的语法。

2. 实现

 

  • JS 引擎: V8, Nitro(JavaScriptCore), SpiderMonkey, etc.

 

  • 执行效率较高（V8 在动态类型语言中仅次于 LuaJIT）

 

  • JS 引擎 == JS JIT 编译器 == JS 解释器

LuaJIT 是公认的运行最快的动态语言的实现

ES 实现：JavaScript, ActionScript, etc.

实现层面主要做了哪些工作？

 

使得 JS 代码得到执行。简单地说就是，能够读懂你的 JS 代码，并准确地给出代码运行结果。

3. 运行环境

分类 举例
浏览器 Chrome, Safari, iOS Safari,
iOS WebView, Android WebView, etc.
服务器 Node.js, etc.
客户端 NativeScript/React Native/Weex,
Unity3D/Cocos2d-x, Egret Runtime, etc.
其 他 Electron, 微信小程序, Ruff, etc.

运行环境层面主要做了哪些工作？

 

大多数运行环境因实际需要，囊括 JS 引擎以及其他组成部分在内。它暴露某些组成部分的 API 给到 JS 执行环境，并适时调用 JS 引擎执行 JS 代码。

 

不同的运行环境，其 JS 运行机制不一，暴露的 JS API 不尽相同，下面以 浏览器 为例来探讨。

3.1 浏览器

3.1.1 浏览器简介

  • 主要构成
  • 现代浏览器都是多线程的：渲染引擎线程、JS 引擎线程、事件循环线程等等。渲染引擎线程与 JS 引擎线程互斥。
  • 渲染引擎的 DOM 渲染流程：不同引擎的流程不一致，以开源的 WebKit 为例，其流程如下：
  • DOM 为什么给人感觉很慢：①DOM 平台庞大繁杂，优化程度已经碰顶； ②开发人员没有遵循最佳实践，频繁地 DOM 操作，性能消耗。

 

  • 其他渲染平台 Canvas 与 WebGL : 性能与 native UI 媲美，目前还在发展中。
  • 事件驱动模型：GUI 编程常见的编程模型，可以方便地处理用户操作。
  • 事件循环机制：网页中 JS 的执行环境是单线程的，因此浏览器采用事件循环机制来实现事件驱动。

3.1.2 浏览器中的 JS

  • Chrome 浏览器中，每个 Tab 都是独立进程，每个进程中只有一个 JS 引擎线程。非这种实现的浏览器，就会存在多个 JS 引擎线程。

 

  • 在同一个页面进程中，JS 只有一个线程（实际上 ES 标准和 JS 实现均没有线程的概念）。

3.1.3 浏览器的 JS API

  • BOM（Browser Object Model，浏览器自行定义、实现）：与浏览器交互的方法
  • DOM（Document Object Model，W3C 制定的标准）：处理网页内容的方法

HTML5 扩展了 DOM；同时也扩展了 BOM，并促进了 BOM 的标准化。

END.