recursal/MDN huggingface dataset:
浏览上下文（Browsing context）
=======================

**浏览上下文**（browsing context）是浏览器（browser）展示`文档`的环境。在现代浏览器中，通常是一个*标签页*（tab），也可能是一个*窗体*（window）或只是页面的一部分，如 *frame* 或 *iframe*。

每个浏览上下文都有一个活动文档的源（origin）和一个记录所有展示文档的有序历史（history）。

浏览上下文之间的通讯被严格限制，只有两个同源的浏览上下文，才能打开和使用通讯接口（`BroadcastChannel`）。

参见
--

* 参见 origin
IRC
===

**IRC** (*Internet Relay Chat* **因特网中继聊天**) 是一个基于互联网连接和 IRC 客户端的全球聊天系统，其通过 IRC 服务器收发消息。

由 Jarrko Oikarinen 在 20 世纪 80 年代末设计出，IRC 使用 TCP ，这是一个开放的协议。IRC 服务器将消息广播给每个连接到多个 IRC 通道 (每个通道都有自己的 ID) 中的一个的人。
端口
==

对于使用 IP 地址连接到网络的计算机，**端口**（port）是通信的端点。端口由数字指定，且在 1024 以下的每个端口默认与特定的协议相关联。

例如，HTTP 协议的默认端口是 80，HTTPS 协议的默认端口是 443，因此 HTTP 服务器在这些端口上等待请求。每个网际协议都与一个默认端口相关联：SMTP（25）、POP (en-US)（110）、IMAP (en-US)（143）、IRC（194）等等。

参见
--

* 维基百科上的端口条目
SQL 注入
======

SQL 注入（SQL Injection）利用了未能验证用户输入的 Web 应用程序。黑客可以通过 Web 应用程序传递恶意 SQL 命令，以便由后端数据库执行。

SQL 注入可以获得对数据库的未经授权的访问，或直接从数据库检索信息。许多数据泄露事件都是由于 SQL 注入造成的。

![最常见漏洞的饼状图：SQL 注入占 50%，跨站脚本占 42%，源代码泄露占 7%。](/zh-CN/docs/Glossary/SQL_Injection/sql_inj_xss.gif)

如何实现
----

![带有用户名和密码字段的登录表格的屏幕截图](/zh-CN/docs/Glossary/SQL_Injection/updates_loginscreen.png)

输入用户名和密码后，在用户界面背后的 SQL 查询类似如下：


```sql
"SELECT Count(\*) FROM Users WHERE Username=' " + txt.User.Text+" ' AND Password=' "+ txt.Password.Text+" ' ";
```


假定用户输入用户名为 admin，密码为 passwd123，在点击登录按钮后，会运行这样的 SQL 查询：


```sql
"SELECT Count(\*) FROM Users WHERE Username=' admin ' AND Password=' passwd123 ' ";
```


如果凭证是正确的，那么用户就被允许登录，所以这是一个非常简单的（因此也是不安全的）机制。黑客利用这种不安全性来获得未经授权的访问。

黑客可以使用一个简单的字符串，称为“神奇的字符串”：

**Username: *admin***

**Password: *anything 'or'1'='1***

在点击登录按钮后，会运行这样的 SQL 查询：


```sql
"SELECT Count(\*) FROM Users WHERE Username=' admin ' AND Password=' anything 'or'1'='1 ' ";
```


只要仔细看看上述查询的密码部分就知道了。
```

Password=' anything 'or'1'='1 '
```


密码不是“anything”，因此 password=anything 的结果是 FALSE，但 '1'='1' 是一个恒真语句，因此返回 TRUE 值。最后，由于 OR 运算符的作用，条件部分的值（FALSE OR TRUE）为 TRUE，所以成功绕过了认证。仅仅由于一个简单的字符串（“魔法字符串”），整个数据库就被破坏了。

如何防御
----

在执行对用户凭证的查询之前，要做一些改变，比如说：


```sql
$id = $_GET['id']

(1) $id = Stripslashes($id)

(2) $id = mysql_real_escape_String($id)
```


语句（1）将输入字符串中的每个单引号（'）被替换为双引号（"），并且语句（2）在每个单引号（'）之前添加正斜杠（/）实现转义操作。修改之后，“魔法字符串”就无法绕过认证，而你的数据库则能够保持安全。

参见
--

* 维基百科上的 SQL 注入词条
* OWASP（开放 Web 应用安全项目）上的 SQL 注入解释
WebSockets
==========

WebSocket 是一种在客户端与服务器之间保持TCP长连接的网络协议，这样它们就可以随时进行信息交换。

虽然任何客户端或服务器上的应用都可以使用 WebSocket，但原则上还是指浏览器与服务器之间使用。通过 WebSocket，服务器可以直接向客户端发送数据，而无须客户端周期性的请求服务器，以动态更新数据内容。

参见
--

* Websocket 维基百科
* WebSocket 的 MDN 参考
* 编写 WebSocket 客户端应用
* 编写 WebSocket 服务器应用
属性
==

**属性**（Property）在不同语境下可能有不同的意义，它可能指：

