- 利用新增的 CSS 类型化模型对象，您可以更轻松地处理 CSS 操作。
- 现在，对剪贴板的访问是异步进行的。
- 画布元素有一个新的渲染上下文。
还有更多精彩内容！
我是 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 函数的示例。
新的 Canvas Context 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 实验室中提供了一些 AudioWorklet 的有趣示例。
还有更多其他奖励！
以上只是 Chrome 66 中面向开发者的一些变化，当然，还有很多变化。
TextArea和Select现在支持autocomplete属性。- 在
form元素上设置autocapitalize会应用于所有子表单字段，从而提升与 Safari 的autocapitalize实现的兼容性。 trimStart()和trimEnd()现已成为剪除字符串中的空格的标准方法。
请务必查看 Chrome 开发者工具的新变化，了解 Chrome 66 中开发者工具的新变化。此外，如果您对渐进式 Web 应用感兴趣，请观看新的 PWA 路演视频系列。然后，点击 YouTube 频道上的订阅按钮，这样，每当我们发布新视频时，您都会收到电子邮件通知。
我是 Pete LePage