资讯专栏INFORMATION COLUMN

Chrome 66 Beta:CSS 类型对象模型,异步剪贴板 API,AudioWorklet,等

张宪坤 / 3403人阅读

摘要:在中,针对属性的一个子集实现了类型对象模型,这些属于的一部分。返回一个对象,该对象指定每个受限制属性的值或值范围。例如,这会在导航请求期间发生。按照规范,已被删除。

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

除非另有说明,否则下文所述的更改适用于 Android,Chrome OS,Linux,macOS 和 Windows 的最新 Chrome Beta 版本。在 ChromeStatus 上查看 Chrome 66 中完整的特性列表。

ImageBitmap 渲染上下文

从历史上看,将图像渲染到画布上首先要创建一个 标签,然后将其内容呈现到画布上。这会导致图像的多个副本存储在内存中。新的渲染上下文可以流线化 ImageBitmap 对象的显示,因而可以避免内存重复,并且更高效。

这个例子展示了如何使用 ImageBitmapRenderingContext。例子主要演示了关于图像像素的转移。这个例子是把像素从 blob 转移到 ,但像素也可以在 元素之间移动。请注意,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

默认情况下,deviceorientationdeviceorientationabsolute,和 devicemotion 事件仅限于顶级文档和相同来源的子框架,就如同 feature policy 对这些特性设置为 "self" 一样。要修改此行为,请明确 enable or disable the specific feature。

Blink > File API

尝试从无效或不存在的 BLOB URL 读取时 ,File API 会导致网络错误,而不是 404。

Blink > Forms

HTML 表单有 2 个新功能。

按照规范,