- 借助新的 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 现已推出！Chrome 65 中提供了 PaintWorklet，现在我们在 Chrome 66 中默认启用 AudioWorklet。这种新类型的 Worklet 可用于在专用音频线程中处理音频，从而取代在主线程上运行的旧版 ScriptProcessorNode。每个 AudioWorklet 都在自己的全局范围内运行，从而缩短延迟并提高吞吐量稳定性。
您可以在 Google Chrome Labs 上找到一些有趣的 AudioWorklet 示例。
等等！
当然，这只是 Chrome 66 中面向开发者的部分变更，还有许多其他变更。
TextArea和Select现在支持autocomplete属性。- 对
form元素设置autocapitalize将应用于所有子表单字段，从而提高与 Safari 的autocapitalize实现的兼容性。 trimStart()和trimEnd()现在可作为移除字符串中空白字符的标准方式。
请务必查看 Chrome 开发者工具中的新功能，了解 Chrome 66 中的开发者工具的新变化。此外，如果您对渐进式 Web 应用感兴趣，请观看新的 PWA Roadshow 视频系列。然后，点击我们的 YouTube 频道上的订阅按钮，这样每当我们发布新视频时，您就会收到电子邮件通知。
我是 Pete LePage，Chrome 67 发布后，我会立即为您介绍 Chrome 中的新变化！