- 利用新增的 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