chrome_win32_stable_66.0.3359.139

CSS 类型化对象模型

如果您曾经通过 JavaScript 更新过 CSS 属性，则表示您使用过 CSS 对象模型。但它会以字符串的形式返回所有内容。

如需为 opacity 属性添加动画效果，我必须将字符串转换为数字，然后递增该值并应用更改。不太理想。

借助新的 CSS 类型化对象模型，CSS 值会以类型化 JavaScript 对象的形式公开，从而消除大量类型操作，并提供更合理的 CSS 处理方式。

您可以通过 .attributeStyleMap 属性或 .styleMap 访问样式，而不是使用 element.style。它们会返回类似于映射的对象，以便于读取或更新。

与旧版 CSS 对象模型相比，早期基准测试结果显示，每秒操作次数提高了约 30%，这对 JavaScript 动画来说尤为重要。

它还有助于消除因忘记将值从字符串转换为数字而导致的 bug，并自动处理值的舍入和截断。此外，还有一些非常实用的新方法来处理单位转换、算术和等式。

Eric 在其说明文档中提供了一篇很棒的文章，其中包含多个演示和示例。

Async Clipboard API

对于少量文本，使用 document.execCommand 进行同步复制和粘贴可能没问题，但对于任何其他内容，同步性很可能会阻塞页面，从而导致用户体验不佳。而且，浏览器之间的权限模型不一致。

新的 Async Clipboard API 是一种异步替代方案，可与权限 API 集成，为用户提供更好的体验。

您可以通过调用 writeText() 将文本复制到剪贴板。

由于此 API 是异步的，因此 writeText() 函数会返回一个 promise，该 promise 会根据我们传递的文本是否成功复制而解析或遭拒。

同样，您可以通过调用 getText() 并等待返回的 Promise 解析为文本，从剪贴板中读取文本。

请参阅 说明文档，查看 Jason 的帖子和演示。他还提供了一些使用 async 函数的示例。

新的画布上下文 BitmapRenderer

借助 canvas 元素，您可以在像素级别操控图形，可以绘制图表、处理照片，甚至可以进行实时视频处理。不过，除非您从空白 canvas 开始，否则您需要一种在 canvas 上渲染图片的方法。

传统上，这意味着创建 image 标记，然后将其内容呈现到 canvas。遗憾的是，这意味着浏览器需要在内存中存储图片的多个副本。

从 Chrome 66 开始，新增了一种异步渲染上下文，简化了 ImageBitmap 对象的显示。现在，它们通过异步工作并避免内存复制，可以更高效地渲染，并且卡顿更少。

要使用此应用，请执行以下操作：

1. 调用 createImageBitmap 并将图片 blob 传递给它，以创建图片。
2. 从 canvas 获取 bitmaprenderer 上下文。
3. 然后将图片传入。

完成，我已渲染图片！

AudioWorklet

Worklet 现已推出！PaintWorklet 在 Chrome 65 中发布，现在我们在 Chrome 66 中默认启用 AudioWorklet。这种新类型的 Worklet 可用于在专用音频线程中处理音频，从而取代在主线程上运行的旧版 ScriptProcessorNode。每个 AudioWorklet 都在自己的全局范围内运行，从而缩短延迟时间并提高吞吐量稳定性。

您可以在 Google Chrome Labs 上找到一些有趣的 AudioWorklet 示例。

等等！

当然，这只是 Chrome 66 中面向开发者的部分变更，还有许多其他变更。

• TextArea 和 Select 现在支持 autocomplete 属性。
• 在 form 元素上设置 autocapitalize 将应用于任何子表单字段，从而提高与 Safari 对 autocapitalize 的实现的兼容性。
• trimStart() 和 trimEnd() 现在可用作基于标准的方法来从字符串中剪除空格。

官方原文：New in Chrome 66