- 借助新的 CSS 类型化模型对象，CSS 操纵变得更加简单。
- 对剪贴板的访问现在是异步的。
- 新增了 canvas 元素的渲染上下文。
还有更多功能！
我是 Pete LePage。我们来深入了解一下 Chrome 66 中面向开发者的新功能！
想要查看完整的变更列表？请查看 Chromium 源代码库更改列表。
CSS 类型化对象模型
如果您曾经通过 JavaScript 更新过 CSS 属性，则表示您使用过 CSS 对象模型。但它会以字符串的形式返回所有内容。
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
如需为 opacity 属性添加动画效果，我必须将字符串转换为数字，然后递增该值并应用更改。不太理想。
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
借助新的 CSS 类型化对象模型，CSS 值会显示为类型化 JavaScript 对象，从而消除了大量的类型操作，并提供了一种更合理的 CSS 处理方式。
您可以通过 .attributeStyleMap 属性或 .styleMap 访问样式，而不是使用 element.style。它们会返回类似于映射的对象，以便于读取或更新。
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
与旧版 CSS 对象模型相比，早期基准测试结果显示，每秒操作次数提高了约 30%，这对 JavaScript 动画来说尤为重要。
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
它还有助于消除因忘记将值从字符串转换为数字而导致的 bug，并自动处理值的舍入和截断。此外，还有一些非常实用的新方法来处理单位转换、算术和等式。
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Eric 在其说明文档中提供了一篇很棒的文章，其中包含多个演示和示例。
Async Clipboard API
const successful = document.execCommand('copy');
对于少量文本，使用 document.execCommand 进行同步复制和粘贴可能没问题，但对于任何其他内容，同步性很可能会阻塞页面，从而导致用户体验不佳。而且，浏览器之间的权限模型不一致。
新的 Async Clipboard API 是一种异步替代方案，可与权限 API 集成，为用户提供更好的体验。
您可以通过调用 writeText() 将文本复制到剪贴板。
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
由于此 API 是异步的，因此 writeText() 函数会返回一个 promise，该 promise 会根据我们传递的文本是否成功复制而解析或遭拒。
同样，您可以通过调用 getText() 并等待返回的 Promise 解析出文本，从而从剪贴板读取文本。
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
请参阅 Jason 的帖子和说明文档中的演示。
他还提供了一些使用 async 函数的示例。
新的画布上下文 BitmapRenderer
借助 canvas 元素，您可以在像素级别处理图形，可以绘制图表、处理照片，甚至可以进行实时视频处理。不过，除非您从空白 canvas 开始，否则您需要一种在 canvas 上渲染图片的方法。
过去，这意味着创建 image 标记，然后将其内容渲染到 canvas。遗憾的是，这意味着浏览器需要在内存中存储多个图像副本。
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
从 Chrome 66 开始，新增了一种异步渲染上下文，简化了 ImageBitmap 对象的显示。现在，它们通过异步工作并避免内存复制，可以更高效地渲染，并且卡顿更少。
要使用此应用，请执行以下操作：
- 调用
createImageBitmap并将图片 blob 传递给它，以创建图片。 - 从
canvas获取bitmaprenderer上下文。 - 然后将图片传输进来。
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
完成，我已渲染图片！
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()现在可作为移除字符串中空白字符的标准方式。
请务必参阅 Chrome 开发者工具的新变化，了解 Chrome 66 中 Chrome 开发者工具的新变化。如果您对渐进式 Web 应用感兴趣，请观看全新的 PWA 巡回演示视频系列。然后，点击我们的 YouTube 频道上的订阅按钮，这样每当我们发布新视频时，您就会收到电子邮件通知。
我是 Pete LePage，Chrome 67 发布后，我会立即为您介绍 Chrome 中的新变化！