[译] Chrome 66 Beta：CSS 类型对象模型，异步剪贴板 API，AudioWorklet，等

原文连接：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()。