原文链接：
Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet

除非尚有申明，不然下文所述的变动适用于 Android，Chrome OS，Linux，macOS 和 Windows 的最新 Chrome Beta 版本。在 ChromeStatus 上检察 Chrome 66 中完全的特征列表。

<canvas> 的 ImageBitmap 衬着上下文

从历史上看，将图象衬着到画布上首先要建立一个 <img> 标签，然后将其内容显现到画布上。这会致使图象的多个副本存储在内存中。新的衬着上下文能够流线化 ImageBitmap 对象的显现，因而能够防止内存反复，而且更高效。

这个例子展现了怎样运用 ImageBitmapRenderingContext。例子重要演示了关于图象像素的转移。这个例子是把像素从 blob 转移到 <canvas>，但像素也能够在 <canvas> 元素之间挪动。请注意，blob 是紧缩的，因而它不是内存中的完全副本。

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

canvas.toBlob((outputJPEGBlob) => {
  // Do something with outputJPEGBlob.
}, 'image/jpeg');

假如不运用 createImageBitmap()，那末 imageBlob 的解码会被延后(lazily decoded)，这会致使题目。另一方面，createImageBitmap() 是异步的，它能够让你在运用之前对它举行完全解码。比方，在 WebGL 游戏运转历程种，能够运用它来随时加载新的纹理。

CSS 范例对象模子

从历史上看，想要支配 CSS 属性的开发人员必需只能支配字符串，然后再将其转换为范例化示意。更糟的是，当开发人员试图读取 Javascrip 中 CSS 属性的值时，这类范例的值被转换为字符串。

在 Chrome 66 中，针对 CSS 属性的一个子集完成了 CSS 范例对象模子（OM）Level 1，这些属于 Houdini 的一部份。Type OM 经由过程将 CSS 值暴露为范例化的 JavaScript 对象而不是字符串来减轻开发人员和阅读器的累赘。除了许可对赋值给 CSS 属性的值举行高效处置惩罚外，Typed OM 还许可开发人员编写更易于保护且易于明白的代码。

一个简朴的例子申清楚明了这一点。之前，假如我想设置元素的不透明度，我能够如许做：

el.style.opacity = 0.3;
el.style.opacity === "0.3"

运用 CSSOM：

el.attributeStyleMap.set("opacity", CSS.number("0.3"));
el.attributeStyleMap.get("opacity").value === 0.3

上面返回值的范例是 CSSUnitValue，比字符串更轻易操纵。

异步剪贴板 API

（译者(justjavac)注：Google 开发者中间有一篇文章引见异步剪贴板 API Unblocking Clipboard Access，我也已翻译了中文版 Async Clipboard API：异步剪贴板 API）

AudioWorklet

传统 ScriptProcessorNode 是异步的，而且须要线程腾跃(译者注：会在 UI 线程和用户线程之间腾跃)，这能够会发作不稳固的音频输出。AudioWorklet 对象供应了一个新的同步 JavaScript 实行上下文，它许可开发人员以编程体式格局掌握音频，而不会在输出音频中发作分外耽误，越发稳固高效。

您能够在 Google Chrome Labs 检察示例代码以及其他示例代码。

除了 AudioWorklet 以外，其他 worklet API 正在构建中。PaintWorklet 在 Chrome 65 / Opera 52 中已宣布。AnimationWorklet 设计中。ScriptProcessorNode 会在 AudioWorklet 宣布一段时间后会被弃用。

本发行版中的其他功用

Blink > Animation

The add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.

Blink > CSS

CSS 有 2 个新功用。

• CSS Values and Units Module Level 4 支撑了数学表达式 calc(), min()，max()。
• rgb() 和 rgba() 函数中如今许可浮点值。

Blink > Feature Policy

默许状况下，deviceorientation，deviceorientationabsolute，和 devicemotion 事宜仅限于顶级文档和雷同泉源的子框架，就犹如 feature policy 对这些特征设置为 'self' 一样。要修正此行动，请明白 enable or disable the specific feature。

Blink > File API

尝试从无效或不存在的 BLOB URL 读取时 ，File API 会致使收集毛病，而不是 404。

Blink > Forms

HTML 表单有 2 个新功用。

• 根据范例，<textarea> 和 <select> 支撑 autocomplete 属性。
• 根据 HTML 范例的要求)，一个可变的复选框如今触发 3 个事宜：click 事宜，然后是 input 事宜，然后是 change 事宜。之前只要 click 和 change 事宜被触发。

Blink > Fullscreen

假如全屏形式下的页面翻开弹出窗口并挪用 window.focus(), 该页面会退出全屏。假如弹出窗口以其他体式格局吸收核心，则不会发作这类状况。

Blink > GetUserMedia

