Chrome 66 Beta新特性介绍

时间:2024-03-31 13:49:30

除非另外注明,否则,下面介绍的更改均适用于最新 Chrome 测试版(Android、Chrome 操作系统、Linux、macOS 和 Windows)。可以在 ChromeStatus 上查看 Chrome 66 中功能的完整列表。



控制台增强和设备更新

一直以来,将图像渲染到画布首先都是创建一个 <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 将延迟解码,这会导致卡顿。另一方面,createImageBitmap() 是异步的,这让您可以在使用前将其完全解码,也不会有卡顿。例如,WebGL 游戏可以通过这种方式随着游戏进度动态加载新纹理。



CSS 类型化对象模型

一直以来,想要操纵 CSS 属性的开发者不得不仅为浏览器操纵字符串,然后将它转换回类型化表示。让事情更糟糕的是,当开发者尝试在 Javascript 中读取 CSS 属性的值时,这种类型化值会转换回字符串。


在版本 66 中,Chrome 为一部分 CSS 属性实现了 CSS 类型化对象模型 (OM) 级别 1(Houdini 的一部分)。类型化对象模型通过将 CSS 值显示为类型化 JavaScript 对象(而不是字符串)的方式减轻了开发者和浏览器的这个负担。除了对分配至 CSS 属性的值进行高效操纵外,类型化对象模型还让开发者可以编写更易于维护和理解的代码。


一个简单的示例说明了这一点。之前,如果我想要设置元素的不透明度,我可以这样做:

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,它们比字符串更易于操纵。



Asynchronous Clipboard API

全新的 Asynchronous Clipboard API 为从剪贴板进行读写操作提供了一种基于 Promise 的方式。它比 Chrome 43 中发布的旧 execCommand('copy') API 简单,并且与 Permissions API 集成。未来的 Chrome 版本还将支持更多类型数据的复制/粘贴,包括图像。


为了亲身体验此 API,让我们对文本进行简单的读写操作。

try {
  await navigator.clipboard.writeText("Hello, clipboard.");
} catch { 
  console.error("Unable to write to clipboard.");
}


类似地,要读回文本,请使用以下代码:

const data = await navigator.clipboard.readText();
console.log("From the clipboard:", data);


如需了解更多信息,包括如何对 API 进行安全和权限设置,请阅读解除阻止剪贴板权限并查看我们的示例:

https://github.com/GoogleChrome/samples/tree/gh-pages/async-clipboard



AudioWorklet

旧 ScriptProcessorNode 是异步的,并且需要线程 hop,这会生成不稳定的音频输出。AudioWorklet 对象提供了一种新的同步 JavaScript 执行环境,让开发者能够通过编程方式控制音频,输出音频中不会有其他延迟,并且稳定性更高。


您可以在 Google Chrome 实验室中查看示例代码的执行情况和其他示例。
除了 AudioWorklet 外,我们还在构建其他 worklet API。PaintWorklet 在 Chrome 65/Opera 52 中发布。AnimationWorklet 已经规划。ScriptProcessorNode 将在 AudioWorklet 交付后的某个时间弃用。



此版本中的其他功能

Blink > Animation

add 和 accumulate 合成运算预期用于构建模块化动画。Chrome 即将支持 add 和 accumulate 关键字。届时,它们将不再引发错误。这是为了保持与 Firefox 和其他实现的兼容性。


Blink > CSS

CSS 有两个新功能。

  • 按照 CSS 值和单位模块级别 4 规范的要求,媒体查询中现在支持 calc(),min() 和 max() 数学表达式。此变更会让它们符合其他类型的规则,在这些规则中,任何允许数字的地方都可以使用这些函数。

  • rgb() 和 rgba() 函数中现在允许浮点值。


Blink > Feature Policy

默认情况下,deviceorientation、deviceorientationabsolute 和 devicemotion 事件现在被限制到*文档和原点相同的子帧,等同于这些功能的功能策略设为 'self'。要修改此行为,请显式启用或禁用特定功能。


Blink > File API

当用户试图从无效或不存在的 blob 网址读取数据时,File API 现在将生成网络错误,而不是 404。


Blink > Forms

HTML 表单有两个新功能。

  • 按照规范的要求,<textarea> 元素和 <select> 元素现在支持 autocomplete 属性。

  • 按照 HTML 规范的要求,一个可变复选框现在可以依次触发三个事件: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() 外,String.prototype.trimStart()和 String.prototype.trimLeft() 现在也成为移除字符串中空白字符的标准方式。为了确保向后兼容性,非标准的 trimLeft() 和 trimRight() 仍作为新函数的别名。

  • Array.prototype.values() 函数可以返回一个新数组迭代器对象,其中包含数组中每个索引的值。


Blink > Layout

布局有两个新功能。


1. grid 前缀已经从 CSS gutter 属性中移除:

  • grid-gap 变成 gap

  • grid-row-gap 变成 row-gap

  • grid-column-gap 变成 column-gap


全部三个属性的默认值均为 normal,带前缀的属性是新属性的别名。请注意,column-gap 属性已经存在,并且由 css-multicol 使用。


2. 显示属性为 table-row、table-row-group、 table-header-group、table-footer-group、table-cell 和 table-caption 并且具有转换属性的元素现在是位置固定的元素的包含块。Blink 没有让 <tr>、<tbody>、<tfoot> 和 <thead>成为位置固定的元素的包含块。


Blink > Media

媒体有两个新功能。

  • 正如之前的宣布,现在,只有用户点击或点按网站后媒体不播放声音或者(在桌面设备上)用户之前已对网站上的媒体表现出兴趣时,才允许autoplay。这会减少首次打开网页时带声音的意外视频播放。

  • 利用 Media Capabilities, Decoding Info API,网站能够获取与客户端的解码能力相关的更多信息。这样可以让用户作出更明智的媒体流选择决定,从而避免客户端无法平滑且有效地解码仅根据可用带宽和屏幕大小选择的分辨率之类的情况。


Blink > Network

Fetch API 有两个新功能。

  • Request 对象现在支持 keepalive 属性,此属性可以让提取在标签页关闭后保持继续。向构造函数的初始化对象传入一个布尔值可以调用此功能。它的值可以从对象本身读回。此属性还可与 sendBeacon() 结合使用。

  • 新的 AbortSignal 和 AbortController 接口支持取消提取。为此,请创建一个 AbortController 对象并将它的信号属性作为一个选项传递到 fetch。调用 abortController.abort() 可以取消提取。我们的可中止提取文章提供了更多信息,下面显示了一个短代码示例。

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

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


Blink > ServiceWorker

Service Worker 有两个变化。

  • Service Worker 可以不再使用类型为 CORS 的响应响应模式为 same-origin 的请求。这是最近添加到“Fetch 规范”中的一项安全措施。

  • 在不置位时,FetchEvent.clientId 现在会返回一个空字符串,而不是 null。例如,导航请求期间会发生这种情况。


Blink > WebRTC

按照规范要求,Chrome 现在支持 RTCRtpSender.dtmf 属性。这将替换 CreateDTMFSender() 函数,此函数尚未弃用。



弃用项和互操作性的改善

Blink > CSS

object-position 和 perspective-origin 属性不再接受三部分值,例如 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()。


Chrome 66 Beta新特性介绍