属性（CSS）
**CSS 属性**是一种特征（如颜色），其相关值定义了浏览器应如何显示该元素的一个方面。
属性（JavaScript）
**JavaScript 属性**是一个对象的成员，它将键与值联系起来。JavaScript 对象是一种数据结构，它存储了属性的集合。
General header（通用标头）
====================

**通用标头**是一个过时的术语，其用于指代同时适用于请求和响应的消息，而不适用于内容本身（适用于内容的标头称为实体标头）的 HTTP 标头。取决于应用的上下文环境，通用标头可以是响应标头或者请求标头（例如，`Cache-Control`）。

**备注：** 当前版本的 HTTP/1.1 规范没有明确地划定“通用标头”这一类别。根据上下文，这些标头现在被简单地称为响应标头或请求标头。
Fetch 指令
========

**CSP fetch 指令**用在`Content-Security-Policy` 头部中，可以用来控制某些具体类型的资源可以从哪些来源被加载。比如说， `script-src` (en-US) 使得开发者可以允许可信任来源的脚本在页面上执行， `font-src` 可以控制字体的来源。

所有的指令的值都会回落到 `default-src`。也就是说，如果某个 fetch 指令在 CSP 头部中未定义，那么用户代理就会寻找`default-src` 指令的值来替代。

这些 CSP 指令属于 fetch 指令：

* `child-src`
* `connect-src`
* `default-src`
* `font-src`
* `frame-src` (en-US)
* `img-src` (en-US)
* `manifest-src` (en-US)
* `media-src` (en-US)
* `object-src` (en-US)
* `script-src` (en-US)
* `style-src` (en-US)
* `worker-src`
参见
--

* `Content-Security-Policy`
* 其他类型的 CSP 指令：
    + Document directive
    + Navigation directive
    + Reporting directive (en-US)
Function（函数）
============

**function**，**函数**，是一个可以被其他代码或其自身调用的代码片段，或者是一个指向该函数的变量 。当函数被调用时，参数被作为输入传递给函数，并且函数可以返回输出。在 JavaScript 中，函数也是一个对象。

函数名是作为函数声明或函数表达式的一部分声明的标识符。函数的作用域取决于函数名是一个声明还是表达式。

### 不同类型的函数

**匿名函数**是一个没有函数名的函数：


```js
function () {};
// or using the ECMAScript 2015 arrow notation
() => {};
```


**具名函数**是具有函数名称的函数：


```js
function foo() {}
// or using the ECMAScript 2015 arrow notation
const foo = () => {};
```


**内部函数**是另一个函数内的函数（下面例子中的 `square`）。外部函数是包含一个函数的函数（下面例子中的 `addSquares`）：


```js
function addSquares(a, b) {
  function square(x) {
    return x \* x;
  }
  return square(a) + square(b);
}
//Using ECMAScript 2015 arrow notation
const addSquares = (a, b) => {
  const square = (x) => x \* x;
  return square(a) + square(b);
};
```


**递归函数**是调用自身的函数。可参考递归。


```js
function loop(x) {
  if (x >= 10) return;
  loop(x + 1);
}
//Using ECMAScript 2015 arrow notation
const loop = (x) => {
  if (x >= 10) return;
  loop(x + 1);
};
```


**`立即调用函数表达式`**（IIFE）是一种被加载到浏览器的编译器之后直接调用的函数。识别 IIFE 的方法是通过在函数声明的末尾定位额外的左和右括号。


```js
// Error (https://en.wikipedia.org/wiki/Immediately-invoked\_function\_expression)
/\*
function foo() {
 console.log('Hello Foo');
}();
\*/

(function foo() {
  console.log("Hello Foo");
})();

(function food() {
  console.log("Hello Food");
})();
```


如果你想进一步了解 IIFE, 可参考以下的维基百科的页面：Immediately Invoked Function Expression

参见
--

* Functions
* Arrow Functions
WebDAV
======

**WebDAV** (*Web Distributed Authoring and Versioning*) 是一种允许 web 开发者使用客户端远程更新内容的 HTTP 扩展。

WebDAV 很少单独使用，其通常与以下两个扩展一起使用：CalDAV 和 CardDAV (en-US)。

WebDAV 允许客户端执行以下操作

* 增加、删除和查询网页元数据（例如：作者、创建日期）
* 将媒体类型的页面链接到相关页面
* 创建文档集和检索层次目录
* 复制和移动网页
* 锁定文档以免被多人编辑
参见
--

* 维基百科上的 WebDAV
* 技术参考：
    + RFC 2518
    + RFC 3253
    + RFC 3744
WebP
====

**WebP** 是由 Google 公司开发的一种可提供有损和无损压缩的图片格式，支持透明度，目前已支持动图。

Learn more
----------

### General knowledge

* WebP on Wikipedia
电脑编程
====

电脑编程是将一系列指令整合起来的过程。这些指令以电脑能够理解的语言告诉电脑或者软件该做些什么。这些指令可由不同的语言呈现，例如 C++、Java、JavaScript、HTML、Python、Ruby 和 Rust。