MediaStreamTrack 接口有一个新要领 getCapabilities()。

返回一个 MediaTrackCapabilities 对象，该对象指定每一个受限制属性的值或值局限。该功用因装备而异。

Blink > JavaScript

几个 JavaScript 变动。

• Function.prototype.toString() 函数如今返回源代码中写入的内容。这包括能够已运用的空缺和其他文本。比方，假如函数关键字和函数称号之间存在解释，则除了关键字和称号以外，如今还返回解释。
• JSON 如今是 ECMAScript 的一个语法子集，它许可字符串文本中的行分隔符(U+2028)和段落分隔符(U+2029)标记。
• try 语句的 catch 子句如今能够在没有参数的状况下运用。
• 除了之前早已完成的 String.prototype.trim() 外，Chrome 66 完成了 String.prototype.trimStart() 和 String.prototype.trimLeft() 用来将字符串两侧的空缺去除。而 trimLeft() 和 trimRight() 是为了坚持为向后兼容性而供应的非标准的要领别号。
• Array.prototype.values() 要领返回一个新的数组迭代器对象，该对象包括数组中每一个索引的值。

Blink > Layout

规划有 2 个新功用。

• grid 前缀：

  • grid-gap 变 gap
  • grid-row-gap 变 row-gap
  • grid-column-gap 变 column-gap
• 一切三者的默许值是 normal，前缀属性是新称号的别号。请注意，column-gap 属性已存在并被 css-multicol 运用。
• 当元素的 display 属性是 table-row，table-row-group， table-header-group，table-footer-group，table-cell，table-caption，并具有 transform 属性时，此元素能够作为 fixed-position 元素的包括块。Blink 现在不能把 <tr>，<tbody>，<tfoot>，<thead> 作为 fixed-position 元素的包括块。

Blink > Media

媒体有 2 个新功用。

• 正如之前博客所引见的那样，autoplay 只要当媒体不会播放声响时，用户主动点击后，或许（桌面版）假如用户之前在该网站上表现出对媒体的兴致时才许可播放。如许做会在第一次翻开网页时削减不测的视频播放和声响。

（译者(justjavac)注：现在运转被自动播放的内容包括：内容被静音、内容只包括视频（无音频）、用户在阅读会话时期点击网站上的某个处所、在挪动装备上假如该网站已被用户添加到主屏幕、假如用户在桌面版阅读器上频仍播放该媒体）

• Media Capabilities, Decoding Info API 许可网站猎取有关客户端的解码才能的更多信息。这为用户供应了更多关于媒体流的选择权，能够使客户端越发腻滑高效地解码，而非仅仅基于可用带宽和屏幕大小分辨率举行解码。

Blink > Network

Fetch API 有 2 个新功用。

• Request 对象如今支撑 keepalive 属性，该属性许可在封闭标签后继承 fetch。经由过程在组织函数的初始化对象中通报布尔值来挪用此功用。它的值能够从对象自身读回。该属性也能够和 sendBeacon() 一同运用。
• 新的 AbortSignal 和 AbortController 接口许可作废 fetch 操纵。建立一个 AbortController 对象并将其 signal 属性作为 option 通报给 fetch。挪用 abortController.abort() 作废 fetch。 我们之前撰写的 abortable fetch article 中有更多信息，下面是一个代码示例。

const controller = new AbortController();
const signal = controller.signal;
const requestPromise = fetch(url, { signal });

// Abort the fetch:
controller.abort();

（题外话：cancelable-promises 提案在进入 stage 1 的时刻被作废掉了）

Blink > ServiceWorker

ServiceWorker 有两个变化。

• 假如 request 的形式是 same-origin，而 response 的形式是 CORS，ServiceWorker 不能再相应。这是近来添加到 Fetch 范例的安全措施。
• FetchEvent.clientId 如今返回一个空字符串，而不是 null。比方，这会在导航要求时期发作。

Blink > WebRTC

Chrome 如今支撑 RTCRtpSender.dtmf 属性。这庖代了 CreateDTMFSender() 还没有弃用的功用。

弃用和互操纵性革新

Blink > CSS

object-position 和 perspective-origin 属性不再接收 3 个部份构成的值，比方 top right 20%。此变动也适用于基础外形和渐变。有用位置值必需一直有 1, 2 或 4 个部份。

Blink > HTML

根据范例，ImageCapture.prototype.setOptions() 已被删除。

Blink > Input

根据范例，document.createTouch() 和 document.createTouchList() 已被删除。

Blink > Web Audio

在范例变动以后，AudioParam.prototype.value 的自动解紧缩功用从 Chrome 中移除。假如您须要腻滑处置惩罚 AudioParam 的变动，请运用 AudioParam.prorotype.setTargetAtTime()。