Chrome 63 Beta新特性介绍

2,024 阅读5分钟

除非另外注明,否则,下面介绍的更改均适用于最新 Chrome Beta 渠道版(Android、Chrome 操作系统、Linux、Mac 和 Windows)。

动态模块导入

目前,导入 JavaScript 模块是完全静态的,开发者无法根据运行时条件(例如用户是否登录)导入模块。从这个版本开始,开发者可以利用 import(specifier) 语法在运行时动态加载代码到模块和脚本中。这一功能可用于仅在需要时延迟加载脚本,从而提升应用的性能。

button.addEventListener('click', event => {
   import('./dialogBox.js')
   .then(dialogBox => {
       dialogBox.open();
   })
   .catch(error => {
       /* Error handling */
   });
}); 上面的代码示例显示了如何在某个事件后使用 import(specifier) 函数导入 JavaScript。

异步迭代器和生成器

编写通过异步函数执行任何迭代的代码不是很好的做法。现在,我们推出使用异步迭代协议异步生成器函数,帮助开发者简化流式传输数据源的消耗或实现。异步迭代器可用于 for 循环以及通过异步迭代器工厂创建自定义异步迭代器。 async function* getChunkSizes(url) {
 const response = await fetch(url);

 for await (const chunk of streamAsyncIterator(response.body)) {
   yield chunk.length;
 }
} 上面的代码示例显示了如何使用异步迭代器通过 streamAsyncIterator 函数编写更简洁的代码来流式传输提取的数据。

Device Memory API

由于设备的能力不同,开发者要想打造一种适合所有设备的用户体验困难重重。全新的 Device Memory JavaScript API 可以通过用户设备上的总内存来详细了解设备限制,从而帮助开发者应对这个挑战。开发者可以利用这一数据分析按照硬件限制在运行时定制内容。例如,开发者可以向使用低端设备的用户提供精简版应用,从而改进用户体验和降低用户的失望感。Device Memory API 也可用于向指标添加环境信息,例如从设备内存的角度来显示某个任务在 JavaScript 中完成所需的时间。




权限界面更改

在网站需要用户提供特殊权限时,它们可以触发权限请求。目前,这些权限请求在 Chrome(Android 版)中以可忽略的横幅形式显示在屏幕底部,开发者在呈现这些请求时通常没有考虑用户是否有合适的环境来授予权限。这会影响用户体验,用户在超过 90% 的情况下都会忽略或暂时拒绝这些权限请求。

在 Chrome 59 中,我们着手解决这个问题,如果用户忽略某个权限请求达到三次,我们会暂时屏蔽这一权限。作为跟进,在这个版本中,Chrome(Android 版)现在以模态对话框形式呈现权限请求。这一变化可以将整体的权限提示次数减少 50%。它也将用户接受或拒绝请求的可能性提高了 5 倍,而不是让他们暂时拒绝或重复忽略请求。为了确保用户理解权限请求,开发者应在适当的时间向用户呈现权限请求,因为我们发现,如果网站在一定环境下要求权限,用户授予相关权限的可能性要高 2.5 倍。

此版本中的其他特性

Blink > Bindings

Blink > CSS


  • 现在,开发者可以使用全新的 Q 长度单位进行像素级调整,这在小视口上特别有用。
  • 开发者现在可以阻止应用使用 Chrome 的拉动刷新功能,或者使用 overscroll-behavior 创建自定义效果,这样,可以在滚动条达到最大限度后更改浏览器的行为。

Blink > Fonts

Blink > HTML

  • 为了改善互操作性,Chrome 将 beforeprint 和 afterprint event 作为打印标准的一部分触发,这让开发者可以注解打印副本以及在打印命令完成执行后编辑注解。

Blink > JavaScript

Blink > MediaStream

Blink > Network

Blink > Sensor

  • 得益于 Intel 工程师的贡献,一项初始试用现已推出,它可以通过全新的 Generic Sensors API 语法公开以下 sensor:Accelerometer, LinearAccelerationSensor, Gyroscope, AbsoluteOrientationSensor 和 RelativeOrientationSensor。

Blink > Storage

  • localStoragesessionStorage API 现在使用 getItem() 而不是匿名 getter 函数,因此,尝试使用 getItem() 获取某个键现在将返回 null,而不是 undefined。感谢 Intel 的大力贡献!
  • 为了提升开发者体验,sessionStorage 和 localStorage 的相关函数(例如 getItem()、removeItem() 和 clear())现在可以枚举。感谢 Intel 让这成为现实!

UI > Browser > Mobile (Android)


弃用项和互操作性的改善

Blink > Bindings

  • 为了改善互操作性,Promise 类型的实例属性现在将返回被拒绝的 promise,而不是引发异常。

Blink > CSS


Blink > DOM


发布人:延迟加载工程师 Sathya Gunasekaran