Web 技术计算机基础数据结构与算法代码设计数据分析

💡Web API 一览表

浏览器的所有 API 及对应标准

这部分将梳理浏览器上的所有 API，即 window 的全局属性。

以 Chrome 为例，在开发者工具的 Console 选项卡里执行 Object.getOwnPropertyNames(window) 共得到了 1020 个属性。

// Chrome 98.0.4758.80 (Official Build) (x86_64)
let all = Object.getOwnPropertyNames(window);
console.log('总数', all.length); // 1020

我们知道，浏览器的 API 大致分为以下 4 类：

  1. JavaScript 固有对象

  2. DOM API

  3. CSSOM API

  4. HTML 相关

接下来，我们就逐类处理下。

1. JavaScript 固有对象

这部分由标准规定，是随着 JavaScript 运行时环境的创建而自动创建的对象实例。在任何 JavaScript 代码执行之前，它们就已经被创建好了，类似于基础库的角色。

在 ECMA262 标准中，可以找到 47 个“顶级”固有对象，过滤的脚本如下：

// https://tc39.es/ecma262/multipage/ecmascript-data-types-and-values.html#sec-well-known-intrinsic-objects
let IntrinsicObjects = new Set();
document.querySelector('#table-7').querySelectorAll('td:nth-child(2)').forEach(item => {
    let name = item.innerText.split('.')[0];
    if (name) {
        IntrinsicObjects.add(name)
    }
});
console.log(IntrinsicObjects); // 47个

再加 3 个和 bigInt 相关的、4 个值属性、3 个内存管理和 5 个 Generator，一共 62 个。转成字符串方便查看，如下：

值属性（2个）

globalThis Infinity

数据类型

原始值（2个）

undefined NaN

原始类型（5个）

Boolean String Number BigInt Symbol

对象类型（1个）

Object

最常用

基础功能（6个）

Array 数组（索引集合） Date RegExp Promise Proxy Function

键集合（4个）

Map, WeakMap Set, WeakSet

函数属性（9个）

eval() isFinite() isNaN() parseFloat() parseInt() decodeURI() encodeURI() encodeURIComponent() decodeURIComponent()

命名空间（4个）

Math JSON Reflect Atomics

其它

二进制（3个）

ArrayBuffer SharedArrayBuffer DataView

类型数组（11个）

Int8Array Int16Array Int32Array Float32Array Float64Array Uint8Array Uint16Array Uint32Array Uint8ClampedArray BigInt64Array BigUint64Array

Error 类型（7个）

Error SyntaxError TypeError ReferenceError URIError EvalError RangeError

更多

内存管理（3个）

AggregateError FinalizationRegistry WeakRef

Generator（5个）

Generator GeneratorFunction AsyncFunction AsyncGenerator AsyncGeneratorFunction

2. DOM API

DOM 标准主要定义了：

  • 事件：可以用代码过滤出来，即判断其是否为 Event 的实例

  • 节点：也可以用代码过滤，即判断其是否为 Node 的实例

  • DOM Range 及其它

下面是与 DOM 标准相关的 window 全局属性（含部分事件和节点）。

3. CSSOM API

这部分主要对应 2 个标准：

  1. CSS Object Model (CSSOM)：和 CSS 的语言特性一一对应

  2. CSSOM View Module：是浏览器提供的关于操作页面渲染后视图的属性和方法

此外，还有很多名字里包含“CSS”字符串的属性/接口，这里就不一一列出来了（详见附录），因为代码里可以直接用 string pattern 过滤掉。

4. HTML 相关

这部分主要分为：

  1. 7.3 The Window object 定义了 window 对象上的全局属性，详见下方 HTMLSpec_Window 变量里的内容

  2. 4.1 The document element 定义了元素对应的 DOM 接口，也是全局的（可以用代码过滤，同 Node节点）

  3. 其它接口，详见下方 HTMLSpec_Others 变量里的内容

5. WHATWG 的其它标准

6. ECMA402

7. W3C 的其它标准

8. 其它组织

过滤完以上提到的所有内容，还剩 41 个属性，它们有些是已经废弃/过时了的，有些是尚未标准化的，具体内容详见源码，代码的运行结果如下图所示。

browserAPIs

9. 总结

这部分介绍并梳理了浏览器的所有 API 及其对应标准，旨在对其有个概况性的认识。

  1. JavaScript 固有对象（62个）

  2. DOM API：节点、事件、Range 等

  3. CSSOM：CSSOM、CSSOM View

  4. HTML：全局属性、元素及事件等

  5. 其它

代码详见：https://github.com/anjia/blog/blob/master/src/browserAPIs.html

9.1 主要标准

  1. https://tc39.es/ecma262/

  2. https://dom.spec.whatwg.org/

  3. https://html.spec.whatwg.org/

  4. https://www.w3.org/TR/cssom-1/

  5. http://www.w3.org/TR/cssom-view-1/

  6. https://www.w3.org/TR/

9.2 扩展阅读

  1. https://developer.mozilla.org/en-US/docs/Web/API

  2. https://developer.mozilla.org/en-US/docs/Web/API/Window

9.3 附录

NextHTML 元素一览表

Last updated