使用一门合适的语言，你可以编程/创建任意一种软件。例如，帮助科学家进行复杂运算的程序、存储大量数据的数据库、可以供人下载音乐的网站或可以供人制作电影的动画软件。

参见
--

* 维基百科：电脑编程
* 维基百科：一些常见的编程语言列表
域
=

域是互联网中控制其自身资源的“代表”（authority，有时被直译为“权威”）。它的“域名”是 URL 层次结构的一部分，是对“代表”的称呼。域名通常也是 URL 中最令人难忘的地方，例如品牌名称。

一个全限定域名（FQDN）包含可以使用互联网的域名系统明确地按名称查询该机构的所有必要部分。

例如，在“developer.mozilla.org”中：

1. “org”被称为顶级域，它们由 IANA 注册为互联网标准。这里，“org”是指“组织”，它被定义在一个顶级的*域名注册表*中。
2. “mozilla”是域名。如果你需要拥有一个域名，必须在注册商中注册。在顶级域域名注册商委派下，注册商可以为你注册域名。
3. “developer”是子域名，作为域名的所有者，你可以自己定义。许多域名所有者选择将子域“www”指向他们的万维网资源，但这并不是必须的（甚至已经有些失宠了）。
参见
--

* 维基百科词条域名
控制流
===

*控制流* 是计算机执行一个程序中语句的顺序。

程序会从第一行代码开始执行直至最后一行，除非遇到（实际中是非常普遍地）改变控制流的代码结构，比如条件语句和循环。

比如，下面的程序被用来校验用户在网页上输入的数据。数据经过校验后会被提交，但当用户没有输入任何数据时 (field==empty)，这个程序会提醒用户去填入数据。为了做到这一点，这个程序使用了 条件 (en-US) 结构 `if...else`，这样就可以根据数据是否被填充而执行不同的代码。


```js
if (field == empty) {
  promptUser();
} else {
  submitForm();
}
```


在 JavaScript 或者 PHP 中存在许多控制结构，比如条件语句、循环和函数。还有部分语句可能被设定为当 事件 发生的时候才执行。

例如，上面的代码可能被放入一个函数，而这个函数只有在用户点击了表单的**提交**按钮时才执行。而这个函数也可以再包含一个循环，来达到按照顺序遍历表单中的所有数据的目的。往回看 `if...else` 代码块，`promptUser` 和 `submitForm` 也可以是对其他函数的调用。如你所见，控制结构依靠几行代码就能完成复杂的处理过程。

控制流的存在意味着在读代码时，你不能只从第一行读到最后一行，你还要注意代码的结构以及它对语句执行顺序的影响。

Learn more
----------

### General knowledge

* Control flow on Wikipedia
### Technical reference

* JavaScript Reference - Control flow on MDN
### Learn about it

* Statements (Control flow) on MDN
浏览器引擎前缀
=======

浏览器厂商们有时会给实验性的或者非标准的 CSS 属性和 JavaScript API 添加前缀，这样开发者就可以用这些新的特性进行试验，同时（理论上）防止他们的试验代码被依赖，从而在标准化过程中破坏 web 开发者的代码。开发者应该等到浏览器行为标准化之后再使用未加前缀的属性。

**备注：** 浏览器厂商们正在努力停止使用前缀来表示实验性质的代码的行为。Web 开发者一直在生产环境的网站上使用这些实验性代码，这使得浏览器厂商更难保证浏览器兼容性和处理新特性；这也伤害了更小众的浏览器，它们被迫添加其他浏览器前缀以加载热门网站。

现在的趋势是将实验性功能添加在需要用户自行设置偏好或标记（flag）的地方，同时编写一个更小规模的规范，以更快达到稳定状态。

CSS 前缀
------

主流浏览器引擎前缀：

* `-webkit-` （谷歌，Safari，新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于 WebKit 内核的浏览器）
* `-moz-` （火狐浏览器）
* `-o-` （旧版 Opera 浏览器）
* `-ms-` （IE 浏览器 和 Edge 浏览器）

示例：


```css
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
```

API 前缀
------

过去，浏览器引擎也使用前缀修饰实验性质的 API。如果整个接口都是实验性的，前缀修饰的就是接口名（但不包括其中的属性或者方法）。如果将一个实验性的接口或者方法添加到一个标准化的接口中，这个新增的接口或者方法被前缀修饰。

### 接口前缀

需要使用大写的前缀修饰接口名：

* `WebKit` (谷歌，Safari, 新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器 (包括 iOS 系统中的火狐浏览器); 简单的说，所有基于 WebKit 内核的浏览器)
* `Moz` (火狐浏览器)
* `O` (旧版 Opera 浏览器)
* `MS` (IE 浏览器 和 Edge 浏览器)
### 属性和方法前缀

需要使用小写的前缀修饰属性或者方法

* `webkit` (谷歌，Safari, 新版 Opera 浏览器，以及几乎所有 iOS 系统中的浏览器 (包括 iOS 系统中的火狐浏览器); 简单的说，所有基于 WebKit 内核的浏览器)
* `moz` (火狐浏览器)
* `o` (旧版 Opera 浏览器等
* `ms` (IE 浏览器 和 Edge 浏览器)

示例：


```js
window.requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame;
```

参见
--

* 维基百科浏览器引擎前缀（Vendor prefix）
浏览器
===

**网络浏览器**或**浏览器**是一种从 Web 获取和显示页面的程序，并且让用户通过超链接访问更多页面。浏览器是最常见的一种用户代理。

参见
--

* 维基百科上的浏览器
* 用户代理（术语）
* `User-agent`（HTTP 标头）
* 下载一个浏览器
    + Mozilla Firefox
    + Google Chrome
    + Microsoft Edge
    + Opera Browser
Constructor
===========

**构造函数**属于被实例化的特定类对象 。构造函数初始化这个对象，并提供可以访问其私有信息的方法。构造函数的概念可以应用于大多数面向对象的编程语言。本质上，JavaScript 中的构造函数通常在类的实例中声明。

语法
--


```js
// 这是一个通用的默认构造函数类 Default
function Default() {
}

// 这是一个带参数声明的重载构造函数类 Overloaded
function Overloaded(arg1, arg2, ...,argN){
}
```


要调用 JavaScript 中类的构造函数，请使用 `new` 操作符将新的对象引用 (en-US)分配给一个变量。


```js
function Default() {}

// 分配给局部变量 defaultReference 的一个新的 Default 对象引用
var defaultReference = new Default();
```

参见
--

* 维基百科上的构造函数
* MDN 上的 JavaScript 面向对象编程中的构造函数
* MDN 上的 JavaScript 的 New 操作符
基线
==

根据语境的不同，**基线**（baseline）一词有多种含义。它可以指：

基线（兼容性）
**基线**（baseline）标识可跨浏览器使用的 web 平台特性。基线可帮助你决定何时使用某项特性，告诉你该特性何时不太可能给网站访客带来兼容性问题。
基线（排版）
**基线**（baseline）是指欧洲和西亚文字排版中，用于在上面放置字符的一条假想的基准线。
参见
--

* 维基百科上的 Baseline 词条
XPath
=====

**XPath** 是一种可以访问 XML 文件中的节和内容的查询语言。

参见
--

* MDN 上的 XPath 文档
* XPath 规范
* 官方网站
* 维基百科上的 XPath
IP 地址
=====

**IP 地址**是一个数字，用于对 IP 网络上的每台设备进行唯一的定位。

*IP* 代表*互联网协议*（Internet Protocol），是与地址相关的协议层。

在更广泛地使用 IPv6 之前，“IP 地址”通常仍指 32 位 IPv4 地址。

参见
--

* 维基百科上的 IP 地址词条
TCP slow start
==============

TCP slow start helps buildup transmission speeds to the network's capabilities. It does this without initially knowing what those capabilities are and without creating congestion. TCP slow start is an algorithm used to detect the available bandwidth for packet transmission, and balances the speed of a network connection. It prevents the appearance of network congestion whose capabilities are initially unknown, and slowly increases the volume of information diffused until the network's maximum capacity is found.

To implement TCP slow start, the congestion window (*cwnd*) sets an upper limit on the amount of data a source can transmit over the network before receiving an acknowledgment (ACK). The slow start threshold (*ssthresh*) determines the (de)activation of slow start. When a new connection is made, cwnd is initialized to one TCP data or acknowledgment packet, and waits for an acknowledgement, or ACK. When that ACK is received, the congestion window is incremented until the *cwnd* is less than *ssthresh*. Slow start also terminates when congestion is experienced.

拥塞控制
----

拥塞本身是发生在网络层的一种状态，当消息流量太忙，它减慢了网络响应时间。服务器以 TCP 包发送数据，用户的客户端然后通过返回 acknoledgements 或 ack 来确认传输。根据硬件和网络条件，连接的容量是有限的。如果服务器发送太多的数据包太快，它们将被丢弃。意味着，不会有任何确认。服务器将其注册为丢失 ACKs。拥塞控制算法使用发送的数据包和 ack 流来确定发送速率。

参阅
--

* Populating the page: how browsers work
* http overview
站点（Site）
========

并非正式地，*站点*是一个网站，它是一个网页的集合，由同一域提供服务，并且由单一的组织提供维护。

浏览器有时需要去精确地区分不同的站点。例如，浏览器必须仅发送同站（SameSite） cookie 给同一站点，然后才能设置它们。

对于这个更精确的定义，站点由域名的*可注册域*部分确定。可注册域由公共后缀列表中的一个条目加上它之前的域名部分组成。这意味着，例如 `theguardian.co.uk`、`sussex.ac.uk` 和 `bookshop.org` 都是可注册的域。

根据这个定义，`support.mozilla.org` 和 `developer.mozilla.org` 是同一站点的一部分，因为 `mozilla.org` 是一个可注册域。

在某些情况下，在区分不同的站点时，也会考虑站点的协议（scheme）。这将使 `http://vpl.ca` 和 `https://vpl.ca` 成为不同的站点。包含协议（scheme）的情况可以防止不安全的（HTTP）站点被视为与安全（HTTPS）站点为相同的站点。考虑协议（scheme）的定义有时被称为 *schemeful same-site*。这个更严格的定义适用于处理 SameSite cookie。

示例
--

这些是同一个站点，因为 `mozilla.org` 的可注册域是相同的：

* `https://developer.mozilla.org/zh-CN/docs/`
* `https://support.mozilla.org/zh-CN/`

这些是同一个站点，因为端口不相关：

* `https://example.com:8080`
* `https://example.com`

这些不是同一个站点，因为两个 URL 的可注册域不同：

* `https://developer.mozilla.org/zh-CN/docs/`
* `https://example.com`

如果考虑协议（scheme），这些可能是相同的站点或不同的站点：

* `http://example.com`
* `https://example.com`
参见
--

* URL 是什么
* Origin
* 同源策略
Simple response header
======================

一个简单的响应头（或 CORS 安全列表的响应头）是一个 HTTP 头，它是以下之一：

* `Cache-Control`
* `Content-Language`
* `Content-Length`
* `Content-Type`
* `Expires`
* `Last-Modified`
* `Pragma`

These headers will not be filtered when the response is filtered by CORS, they are considered as *safe* (as the headers listed in `Access-Control-Expose-Headers`.

Examples
--------

### Extending the safelist

You can extend the list of CORS-safelisted response headers by using the `Access-Control-Expose-Headers` header:
```

Access-Control-Expose-Headers: X-Custom-Header, Content-Length
```

Learn more
----------

* HTTP
* HTTP headers
* `Access-Control-Expose-Headers`
* CORS
* Simple header
* Forbidden header name
* Request header
Microsoft Internet Explorer 浏览器
===============================

Internet Explorer（或 IE）是一个免费的图形浏览器，曾经由微软为企业用户维护。目前，Microsoft Edge 是 Windows 默认的浏览器。

微软在 1995 年首次将 IE 和 Windows 捆绑，作为“Microsoft Plus!”包的一部分出售。在大约 2002 年时，Internet Explorer 已经成了世界上使用最多的浏览器，但目前已经落后于 Chrome、Firefox、Edge 和 Safari。

IE 经历了许多版本，并为桌面、手机和 Xbox 控制台提供了版本。它也可以在 Mac 和 UNIX 上使用，微软分别在 2003 年和 2001 年停止了这些版本。最后的 Windows 版本是 2020 年 11 月 10 日的 Windows 11.0.220。微软于 2022 年 6 月 15 日结束对 IE 的支持。

参见
--

* Internet Explorer 维基百科
* Internet Explorer 的历史维基百科
* Internet Explorer 版本维基百科
强调色
===

**强调色**（accent）通常为一种明亮的颜色，与颜色方案中更实用的背景和前景色形成对比。这些颜色存在于很多平台（但不是所有平台）的视觉样式中。

在 Web 上，强调色有时用于 `<input>` 元素中控件的活跃部分，例如勾选的复选框的背景。

参见
--

### 与强调色相关的 CSS

为设置指定元素的强调色，可以将元素的 CSS `accent-color` 属性设置为合适的 `<color>` 值。
Document directive
==================

**CSP 文档指令（document directives）** 出现于 `Content-Security-Policy` 首部，支配着应用安全策略的文档的属性或者 worker 运行环境的特征。

文档指令不将 `default-src` 指令作为回退机制。

以下 CSP 指令属于文档指令：

* `base-uri`
* `plugin-types` (en-US)
* `sandbox`
* `disown-opener`
更多内容
----

* `Content-Security-Policy`
* 其他类型的指令：
    + Fetch directive
    + Navigation directive
    + Reporting directive (en-US)
本地化
===

**本地化**（l10n）是使软件用户界面适应特定文化环境的过程。

以下是本地化过程中经常考虑的因素：

* 语言
* 计量单位（如：欧洲使用千米，而美国使用英里）
* 文字方向（如：欧洲语言是从左向右书写的，而阿拉伯语是从右向左书写的）
* 拉丁字母的大写行为（如：英语用大写字母表示工作日，西班牙语使用小写字母）
* 习语的适配（如：“raining cats and dogs”的字面翻译没有任何意义）（译者注：上述习语翻译为中文是“下起瓢泼大雨”的意思，与猫和狗没有任何联系）
* 情感表达（如：日语的敬语体系与休闲语有很大的不同）
* 数字格式（如：德国使用 10 000,00，而美国使用 10,000.00）
* 日期格式
* 货币
* 文化参照
* 纸张大小
* 颜色心理
* 符合当地法律
* 本地节日
* 人名

设计一个系统以便于本地化的补充实践被称为国际化。

参见
--

* 维基百科上的本地化词条
* 国际化
GPU
===

GPU（图形处理单元）是与 CPU（中央处理单元）类似的计算机部件。它专门在显示器上绘制图形（包括二维和三维）。
强制类型转换
======

强制类型转换是将值从一种数据类型自动或隐式地转换为另一种数据类型（例如字符串转换为数字）。*类型转换*类似于*强制类型转换*，因为它们都将值从一种数据类型转换为另一种数据类型，只有一个关键的区别——*强制类型转换*是隐式的，而*类型转换*可以是隐式的，*也*可以是显式的。

示例
--


```js
const value1 = "5";
const value2 = 9;
let sum = value1 + value2;

console.log(sum);
```


在上面的例子中，JavaScript 将数字 `9` 强制变成了一个字符串，然后将两个值连接在一起，得到了一个字符串 `59`。JavaScript 在字符串和数字之间进行选择，并决定使用字符串。

编译器本可以将 `5` 强制转换为数字并返回 `14` 的和，但它没有这样做。要返回这个结果，你必须使用 `Number()` 方法显式地将 `5` 转换为一个数字：


```js
sum = Number(value1) + value2;
```

参见
--

* 类型转换（维基百科）
* 术语表
    + 类型
    + 类型转换
Flexbox
=======

Flexbox 是 CSS Flexible Box Layout Module 的常用名称，这是一种用于在单个维度（行或列）中显示项目的布局模型。

在规范中，Flexbox 被描述为用户界面设计的布局模型。Flexbox 的关键特性是 flex 布局中的项目可以增大和缩小。可以将空间（Space）分配到项目本身、项目之间或项目周围。

Flexbox 还可以对齐主轴或交叉轴上的项目，从而提供对一组项目大小和对齐的高级控制。

参见
--

### 属性引用

* `align-content`
* `align-items`
* `align-self`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `justify-content`
* `order`
### 延伸阅读

* *CSS Flexible Box Layout Module Level 1 Specification*
* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Relationship of flexbox to other layout methods*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Flexbox Guide: *Ordering flex items*
* CSS Flexbox Guide: *Contrulling Ratios of flex items along the main axis*
* CSS Flexbox Guide: *Mastering wrapping of flex items*
* CSS Flexbox Guide: *Typical use cases of flexbox*
* MDN Web Docs Glossary
    + Flex
    + Flex Container
    + Flex Item
    + Grid
* Related CSS Properties
    + `align-content`
    + `align-items`
    + `align-self`
    + `flex`
    + `flex-basis`
    + `flex-direction`
    + `flex-flow`
    + `flex-grow`
    + `flex-shrink`
    + `flex-wrap`
    + `justify-content`
    + `order`
卡片分类法
=====

卡片分类法是一种简单的技巧，Information architecture 通常是邀请参与网站开发的设计师（或是开发其他类型产品的人），让他们写下他们认为这个产品应当包含的内容、服务和功能，然后将这些功能分组。一个很好的例子是考虑网站上每个页面应当显示什么样的内容。这个名字源于这个分类是通过把要分类的项目写在卡片上，再通过排列卡片完成的。

参见
--

* Card sorting on Wikipedia
密码
==

在密码学（cryptography）领域，**密码**是将明文编码为不可读，且能够解码回原来的明文的算法。

在信息时代很久以前，密码就已经很常见了（例如替换密码和移位密码），但是它们之中除了一次性密码本以外，其他的均不满足密码学上的安全性。

现代密码通常为抵抗密码分析学家 (en-US)的攻击设计。不能保证所有攻击的方法都能被发现，但是每个算法也经历了很多已知攻击手段的检验。

密码通常以两种方式工作，或者在连续的数据块、缓冲区中作为分块密码使用，或者在数据流（通常是音频或视频流）中作为流密码使用。

密码以处理密钥的方式不同可以分为两类：

* 对称密钥加密算法使用同样的密钥进行消息的加密和解密。如果消息有保密性需求，那么密钥也应该进行安全的传送。
* 非对称密钥加密算法使用不同的密钥进行消息的加密和解密。
参见
--

* 维基百科上的密码词条
* 加密与解密
* MDN 术语表
    + Block cipher mode of operation
    + 密码
    + 密文
    + 密码套件
    + 密码分析 (en-US)
    + 密码学
    + 解密
    + 加密
    + 密钥
    + 明文
    + 非对称密钥算法 (en-US)
    + 对称密钥算法 (en-US)
API
===

一个 API（Application Programming Interface，应用编程接口）是软件（应用）中的一系列特性和规则，这些特性和规则允许其他软件与之交互（与用户界面相对）。API 可被视为提供它的应用与其他软硬件之间的一个简单的合约（接口）。

在 Web 开发中，API 通常是开发者能用在应用（app）中的一系列代码特性（如 方法、属性、事件 和 URL），这些特性被用于与用户的 web 浏览器中的组件、用户电脑上的其他软硬件或者第三方软件与服务交互。

例如：

* getUserMedia API 能被用于从用户的摄像头采集音视频。接下来开发者可以任意使用这些音视频，例如记录视频和音频、在视频会议中向其他用户广播，或者从视频中截图。
* Geolocation API 能被用于从用户的可用的任意定位设备（如 GPS）获取位置信息，然后可以再用 Google Maps APIs 将这些位置信息用于在一个自定义的地图上标记出用户的位置和展示用户所在地区的旅游景点。
* Twitter APIs 能被用于从用户的 twitter 账户获取数据，然后可以在一个网页上展示他们最近的 tweet。
* Web Animations API 能被用于制作一个网页中的动画，例如让网页中的图片移动或旋转。
参见
--

* 维基百科上的 API
* Web API 参考
驼峰式命名法
======

**驼峰式命名法**（Camel case）是一种不使用空格的短语书写方式，除了整个复合单词的首字母可以是大写或小写的之外，其他每个单词的首字母大写。该名称源于大写字母与骆驼背部的驼峰的相似性。它通常被写作“camelCase”，以提醒读者其外观。

驼峰式命名法通常用作变量命名约定。以下变量使用了驼峰式命名法：`console`、`crossOriginIsolated`、`encodeURIComponent`、`ArrayBuffer` 和 `HTMLElement`。

注意，如果短语包含缩写（例如 `URI` 和 `HTML`），驼峰式命名法的做法会有所不同。有些人喜欢保持所有缩写大写，例如上面的 `encodeURIComponent`。这有时会导致多个连续缩写的歧义，例如 `XMLHTTPRequest`。其他人则喜欢只大写第一个字母，例如 `XmlHttpRequest`。实际的全局变量 `XMLHttpRequest` 使用了两者的混合。

当整个短语的第一个字母是大写时，它被称为*大驼峰式*（upper camel case）或*帕斯卡式*（Pascal case）。否则，它被称为*小驼峰式*（lower camel case）。

驼峰式命名法是 JavaScript、Java 和其他各种语言中最流行的命名约定。

参见
--

* 蛇形命名法 (en-US)
* 烤串命名法 (en-US)
* typescript-eslint 规则：`naming-convention`
响应标头（Response header）
=====================

**响应标头**（response header）是一种 HTTP 标头，其可以用于 HTTP 响应，且与响应消息主体无关。像 `Age`、`Location` 或 `Server` 都属于响应标头，它们被用于提供更详细的响应上下文。

并非所有出现在响应中的标头都根据规范将其归类为*响应标头*。例如，`Content-Type` 标头就是一个表示标头（representation header），指示响应信息正文中的原始数据类型（在应用 `Content-Encoding` 表示标头中的编码前）。然而，“会话式”的所有标头通常在响应消息中称为响应标头。

以下展示了 `GET` 请求后的一些响应和表示标头。


```http
200 OK
Access-Control-Allow-Origin: \*
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY
```

参见
--

* 所有 HTTP 标头列表
* Glossary
    + 表示标头（Representation header）
    + HTTP 标头
    + 响应标头（Response header）
    + fetch 元数据响应头
    + 请求标头（Request header）
垃圾回收
====

**垃圾回收**是一个术语，在计算机编程中用于描述查找和删除那些不再被其他对象引用 (en-US)的对象处理过程。换句话说，垃圾回收是删除任何其他对象未使用的对象的过程。垃圾收集通常缩写为 "GC"，是 JavaScript 中使用的内存管理系统的基本组成部分。

参见
--

* Memory management on Wikipedia
* Garbage collection on Wikipedia
* Garbage collection in the MDN JavaScript guide.
* Memory management in JavaScript
深拷贝
===

对象的**深拷贝**是指其属性与其拷贝的源对象的属性不共享相同的引用（指向相同的底层值）的副本。因此，当你更改源或副本时，可以确保不会导致其他对象也发生更改；也就是说，你不会无意中对源或副本造成意料之外的更改。这种行为与浅拷贝的行为形成对比，在浅拷贝中，对源或副本的更改可能也会导致其他对象的更改（因为两个对象共享相同的引用）。

在 JavaScript 中，标准的内置对象复制操作（展开语法、`Array.prototype.concat()`、`Array.prototype.slice()`、`Array.from()`、`Object.assign()` 和 `Object.create()`）不创建深拷贝（相反，它们创建浅拷贝）。

如果一个 JavaScript 对象可以被序列化，则存在一种创建深拷贝的方式：使用 `JSON.stringify()` 将该对象转换为 JSON 字符串，然后使用 `JSON.parse()` 将该字符串转换回（全新的）JavaScript 对象：


```js
let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];
let ingredients_list_deepcopy = JSON.parse(JSON.stringify(ingredients_list));

// Change the value of the 'list' property in ingredients\_list\_deepcopy.
ingredients_list_deepcopy[1].list = ["rice flour", "water"];
// The 'list' property does not change in ingredients\_list.
console.log(ingredients_list[1].list);
// Array(3) [ "eggs", "flour", "water" ]
```


从上面的代码可以看出，因为深拷贝与其源对象不共享引用，所以对深拷贝所做的任何更改都不会影响源对象。

然而，虽然上面代码中的对象足够简单，可以序列化，但许多 JavaScript 对象根本不能序列化——例如，函数（带有闭包）、Symbol、在 HTML DOM API 中表示 HTML 元素的对象、递归数据以及许多其他情况。在这种情况下，调用 `JSON.stringify()` 来序列化对象将会失败。所以没有办法对这些对象进行深拷贝。

对于*可*序列化的对象，你也可以使用 `structuredClone()` 方法来创建深拷贝。`structuredClone()` 的优点是允许源代码中的可转移对象被*转移*到新的副本，而不仅仅是克隆。但是请注意，`structuredClone()` 不是 JavaScript 语言本身的特性——相反，它是浏览器和任何其他实现了 `window` 这样全局对象的 JavaScript 运行时的一个特性。调用 `structuredClone()` 来克隆一个不可序列化的对象会失败，与调用 `JSON.stringify()` 来序列化它会失败相同。

参见
--

* 浅拷贝
* `window.structuredClone()`
Grid
====

通过设置 CSS 属性 `display: grid;` 可以定义一个 CSS 网格。接着可以使用 `grid-template-rows` 和 `grid-template-columns` 属性定义网格的列属性 (columns) 和行属性 (rows)。

使用这些属性定义的网格被称为 *显式网格 (explicit grid)。*

如果开发者将内容放置在显式网格之外，或者依赖自动布局的话，网格法 (grid algorithm) 将需要创建额外的 row 或者 column、 tracks 来包含显示网格之外的内容 grid items，为此将在隐式网格 (implicit grid) 中创建额外的轨道 (tracks)。*当内容添加到了已定义的 tracks 之外的时候，隐式网格 (implicit grid) 会被自动创建。*

下面的例子创建了一个有两行三列的显式网格。由于超过显式网格可容纳的六个条目，此网格中的第三行将是一个*隐式网格*行轨道（implicit grid row track）。

示例
--
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
```



```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>
```

参见
--

### 属性参考

* `grid-template-columns`
* `grid-template-rows`
* `grid`
* `grid-template`
### 扩展阅读

* CSS Grid Layout Guide: *布局的基本概念*
OOP
===

**OOP**（面向对象编程）是一种编程方法，其中数据封装在\*\*对象\*\*中，对象本身在其上运行，而不是其组成部分。

JavaScript 是高度面向对象的。它遵循基于原型的模型（与基于类的模型相反）。

参见
--

* 维基百科：Object-oriented programming
* JavaScript 面向对象简介
Presto
======

Presto 是专有浏览器渲染引擎，在 Opera browser (en-US) 15 版本以下使用。之后的 Opera 浏览器基于 Chromium, 使用 Blink 渲染引擎。

参见
--

* 维基上的 Presto 渲染引擎
文档类型声明
======

在 HTML 中，文档类型 doctype 的声明是必要的。在所有文档的头部，你都将会看到"`<!DOCTYPE html>`" 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式 (兼容模式)”的渲染模式。“`<!DOCTYPE html>`" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

参见
--

* Document Type Declaration 维基百科的解释
* Quirks Mode and Standards Mode 怪异模式（兼容模式）和标准模式
* Document.doctype, 一个返回 doctype 的 JavaScript 方法
Host
====

主机（host）是一种连接到 Internet （或者一个本地网络）的设备。有一些被称作 servers （服务器）的主机可以提供额外的服务，如：提供网页、存储文件以及电子邮件。

主机不需要具有一个硬件上的实体，它可以由虚拟机产生。由虚拟机产生的主机也叫作“虚拟主机”。

参见
--

* Host (network) on Wikipedia
Cache
=====

**cache** (web cache 或者 HTTP cache) 是临时存储 HTTP 响应的组件，只要它符合一定条件，就可以用于后续的 HTTP 请求。

参见
--

* 维基百科上的Web cache
TLS
===

传输层安全性协议 (Transport Layer Security，缩写作 TLS)，它的前身是安全套接层 (Secure Sockets Layer，缩写作 SSL)，是一个被应用程序用来在网络中安全通信的 protocol （通讯协议），防止电子邮件、网页、消息以及其他协议被篡改或是窃听。

所有现代浏览器都支持 TLS 协议，它们都要求服务器提供一个有效的digital certificate（数字证书）来确认身份以建立安全连接。如果客户端和服务器都能提供自己的数字证书，则它们可以互相认证。

### 基本知识

* 传输层安全性协议
* OWASP: 传输层保护备忘单
* 维基百科上的Transport Layer Security
### 协议规范

* RFC 5246 (传输层安全性协议，版本：1.2)
Number
======

在 JavaScript 中，**Number** 是一种 定义为 64 位双精度浮点型（double-precision 64-bit floating point format） (IEEE 754)的数字数据类型。在其他编程语言中，有不同的数字类型存在，比如：整型（Integers），单精度浮点型（Floats），双精度浮点型（Doubles），大数（Bignums）。

参见
--

* 维基百科上的数字类型
* JavaScript 类型：`Number`
* JavaScript 全局对象 `Number`
* MDN 术语表
    + JavaScript
    + Primitive
Polyfill
========

Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。

比如说 polyfill 可以让 IE7 使用 Silverlight 插件来模拟 HTML Canvas 元素的功能，或模拟 CSS 实现 rem 单位的支持，或 `text-shadow`，或其他任何你想要的功能。

参见
--

* 什么是 polyfill？ （Remy Sharp 著，概念发明者）
UI
==

*用户界面* (UI) 是实现人机交互的一类事物的总称。在计算机世界中，UI 可以是来自键盘、摇杆、屏幕或程序中的任何东西。在计算机软件中，UI 可以是命令行、网页、用户、用户输入的表格或是任何应用的前端。

参见
--

* 维基百科上的 用户界面
* 维基百科上的 前端开发